From 78c7203c13784f0f0ee803bc2940c86a6ef2ad13 Mon Sep 17 00:00:00 2001 From: MattMcAdams Date: Wed, 21 Feb 2024 16:18:46 -0600 Subject: [PATCH] Fix infinite loading --- package-lock.json | 69 ++++++++++++++++++++++++++++++++++------ package.json | 3 +- src/app/library/page.tsx | 2 -- src/data/session.tsx | 56 +++++++++++++++++++++----------- 4 files changed, 99 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index dd5bc8b..bbf31b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,10 @@ "js-easing-functions": "^1.0.3", "next": "14.1.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "remotestoragejs": "^2.0.0-beta.6" }, "devDependencies": { - "@types/chroma-js": "^2.4.4", "@types/color": "^3.0.6", "@types/d3": "^7.4.3", "@types/node": "^20", @@ -453,12 +453,6 @@ "tslib": "^2.4.0" } }, - "node_modules/@types/chroma-js": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.4.tgz", - "integrity": "sha512-/DTccpHTaKomqussrn+ciEvfW4k6NAHzNzs/sts1TCqg333qNxOhy8TNIoQCmbGG3Tl8KdEhkGAssb1n3mTXiQ==", - "dev": true - }, "node_modules/@types/color": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz", @@ -789,6 +783,11 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", "dev": true }, + "node_modules/@types/tv4": { + "version": "1.2.33", + "resolved": "https://registry.npmjs.org/@types/tv4/-/tv4-1.2.33.tgz", + "integrity": "sha512-7phCVTXC6Bj50IV1iKOwqGkR4JONJyMbRZnKTSuujv1S/tO9rG5OdCt7BMSjytO+zJmYdn1/I4fd3SH0gtO99g==" + }, "node_modules/@typescript-eslint/parser": { "version": "6.21.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", @@ -2583,6 +2582,14 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esm": { + "version": "3.2.25", + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", + "engines": { + "node": ">=6" + } + }, "node_modules/espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -2805,7 +2812,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -4518,6 +4524,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/remotestoragejs": { + "version": "2.0.0-beta.6", + "resolved": "https://registry.npmjs.org/remotestoragejs/-/remotestoragejs-2.0.0-beta.6.tgz", + "integrity": "sha512-xGBmCPe99F4Gs/IEEzvGFjlmOkG48rRCSFz4+7xFNVs4WUJ3nzkm+fQbKelTB2HHErgOLSIyxc2dloqhI5srAQ==", + "dependencies": { + "@types/node": "16.11.59", + "@types/tv4": "^1.2.29", + "esm": "^3.2.25", + "tv4": "^1.3.0", + "webfinger.js": "^2.7.1", + "xhr2": "^0.2.1" + }, + "optionalDependencies": { + "fsevents": "^2.3.2" + } + }, + "node_modules/remotestoragejs/node_modules/@types/node": { + "version": "16.11.59", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.59.tgz", + "integrity": "sha512-6u+36Dj3aDzhfBVUf/mfmc92OEdzQ2kx2jcXGdigfl70E/neV21ZHE6UCz4MDzTRcVqGAM27fk+DLXvyDsn3Jw==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -5194,6 +5221,14 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/tv4": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/tv4/-/tv4-1.3.0.tgz", + "integrity": "sha512-afizzfpJgvPr+eDkREK4MxJ/+r8nEEHcmitwgnPUqpaP+FpwQyadnxNoSACbgc/b1LsZYtODGoPiFxQrgJgjvw==", + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5362,6 +5397,14 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/webfinger.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/webfinger.js/-/webfinger.js-2.7.1.tgz", + "integrity": "sha512-H4RokaE4RC39N3uiRTcjKMmy6yYg06lUPORQHvv8DjowZ6I5SalxUeoqHbtTN3EVBmYP/XHQ8Ow6BLEIpe2DtA==", + "dependencies": { + "xhr2": "0.2.1" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -5553,6 +5596,14 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xhr2": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.2.1.tgz", + "integrity": "sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==", + "engines": { + "node": ">= 6" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index c0919d2..d58172a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "js-easing-functions": "^1.0.3", "next": "14.1.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "remotestoragejs": "^2.0.0-beta.6" }, "devDependencies": { "@types/color": "^3.0.6", diff --git a/src/app/library/page.tsx b/src/app/library/page.tsx index 0f7f09e..91d2556 100644 --- a/src/app/library/page.tsx +++ b/src/app/library/page.tsx @@ -9,8 +9,6 @@ import LibraryConfigInput from "../../components/inputs/LibraryConfiguration"; const Library = () => { const Session = useSessionContext(); - // const check = arr.some((e) => e.name === obj.name); - return (
{Session.providerLoaded ? ( diff --git a/src/data/session.tsx b/src/data/session.tsx index d62a98c..66d11d4 100644 --- a/src/data/session.tsx +++ b/src/data/session.tsx @@ -28,9 +28,13 @@ const Provider: React.FC = ({ children }) => { ================================================================= */ const providerLoaded = true; - const [configLoaded, setConfigLoaded] = useState(defaults.configLoaded); + const [configLoaded, setConfigLoaded] = useState( + defaults.configLoaded + ); const [config, setConfig] = useState({ ...defaults.config }); - const [advColorInfo, setAdvColorInfo] = useState(defaults.advColorInfo); + const [advColorInfo, setAdvColorInfo] = useState( + defaults.advColorInfo + ); const [library, setLibrary] = useState([]); const [libraryLoaded, setLibraryLoaded] = useState(false); @@ -53,7 +57,7 @@ const Provider: React.FC = ({ children }) => { value = value.substring(0, 8); } setConfig({ ...config, keyColor: value }); - }; + } function updateConfig( key: "light" | "dark", @@ -70,7 +74,7 @@ const Provider: React.FC = ({ children }) => { } newConfig[key][property] = sanitizedValue; setConfig(newConfig); - }; + } function updateConfigEasing( key: "light" | "dark", @@ -84,7 +88,7 @@ const Provider: React.FC = ({ children }) => { } newConfig[key][`${property}Ease`] = sanitizedValue; setConfig(newConfig); - }; + } /* !SECTION Update configuration functions */ /* ================================================================= @@ -160,7 +164,7 @@ const Provider: React.FC = ({ children }) => { newConfig.light.saturationEase = CONFIG.lightSaturationEasing; } setConfig(newConfig); - }; + } const loadConfig = useCallback((configString: string) => { const CONFIG = JSON.parse(configString || "{}"); @@ -183,7 +187,7 @@ const Provider: React.FC = ({ children }) => { angleEase: defaults.config.light.angleEase, saturation: defaults.config.light.saturation, saturationEase: defaults.config.light.saturationEase, - } + }, }; if ( CONFIG.darkCount || @@ -199,8 +203,8 @@ const Provider: React.FC = ({ children }) => { CONFIG.darkSaturation || CONFIG.darkSaturationEasing || CONFIG.lightSaturation || - CONFIG.lightSaturationEasing) - { + CONFIG.lightSaturationEasing + ) { loadLegacyConfig(configString); } else { if (CONFIG.keyColor !== undefined) { @@ -266,6 +270,8 @@ const Provider: React.FC = ({ children }) => { const CONFIG = localStorage.getItem("colorToolConfig"); if (!configLoaded && CONFIG) { loadConfig(CONFIG); + } else if (!configLoaded && !CONFIG) { + setConfigLoaded(true); } }, [configLoaded, loadConfig]); @@ -274,11 +280,17 @@ const Provider: React.FC = ({ children }) => { /* SECTION Save config to local storage ================================================================= */ - const saveConfigToLocalStorage = useCallback((config: config) => { - if (configLoaded) { - localStorage.setItem("colorToolConfig", JSON.stringify(config, undefined, 4)); - } - }, [configLoaded]); + const saveConfigToLocalStorage = useCallback( + (config: config) => { + if (configLoaded) { + localStorage.setItem( + "colorToolConfig", + JSON.stringify(config, undefined, 4) + ); + } + }, + [configLoaded] + ); useEffect(() => { saveConfigToLocalStorage(config); @@ -307,11 +319,17 @@ const Provider: React.FC = ({ children }) => { /* SECTION Save Library to local storage ================================================================= */ - const saveLibraryToLocalStorage = useCallback((library: config[]) => { - if (libraryLoaded) { - localStorage.setItem("colorToolLibrary", JSON.stringify(library, undefined, 4)); - } - }, [libraryLoaded]); + const saveLibraryToLocalStorage = useCallback( + (library: config[]) => { + if (libraryLoaded) { + localStorage.setItem( + "colorToolLibrary", + JSON.stringify(library, undefined, 4) + ); + } + }, + [libraryLoaded] + ); useEffect(() => { saveLibraryToLocalStorage(library);