Update webstorage usage

NucleoidAI · Dec 25, 2023 · 0f0cd31 · 0f0cd31
1 parent 1465213
commit 0f0cd31
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/src/components/LandingDialog/LandingDialog.jsx b/src/components/LandingDialog/LandingDialog.jsx
@@ -7,7 +7,7 @@ import React from "react";
 import { Switch } from "@mui/material";
 import codeImage from "../../images/code.png";
 import onboardDispatcher from "../Onboard/onboardDispatcher";
-import { storage } from "@nucleoidjs/webstorage";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
 import styles from "./styles";
 import { useTheme } from "@mui/material/styles";
 
@@ -26,14 +26,12 @@ import {
 } from "@mui/material";
 
 const LandingDialog = () => {
-  const [darkMode, setDarkMode] = React.useState(
-    storage.get("platform,theme") === "dark"
-  );
+  const [darkMode] = useStorage("platform", "theme", "light");
 
   const handleThemeChange = (event) => {
     const newTheme = event.target.checked ? "dark" : "light";
-    setDarkMode(event.target.checked);
-    storage.set("platform,theme", newTheme);
+
+    storage.set("platform", "theme", newTheme);
   };
 
   const handleClose = () => {
@@ -112,7 +110,7 @@ const LandingDialog = () => {
         <Typography variant="body2" sx={{ marginRight: 1 }}>
           Light
         </Typography>
-        <Switch checked={darkMode} onChange={handleThemeChange} />
+        <Switch checked={darkMode === "dark"} onChange={handleThemeChange} />
         <Typography variant="body2" sx={{ marginLeft: 1 }}>
           Dark
         </Typography>

diff --git a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx b/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx
@@ -1,18 +1,15 @@
 import React from "react";
-import { storage } from "@nucleoidjs/webstorage";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
 import styles from "./styles";
 
 import { Box, Switch, TextField, Typography } from "@mui/material";
 
 const SettingsDialogRuntime = React.forwardRef((props, urlRef) => {
-  const [darkMode, setDarkMode] = React.useState(
-    storage.get("platform,theme") === "dark"
-  );
+  const [darkMode] = useStorage("platform", "theme", "light");
 
   const handleThemeChange = (event) => {
     const newTheme = event.target.checked ? "dark" : "light";
-    setDarkMode(event.target.checked);
-    storage.set("platform,theme", newTheme);
+    storage.set("platform.theme", newTheme);
   };
 
   const [url, setUrl] = React.useState(urlRef.current.url);
@@ -143,7 +140,7 @@ const SettingsDialogRuntime = React.forwardRef((props, urlRef) => {
       </Section>
       <Section title={"Theme"}>
         <BetweenComponents title={"Dark Mode"}>
-          <Switch checked={darkMode} onChange={handleThemeChange} />
+          <Switch checked={darkMode === "dark"} onChange={handleThemeChange} />
         </BetweenComponents>
       </Section>
     </Box>