Cookie de theme y colorMode

Sardlimad · Nov 5, 2024 · b6d71f4 · b6d71f4
1 parent 3086b2c
commit b6d71f4
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "chart.js": "^4.4.5",
     "echarts": "^5.5.1",
     "framer-motion": "^11.11.10",
+    "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Radar } from "react-chartjs-2";
 import "chart.js/auto";
 import { FontAwesomeIcon as FA } from "@fortawesome/react-fontawesome";
@@ -16,6 +16,7 @@ import {
   Link,
   Select,
   StackDivider,
+  Switch,
   Tab,
   TabList,
   TabPanel,
@@ -29,6 +30,7 @@ import theme from "./themes/theme";
 import pinkTheme from "./themes/pinkTheme";
 import Clementine from "./themes/Clementine";
 import GreenHaze from "./themes/GreenHaze";
+import Cookies from "js-cookie";
 
 function App() {
   //Referencia al gráfico
@@ -46,6 +48,65 @@ function App() {
 
   const [currentTheme, setCurrentTheme] = useState(theme);
 
+  useEffect(() => {
+    const savedTheme = Cookies.get("theme");
+    if (savedTheme) {
+      switch (savedTheme) {
+        case "pink":
+          setCurrentTheme(pinkTheme);
+          break;
+
+        case "blue":
+          setCurrentTheme(theme);
+          break;
+
+        case "clementine":
+          setCurrentTheme(Clementine);
+          break;
+
+        case "greenhaze":
+          setCurrentTheme(GreenHaze);
+          break;
+
+        default:
+          setCurrentTheme(theme);
+          break;
+      }
+    }
+  }, [currentTheme]);
+
+  const downloadChart = () => {
+    const chart = chartRef.current;
+    if (chart) {
+      const link = document.createElement("a");
+      link.href = chart.toBase64Image();
+      link.download = "boehm-turner-star.png";
+      link.click();
+    }
+  };
+
+  const handleSetTheme = (e) => {
+    switch (e.target.value) {
+      case "pink":
+        setCurrentTheme(pinkTheme);
+        break;
+      case "blue":
+        setCurrentTheme(theme);
+        break;
+      case "clementine":
+        setCurrentTheme(Clementine);
+        break;
+      case "greenhaze":
+        setCurrentTheme(GreenHaze);
+        break;
+
+      default:
+        break;
+    }
+
+    Cookies.set("theme", e.target.value, { expires: 7 });
+  };
+
   //Etiquetas del gráfico
   const labels = [
     "Staff Experience",
@@ -101,36 +162,6 @@ function App() {
     ],
   };
 
-  const downloadChart = () => {
-    const chart = chartRef.current;
-    if (chart) {
-      const link = document.createElement("a");
-      link.href = chart.toBase64Image();
-      link.download = "boehm-turner-star.png";
-      link.click();
-    }
-  };
-
-  const handleSetTheme = (e) => {
-    switch (e.target.value) {
-      case "pink":
-        setCurrentTheme(pinkTheme);
-        break;
-      case "blue":
-        setCurrentTheme(theme);
-        break;
-      case "clementine":
-        setCurrentTheme(Clementine);
-        break;
-      case "greenhaze":
-        setCurrentTheme(GreenHaze);
-        break;
-
-      default:
-        break;
-    }
-  };
-
   return (
     <ChakraProvider theme={currentTheme}>
       <Box textAlign="center" m="15px">

diff --git a/src/components/ToggleTheme.jsx b/src/components/ToggleTheme.jsx
@@ -1,13 +1,28 @@
 import { IconButton, useColorMode } from "@chakra-ui/react";
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FA } from "@fortawesome/react-fontawesome";
+import Cookies from "js-cookie";
+import { useEffect } from "react";
 
 export const ToggleTheme = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
+  useEffect(() => {
+    const savedMode = Cookies.get('mode');
+    if (savedMode && savedMode !== colorMode) {
+      toggleColorMode();
+    }
+  }, [colorMode, toggleColorMode]);
+
+  const handleColorMode = () => {
+    toggleColorMode();
+
+    Cookies.set('mode', colorMode === 'light' ? 'dark' : 'light', { expires: 7 });
+  }
+
   return (
     <IconButton
-      onClick={toggleColorMode}
+      onClick={handleColorMode}
       icon={colorMode === "light" ? <FA icon={faMoon} color="#f1c40f" /> : <FA icon={faSun} color="#f39c12" />}
       variant="ghost"
       color="brand.500"