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

This commit is contained in:
2024-08-10 14:13:45 +03:30
parent d630ab7722
commit c0a48ac7bf
2 changed files with 48 additions and 17 deletions

View File

@@ -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",

View File

@@ -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");
if (_localStorage) {
setSettingStore(JSON.parse(_localStorage));
const compressedData = localStorage.getItem("_setting-app");
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>
);
};
};