@campxdev/shared 1.5.3 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/FilterComponents/FilterButton.tsx

@@ -1,5 +1,6 @@
 import { Tune } from '@mui/icons-material'
 import { Box, styled } from '@mui/material'
+import { useEffect, useState } from 'react'
 
 const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
   ({ theme, size }) => ({
@@ -37,14 +38,15 @@ export default function FilterButton({
   ...props
 }: {
   onClick: (e: any) => void
-  filtersApplied?: boolean
   size?: 'regular' | 'large'
+  filtersApplied?: any
 }) {
   const handleClick = (e) => {
     e.stopPropagation()
     if (!onClick) return
     onClick(e)
   }
+
   return (
     <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
       {filtersApplied && <StyledNotify />}

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { default as useFetch } from './useFetch'
 export * from './useRouter'
 export { default as useAuth } from './useAuth'
+export { default as useFilter } from './useFilters'

package/src/hooks/useFilters.ts

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+
+export default function useFilters(initialState, key) {
+  const [filters, setFilters] = useState(initialState)
+  const [filtersApplied, setFiltersApplied] = useState(false)
+
+  function onFilterChange(modified) {
+    setFilters({
+      ...filters,
+      ...modified,
+    })
+
+    const sessionData = Object.keys(modified).reduce((acc, curr) => {
+      if (!!modified[curr]) {
+        acc.push({ key: curr, value: modified[curr] })
+      }
+      return acc
+    }, [])
+
+    if (sessionData?.length > 0) {
+      sessionStorage.setItem(key, JSON.stringify(sessionData))
+      setFiltersApplied(true)
+    } else {
+      sessionStorage.removeItem(key)
+      setFiltersApplied(false)
+    }
+  }
+
+  function clearFilters() {
+    setFilters(initialState)
+    setFiltersApplied(false)
+    sessionStorage.removeItem(key)
+  }
+
+  useEffect(() => {
+    const prevFilters = getSessionFilters()
+    setFilters({
+      ...filters,
+      ...prevFilters,
+    })
+  }, [])
+
+  const getSessionFilters = () => {
+    try {
+      if (sessionStorage.getItem(key)) {
+        setFiltersApplied(true)
+        const parsed = JSON.parse(sessionStorage.getItem(key))
+        const filters = parsed?.reduce(
+          (acc, curr) => ({ ...acc, [curr.key]: curr.value }),
+          {},
+        )
+        return filters
+      }
+    } catch (error) {}
+  }
+
+  return {
+    filters,
+    onFilterChange,
+    clearFilters,
+    filtersApplied,
+  }
+}