From 3244b5dd63364c62eca5622123429e4e974d3ffd Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Fri, 22 Jul 2022 01:20:46 +0800
Subject: [PATCH] =?UTF-8?q?fe-21=20=E4=BD=BF=E7=94=A8context=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/context/ContextProvider.js | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 lazy-timer-fe/src/context/ContextProvider.js

diff --git a/lazy-timer-fe/src/context/ContextProvider.js b/lazy-timer-fe/src/context/ContextProvider.js
new file mode 100644
index 0000000..019298b
--- /dev/null
+++ b/lazy-timer-fe/src/context/ContextProvider.js
@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const StateContext = createContext();
+
+const initialState = {
+  chat: false,
+  cart: false,
+  userProfile: false,
+  notification: false,
+};
+
+export const ContextProvider = ({ children }) => {
+  const [screenSize, setScreenSize] = useState(undefined);
+  const [currentColor, setCurrentColor] = useState('#03C9D7');
+  const [currentMode, setCurrentMode] = useState('Light');
+  const [themeSettings, setThemeSettings] = useState(false);
+  const [activeMenu, setActiveMenu] = useState(true);
+  const [isClicked, setIsClicked] = useState(initialState);
+
+  const setMode = (e) => {
+    setCurrentMode(e.target.value);
+    localStorage.setItem('themeMode', e.target.value);
+  };
+
+  const setColor = (color) => {
+    setCurrentColor(color);
+    localStorage.setItem('colorMode', color);
+  };
+
+  const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true });
+
+  return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <StateContext.Provider value={{ currentColor, currentMode, activeMenu, screenSize, setScreenSize, handleClick, isClicked, initialState, setIsClicked, setActiveMenu, setCurrentColor, setCurrentMode, setMode, setColor, themeSettings, setThemeSettings }}>
+      {children}
+    </StateContext.Provider>
+  );
+};
+
+export const useStateContext = () => useContext(StateContext);