@seliseblocks/next-filters/hooks/use-filter-state.ts

Next.js Generic Packages for Filters

import { useState } from 'react';

import { IActiveFilter, IUseFilterStateProps } from '../types';

/**
 * @description {useFilterState} - Custom hook for managing filter state.
 * @param {string} featureName - The options for the hook.
 * @returns {Object} - An object containing the filter state and related functions.
 */
export const useFilterState = ({ featureName }: IUseFilterStateProps) => {
  const savedActiveFilters = (): IActiveFilter[] => {
    const activeFiltersSaved = localStorage.getItem(`activeFilters-${featureName}`);
    if (activeFiltersSaved) {
      return JSON.parse(activeFiltersSaved);
    }
    return [];
  };

  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
  const [activeFilters, setActiveFilters] = useState<IActiveFilter[]>(savedActiveFilters);

  const handleSidebarToggle = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  const handleActiveFilters = (newActiveFilters: IActiveFilter[]) => {
    setActiveFilters(newActiveFilters);

    localStorage.setItem(`activeFilters-${featureName}`, JSON.stringify(newActiveFilters));
  };

  return {
    isSidebarOpen,
    handleSidebarToggle,
    activeFilters,
    handleActiveFilters,
  };
};