localStorage implementation

components/notifications-filter.js

@@ -6,13 +6,23 @@ import { Checkbox, Form, SubmitButton } from './form'
 import FilterIcon from '@/svgs/equalizer-line.svg'
 import styles from './notifications-filter.module.css'
 
+export const getFiltersFromInc = (inc) => {
+  const filters = new Set(inc?.split(',') || [])
+  filters.delete('')
+  return filters
+}
+
+export const getSavedFilters = () => {
+  const savedFilters = JSON.parse(window.localStorage.getItem('notificationFilters'))
+  return savedFilters ? new Set(savedFilters) : new Set()
+}
+
 export function NotificationsFilter ({ onClose }) {
   const router = useRouter()
 
   const appliedFilters = useMemo(() => {
-    const filters = new Set(router.query.inc?.split(',') || []) // get filters from URL
-    filters.delete('') // avoid empty category
-    return filters
+    const incFilters = getFiltersFromInc(router.query.inc)
+    return incFilters.size ? incFilters : getSavedFilters()
   }, [router.query.inc])
 
   const [filters, setFilters] = useState(appliedFilters)
@@ -26,6 +36,7 @@ export function NotificationsFilter ({ onClose }) {
   }, [])
 
   const filterRoutePush = useCallback(() => {
+    window.localStorage.setItem('notificationFilters', JSON.stringify([...filters]))
     const incstr = [...filters].join(',')
     router.replace( // replace is necessary as lastChecked needs to stay to avoid re-refreshes
       {
@@ -44,7 +55,7 @@ export function NotificationsFilter ({ onClose }) {
     <div>
       <h2 className='mb-2 text-start'>notifications filter</h2>
       <p className='mt-2 text-muted'>
-        filtering by:
+        filter by:
         {filters.size ? ` ${[...filters].join(', ')}` : ' all'}
       </p>
       <Form
@@ -78,7 +89,11 @@ export function NotificationsFilter ({ onClose }) {
 export default function NotificationsHeader () {
   const showModal = useShowModal()
   const router = useRouter()
-  const hasActiveFilters = router.query.inc?.length
+
+  const hasActiveFilters = useMemo(() => {
+    const incFilters = getFiltersFromInc(router.query.inc)
+    return incFilters.size > 0
+  })
 
   return (
     <div className='d-flex align-items-center gap-2'>