install lz-string package and compress & decompress data for setting or getting from local storage

package.json

@@ -25,6 +25,7 @@
     "dayjs": "^1.11.10",
     "formik": "^2.4.5",
     "jalali-moment": "^3.3.11",
+    "lz-string": "^1.5.0",
     "material-react-table": "^2.11.2",
     "next": "^14.2.3",
     "react": "^18",

src/lib/contexts/tableSetting.js

@@ -1,32 +1,52 @@
 "use client";
 import { createContext, useCallback, useEffect, useState } from "react";
+import LZString from "lz-string";
 
 export const TableSettingContext = createContext();
+
+const decompressData = (compressedData) => {
+    const decompressed = LZString.decompressFromUTF16(compressedData);
+    if (decompressed === null) {
+        localStorage.removeItem("_setting-app");
+        return null;
+    } else {
+        return JSON.parse(decompressed);
+    }
+};
+
 export const TableSettingProvider = ({ children }) => {
     const [settingStore, setSettingStore] = useState({});
 
     useEffect(() => {
-        const _localStorage = localStorage.getItem("_setting-app");
+        const compressedData = localStorage.getItem("_setting-app");
-        if (_localStorage) {
+
-            setSettingStore(JSON.parse(_localStorage));
+        const data = compressedData ? decompressData(compressedData) : null;
+        if (data) {
+            setSettingStore(data);
         }
     }, []);
 
-    const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
+    const hideAction = useCallback((user_id, page_name, table_name, settingValue) => {
         clearAction(user_id, page_name, table_name, "hides");
-        updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns);
+        updateSettingStorage(user_id, page_name, table_name, "hides", settingValue);
     }, []);
-    const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
+
-        updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue, columns);
+    const sortAction = useCallback((user_id, page_name, table_name, settingValue) => {
+        updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue);
     }, []);
-    const filterAction = (user_id, page_name, table_name, settingValue, columns) => {
+
-        updateSettingStorage(user_id, page_name, table_name, "filters", settingValue, columns);
+    const filterAction = (user_id, page_name, table_name, settingValue) => {
+        updateSettingStorage(user_id, page_name, table_name, "filters", settingValue);
     };
+
     const resetAction = (user_id, page_name, table_name) => {
-        const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
+        const compressedData = localStorage.getItem("_setting-app");
+        const prevLocalStorage = compressedData ? decompressData(compressedData) : {};
+
         const userSettings = prevLocalStorage[user_id] || {};
         const pageSettings = userSettings[page_name] || {};
         delete pageSettings[table_name];
+
         const resetData = {
             ...prevLocalStorage,
             [user_id]: {
@@ -36,20 +56,26 @@ export const TableSettingProvider = ({ children }) => {
                 },
             },
         };
-        localStorage.setItem("_setting-app", JSON.stringify(resetData));
+
+        localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(resetData)));
         setSettingStore(resetData);
     };
-    const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue, columns) => {
+
-        const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
+    const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue) => {
+        const compressedData = localStorage.getItem("_setting-app");
+        const prevLocalStorage = compressedData ? decompressData(compressedData) : {};
+
         const userSettings = prevLocalStorage[user_id] || {};
         const pageSettings = userSettings[page_name] || {};
         const tableSettings = pageSettings[table_name] || {};
+
         let newSettings;
         if (settingType === "sorts" || settingType === "filters") {
             newSettings = [...settingValue];
         } else {
             newSettings = { ...(tableSettings[settingType] || {}), ...settingValue };
         }
+
         const updatedLocalStorage = {
             ...prevLocalStorage,
             [user_id]: {
@@ -63,15 +89,19 @@ export const TableSettingProvider = ({ children }) => {
                 },
             },
         };
-        localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
+
+        localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(updatedLocalStorage)));
         setSettingStore(updatedLocalStorage);
     };
 
     const clearAction = (user_id, page_name, table_name, key) => {
-        const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
+        const compressedData = localStorage.getItem("_setting-app");
+        const prevLocalStorage = compressedData ? decompressData(compressedData) : {};
+
         const userSettings = prevLocalStorage[user_id] || {};
         const pageSettings = userSettings[page_name] || {};
         const tableSettings = pageSettings[table_name] || {};
+
         const updatedSettings = {
             ...prevLocalStorage,
             [user_id]: {
@@ -86,7 +116,7 @@ export const TableSettingProvider = ({ children }) => {
             },
         };
 
-        localStorage.setItem("_setting-app", JSON.stringify(updatedSettings));
+        localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(updatedSettings)));
         setSettingStore(updatedSettings);
     };
 
@@ -95,4 +125,4 @@ export const TableSettingProvider = ({ children }) => {
             {children}
         </TableSettingContext.Provider>
     );
-};
+};