early localStorage implementation

Author: Soxasora

components/notifications-filter.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo, useEffect } from 'react'
 import { useShowModal } from './modal'
 import { useRouter } from 'next/router'
 import { NOTIFICATION_CATEGORIES } from '../lib/constants'
@@ -9,9 +9,18 @@ import styles from './notifications-filter.module.css'
 export function NotificationsFilter ({ onClose }) {
   const router = useRouter()
 
+  // TODO cleaner
   const appliedFilters = useMemo(() => {
-    const filters = new Set(router.query.inc?.split(',') || []) // get filters from URL
+    let filters = new Set(router.query.inc?.split(',') || []) // get filters from URL
     filters.delete('') // avoid empty category
+
+    if (filters.size === 0) {
+      const savedFilters = JSON.parse(window.localStorage.getItem('notificationFilters'))
+      if (savedFilters) {
+        filters = new Set(savedFilters)
+      }
+    }
+
     return filters
   }, [router.query.inc])
 
@@ -26,6 +35,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
       {
@@ -78,7 +88,13 @@ export function NotificationsFilter ({ onClose }) {
 export default function NotificationsHeader () {
   const showModal = useShowModal()
   const router = useRouter()
-  const hasActiveFilters = router.query.inc?.length
+
+  const [hasActiveFilters, setActiveFilters] = useState(false)
+
+  // TODO: memoize
+  useEffect(() => {
+    setActiveFilters(router.query.inc?.length || JSON.parse(window.localStorage.getItem('notificationFilters'))?.length)
+  }, [router.query.inc])
 
   return (
     <div className='d-flex align-items-center gap-2'>