complete sorting and filtering datatable and working with local storage for caching data

src/lib/contexts/DataTable.jsx

@@ -1,30 +1,110 @@
-import {createContext, useEffect, useState} from "react";
-import {toast} from "react-toastify";
+import { createContext, useEffect, useState } from "react";
+import { toast } from "react-toastify";
 import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
 
 export const DataTableContext = createContext();
 
-const DataTableProvider = ({children}) => {
+const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => {
+    const { settingStore } = useTableSetting();
+    const [isInitStates, setInitStates] = useState(false);
+    const flatColumns = flattenArrayOfObjects(columns, "columns");
+    const [initFilter, setInitFilter] = useState({});
+    const [initSort, setInitSort] = useState([]);
     const [filterData, setFilterData] = useState({});
     const [sortData, setSortData] = useState([]);
 
     useEffect(() => {
-        toast(<AskForKeepData filterData={filterData} sortData={sortData} user_id={user_id} page_name={page_name}
-                              table_name={table_name}
-                              columns={columns}/>, {
-            containerId: "datatable",
-            className: "filter-toast",
-            position: "bottom-left",
-            draggable: true,
-            autoClose: false,
-        });
+        if (!settingStore) return;
+        const values = flatColumns.reduce((acc, column) => {
+            if (!column.enableColumnFilter) return acc;
+            const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find(
+                (filter) => filter.id === column.id
+            );
+            if (column.datatype === "array") {
+                acc[column.id] = {
+                    id: column.id,
+                    value: filter?.value || [],
+                    filterFn: filter?.filterFn || column._filterFn,
+                    datatype: column.datatype,
+                };
+            } else if (column._filterFn === "between") {
+                acc[column.id] = {
+                    id: column.id,
+                    value: filter?.value || ["", ""],
+                    filterFn: filter?.filterFn || column._filterFn,
+                    datatype: column.datatype,
+                };
+            } else {
+                acc[column.id] = {
+                    id: column.id,
+                    value: filter?.value || "",
+                    filterFn: filter?.filterFn || column._filterFn,
+                    datatype: column.datatype,
+                };
+            }
+            return acc;
+        }, {});
+        setFilterData(values);
+        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+        setInitFilter(values);
+        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+        setInitStates(true);
+    }, [settingStore, isInitStates]);
+
+    useEffect(() => {
+        if (
+            JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
+            JSON.stringify(initSort) !== JSON.stringify(sortData)
+        ) {
+            if (!toast.isActive("keep_data", "datatable")) {
+                toast(
+                    <AskForKeepData
+                        filterData={filterData}
+                        sortData={sortData}
+                        user_id={user_id}
+                        page_name={page_name}
+                        table_name={table_name}
+                        columns={flatColumns}
+                    />,
+                    {
+                        containerId: "datatable",
+                        toastId: "keep_data",
+                        className: "filter-toast",
+                        position: "bottom-left",
+                        draggable: true,
+                        autoClose: false,
+                    }
+                );
+            } else {
+                toast.update("keep_data", {
+                    containerId: "datatable",
+                    toastId: "keep_data",
+                    render: (
+                        <AskForKeepData
+                            filterData={filterData}
+                            sortData={sortData}
+                            user_id={user_id}
+                            page_name={page_name}
+                            table_name={table_name}
+                            columns={flatColumns}
+                        />
+                    ),
+                });
+            }
+        } else {
+            toast.dismiss({ containerId: "datatable" });
+        }
     }, [filterData, sortData]);
 
+    if (!isInitStates) return null;
+
     return (
-        <DataTableContext.Provider value={{filterData, setFilterData, sortData, setSortData}}>
+        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
             {children}
         </DataTableContext.Provider>
     );
 };
 
-export default DataTableProvider;
+export default DataTableProvider;

src/lib/contexts/tableSetting.jsx

@@ -1,26 +1,26 @@
-'use client'
-import {createContext, useCallback, useEffect, useState} from "react";
+"use client";
+import { createContext, useCallback, useEffect, useState } from "react";
 
 export const TableSettingContext = createContext();
-export const TableSettingProvider = ({children}) => {
+export const TableSettingProvider = ({ children }) => {
     const [settingStore, setSettingStore] = useState({});
 
     useEffect(() => {
-        const _localStorage = localStorage.getItem("_setting-app")
+        const _localStorage = localStorage.getItem("_setting-app");
         if (_localStorage) {
-            setSettingStore(JSON.parse(_localStorage))
+            setSettingStore(JSON.parse(_localStorage));
         }
     }, []);
 
     const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
         updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns);
-    }, [])
+    }, []);
     const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
         updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue, columns);
