install lz-string package and compress & decompress data for setting or getting from local storage
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user