Make the options persistent

NextJS_web_GUI/components/_app.js

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import Head from "next/head";
 import { setGlobalState, useGlobalState } from '../hooks/globalState';
+import { useLocalStorage } from 'usehooks-ts'
 // import CssBaseline from "@mui/material/CssBaseline";
 import NavBar from "../components/NavBar";
 
@@ -12,9 +13,9 @@ function MyAppTwo({ prp, prp2, setRootLoading }) {
   const [isLoadingWait, setLoadingWait] = useState(true);
   const [alternatingSnowflakeSpeed, setAlternatingSnowflakeSpeed] = useState(0);
   const [isNotDesktop] = useGlobalState("outputOptionsHaveAcordicon");
-  const [enableSnowBG] = useGlobalState("enableSnowBG")
+  const [enableSnowBG, setEnableSnowBG] = useLocalStorage("enableSnowBG", true)
+  const [enableAnimations, setEnableAnimations] = useLocalStorage("enableAnimations", true)
   const [darkMode] = useGlobalState("darkMode");
-  const [enableAnimations] = useGlobalState("enableAnimations");
 
   useEffect(() => {
     // setTimeout(() => {

NextJS_web_GUI/components/input/outputOptions.js

@@ -1,5 +1,6 @@
 import { React, Component, useState, useEffect, useRef, createRef } from "react";
 import { setGlobalState, useGlobalState } from '../../hooks/globalState';
+import { useLocalStorage } from 'usehooks-ts'
 
 import TextIncreaseIcon from '@mui/icons-material/TextIncrease';
 import TextDecreaseIcon from '@mui/icons-material/TextDecrease';
@@ -23,8 +24,8 @@ const OutputOptions = (props) => {
     const [answer] = useGlobalState("answer")
     const [copiedOpen, setCopiedOpen] = useState(false)
     const [outputTextSize] = useGlobalState("outputTextSize")
-    const [enableSnowBG] = useGlobalState("enableSnowBG")
-    const [enableAnimations] = useGlobalState("enableAnimations")
+    const [enableSnowBG, setEnableSnowBG] = useLocalStorage("enableSnowBG", true)
+    const [enableAnimations, setEnableAnimations] = useLocalStorage("enableAnimations", true)
 
     function handleMakefntsizeBiggerSmaller(offset) {
         const newVal = outputTextSize + offset
@@ -101,7 +102,7 @@ const OutputOptions = (props) => {
                 marginTop: outputOptionsHaveAcordicon ? "0.2rem" : "revert",
             }}
         >
-            <FormControlLabel control={<Checkbox checked={enableSnowBG} onChange={() => { setGlobalState("enableSnowBG", !enableSnowBG) }} />} label="Enable cool background" />
+            <FormControlLabel control={<Checkbox checked={enableSnowBG} onChange={() => { setEnableSnowBG(!enableSnowBG) }} />} label="Enable cool background" />
         </Box>
         <Box
             sx={{
@@ -126,7 +127,7 @@ const OutputOptions = (props) => {
                 marginTop: outputOptionsHaveAcordicon ? "0.2rem" : "revert",
             }}
         >
-            <FormControlLabel control={<Checkbox checked={enableAnimations} onChange={() => { setGlobalState("enableAnimations", !enableAnimations) }} />} label="Enable animations" />
+            <FormControlLabel control={<Checkbox checked={enableAnimations} onChange={() => { setEnableAnimations(!enableAnimations) }} />} label="Enable animations" />
         </Box>
 
         <Snackbar open={copiedOpen} autoHideDuration={1500} onClose={() => { setCopiedOpen(false) }}>

NextJS_web_GUI/hooks/globalState.js

@@ -1,5 +1,3 @@
-//TODO: add https://medium.com/ringcentral-developers/use-react-hooks-with-storage-as-global-state-management-f2945492aade
-
 import { createGlobalState } from 'react-hooks-global-state';
 
 const { setGlobalState, useGlobalState } = createGlobalState({
@@ -17,9 +15,9 @@ const { setGlobalState, useGlobalState } = createGlobalState({
     inpError: [false, "", true],
     outputTextSize: 875,
     outputOptionsHaveAcordicon: false,
-    enableSnowBG: true,
+    // enableSnowBG: true,
+    // enableAnimations: true,
     darkMode: true,
-    enableAnimations: true,
     notSupportedOpen: false,
 });
 export { useGlobalState, setGlobalState };

NextJS_web_GUI/package.json

@@ -37,7 +37,7 @@
     "react-shadowed-double-scrollbar": "^1.0.5",
     "react-spinners-kit": "^1.9.1",
     "styled-components": "^5.3.6",
-    "use-global-storage": "^0.1.0",
+    "usehooks-ts": "^2.9.1",
     "webpack": "^5.74.0"
   },
   "devDependencies": {

NextJS_web_GUI/yarn.lock

@@ -2325,11 +2325,6 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
-immediate@~3.0.5:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
-  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
-
 immutable@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@@ -2600,13 +2595,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lie@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
-  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
-  dependencies:
-    immediate "~3.0.5"
-
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -2626,13 +2614,6 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-localforage@^1.7.3:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
-  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
-  dependencies:
-    lie "3.1.1"
-
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
@@ -3220,29 +3201,13 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rt-storage@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/rt-storage/-/rt-storage-0.1.0.tgz#6a06248e113033525215466f029df78e8985ccdf"
-  integrity sha512-wHZtxiH3M1xIGmRuZbs3wlA98pRPAjg5ouGB+OhKiVQ70utPq2gahmTpkei+T+ZUQ9uEimphKR5X4NegzSMWpg==
-  dependencies:
-    localforage "^1.7.3"
-    rxjs "^6.4.0"
-    uuid "^3.3.3"
-
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
     queue-microtask "^1.2.2"
 
-rxjs@^6.4.0:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
-  dependencies:
-    tslib "^1.9.0"
-
 safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -3570,7 +3535,7 @@ tslib@2.4.0, tslib@^2.3.1, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -3619,22 +3584,15 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-global-storage@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/use-global-storage/-/use-global-storage-0.1.0.tgz#e6aa4b73c84a883fc5ec274e9ee81c7aac169ce5"
-  integrity sha512-IgYjKVQFwyqTfehrXy26lquY3WXvGZQcHCkk1JrOp+PF7ZPrhMd75bosbsTZYUanKGFeobB7t8LEaA4QVGUJZg==
-  dependencies:
-    rt-storage "^0.1.0"
-
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-uuid@^3.3.3:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+usehooks-ts@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
+  integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
 
 watchpack@^2.0.0, watchpack@^2.4.0:
   version "2.4.0"