-    }, [])
+    }, []);
     const filterAction = (user_id, page_name, table_name, settingValue, columns) => {
         updateSettingStorage(user_id, page_name, table_name, "filters", settingValue, columns);
-    }
+    };
     const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue, columns) => {
         const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
         const userSettings = prevLocalStorage[user_id] || {};
@@ -30,7 +30,7 @@ export const TableSettingProvider = ({children}) => {
         if (settingType === "sorts" || settingType === "filters") {
             newSettings = [...settingValue];
         } else {
-            newSettings = {...tableSettings[settingType] || {}, ...settingValue};
+            newSettings = { ...(tableSettings[settingType] || {}), ...settingValue };
         }
         const updatedLocalStorage = {
             ...prevLocalStorage,
@@ -40,18 +40,21 @@ export const TableSettingProvider = ({children}) => {
                     ...pageSettings,
                     [table_name]: {
                         ...tableSettings,
-                        [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
-                        summary: SummaryTextMessage({
-                            ...tableSettings,
-                            [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
-                        }, columns)
+                        [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
+                        summary: SummaryTextMessage(
+                            {
+                                ...tableSettings,
+                                [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
+                            },
+                            columns
+                        ),
                     },
                 },
             },
         };
         localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
         setSettingStore(updatedLocalStorage);
-    }
+    };
     const refactorAction = (user_id, page_name, table_name) => {
         const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
         const userSettings = prevLocalStorage[user_id] || {};
@@ -68,7 +71,7 @@ export const TableSettingProvider = ({children}) => {
         };
         localStorage.setItem("_setting-app", JSON.stringify(refactorData));
         setSettingStore(refactorData);
-    }
+    };
     const SummaryTextMessage = (values, columns) => {
         let SummaryText = "";
         let HideText = "";
@@ -76,38 +79,32 @@ export const TableSettingProvider = ({children}) => {
         let SortText = "";
 
         if (values.sorts && values.sorts.length > 0) {
-            const _list = []
+            const _list = [];
             for (const sort of values.sorts) {
-                const _column = columns.find(column => column.id == sort.id)
-                if (_column)
-                    _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`)
+                const _column = columns.find((column) => column.id == sort.id);
+                if (_column) _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`);
             }
-            if (_list.length > 0)
-                SortText = " مرتب شده بر اساس : " + _list.join(", ")
+            if (_list.length > 0) SortText = " مرتب شده بر اساس : " + _list.join(", ");
         }
         if (values.filters && values.filters.length > 0) {
-            const _list = []
+            const _list = [];
             for (const filter of values.filters) {
-                const _column = columns.find(column => column.id == filter.id)
-                if (_column)
-                    _list.push(`${_column.header}`)
+                const _column = columns.find((column) => column.id == filter.id);
+                if (_column) _list.push(`${_column.header}`);
             }
-            if (_list.length > 0)
-                FilterText = " فیلتر شده بر اساس : " + _list.join(", ")
+            if (_list.length > 0) FilterText = " فیلتر شده بر اساس : " + _list.join(", ");
         }
 
         if (values.hides) {
-            const hidesArray = Object.entries(values.hides).map((e) => ({id: e[0], value: e[1]}))
+            const hidesArray = Object.entries(values.hides).map((e) => ({ id: e[0], value: e[1] }));
             if (hidesArray.length > 0) {
-                const _list = []
+                const _list = [];
                 for (const hide of hidesArray) {
-                    if (hide.value) continue
-                    const _column = columns.find(c => c.id == hide.id)
-                    if (_column)
-                        _list.push(_column.header)
+                    if (hide.value) continue;
+                    const _column = columns.find((c) => c.id == hide.id);
+                    if (_column) _list.push(_column.header);
                 }
-                if (_list.length > 0)
-                    HideText = "ستون های مخفی شده : " + _list.join(", ");
+                if (_list.length > 0) HideText = "ستون های مخفی شده : " + _list.join(", ");
             }
         }
 
@@ -128,7 +125,7 @@ export const TableSettingProvider = ({children}) => {
                 }
             }
             if (FilterText) {
-                SummaryText += FilterText
+                SummaryText += FilterText;
             }
         }
 
@@ -136,9 +133,8 @@ export const TableSettingProvider = ({children}) => {
     };
 
     return (
-        <TableSettingContext.Provider
-            value={{settingStore, hideAction, sortAction, filterAction, refactorAction}}>
+        <TableSettingContext.Provider value={{ settingStore, hideAction, sortAction, filterAction, refactorAction }}>
             {children}
         </TableSettingContext.Provider>
     );
-};
+};

src/lib/hooks/useDataTable.jsx

@@ -1,9 +1,9 @@
-import {useContext} from "react";
-import {DataTableContext} from "@/lib/contexts/DataTable";
+import { useContext } from "react";
+import { DataTableContext } from "@/lib/contexts/DataTable";
 
 const useTableSetting = () => {
-    const {filterData, setFilterData, sortData, setSortData} = useContext(DataTableContext);
-    return {filterData, setFilterData, sortData, setSortData};
+    const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext);
+    return { filterData, setFilterData, sortData, setSortData };
 };
 
 export default useTableSetting;

src/lib/hooks/useTableSetting.jsx

@@ -1,10 +1,9 @@
-import {useContext} from "react";
-import {TableSettingContext} from "../contexts/tableSetting";
+import { useContext } from "react";
+import { TableSettingContext } from "../contexts/tableSetting";
 
 const useTableSetting = () => {
-    const {settingStore, hideAction, sortAction, filterAction, refactorAction} =
-        useContext(TableSettingContext);
-    return {settingStore, hideAction, sortAction, filterAction, refactorAction};
+    const { settingStore, hideAction, sortAction, filterAction, refactorAction } = useContext(TableSettingContext);
+    return { settingStore, hideAction, sortAction, filterAction, refactorAction };
 };
 
 export default useTableSetting;