fix: backward compatible filter urls

Fixes nishantwrp#97.

src/pages/index.jsx

@@ -13,7 +13,7 @@ import Notification from "../components/notification"
 import { Grid } from "semantic-ui-react"
 import { useAppSelector, useAppDispatch } from "../store"
 import { getSearch } from "../store/search"
-import { getFilters } from "../store/filters"
+import { getFilters, getFiltersFromSearchUrl } from "../store/filters"
 import { getSearchParam } from "../utils/searchParams"
 import { EventBus } from "../utils/events"
 import { urlChanged } from "../store/actions"
@@ -143,13 +143,7 @@ const IndexPage = ({ data }) => {
     // doesn't run when the filters or search is being modified in the app itself.
 
     const updatedSearchQuery = getSearchParam("search") || ""
-    const updatedFilters = JSON.parse(getSearchParam("filters")) || {
-      years: [],
-      categories: [],
-      technologies: [],
-      topics: [],
-      shortcuts: [],
-    }
+    const updatedFilters = getFiltersFromSearchUrl()
 
     dispatch(
       urlChanged({ search: updatedSearchQuery, filters: updatedFilters })

src/store/filters.js

@@ -6,6 +6,8 @@ import {
 } from "../utils/searchParams"
 import { urlChanged } from "./actions"
 
+const FILTERS = ["years", "categories", "technologies", "topics", "shortcuts"]
+
 const updateFiltersInUrl = filters => {
   if (Object.values(filters).filter(arr => arr.length !== 0).length === 0) {
     removeSearchParam("filters")
@@ -16,19 +18,21 @@ const updateFiltersInUrl = filters => {
   }
 }
 
+const ensureAllFilters = o => {
+  for (const filter of FILTERS) {
+    o[filter] = o[filter] || []
+  }
+}
+
+export const getFiltersFromSearchUrl = () => {
+  const filters = JSON.parse(getSearchParam("filters")) || {}
+  ensureAllFilters(filters)
+  return filters
+}
+
 const filtersSlice = createSlice({
   name: "filters",
-  initialState: () => {
-    return (
-      JSON.parse(getSearchParam("filters")) || {
-        years: [],
-        categories: [],
-        technologies: [],
-        topics: [],
-        shortcuts: [],
-      }
-    )
-  },
+  initialState: () => getFiltersFromSearchUrl(),
   reducers: {
     addFilter: (state, action) => {
       const { name, val } = action.payload
@@ -41,32 +45,22 @@ const filtersSlice = createSlice({
       updateFiltersInUrl(state)
     },
     setFilters: (state, action) => {
-      const {
-        years,
-        categories,
-        technologies,
-        topics,
-        shortcuts,
-      } = action.payload
-      state.years = years
-      state.categories = categories
-      state.technologies = technologies
-      state.topics = topics
-      state.shortcuts = shortcuts
+      for (const filter of FILTERS) {
+        state[filter] = action.payload[filter] || []
+      }
       updateFiltersInUrl(state)
     },
     clearFilters: state => {
-      state.years = []
-      state.categories = []
-      state.technologies = []
-      state.topics = []
-      state.shortcuts = []
+      for (const filter of FILTERS) {
+        state[filter] = []
+      }
       updateFiltersInUrl(state)
     },
   },
   extraReducers: builder => {
     builder.addCase(urlChanged, (state, action) => {
       const { filters } = action.payload
+      ensureAllFilters(filters)
       return { ...filters }
     })
   },