Video-11-Create-Application-Context

Megamigi · Jul 3, 2021 · 1d92857 · 1d92857
1 parent 2500324
commit 1d92857
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 4 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["eslint:recommended","next", "next/core-web-vitals"]
 }
diff --git a/README.md b/README.md
@@ -43,3 +43,8 @@ Build ECommerce Website Like Amazon by Next.js
     2.  use theme provider
     3.  add h1 and h2 styles
     4.  set theme colors
+11. Create Application Context
+    1.  define context and reducer
+    2.  set darkMode flag
+    3.  create store provider
+    4.  use it on layout
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Head from 'next/head';
 import NextLink from 'next/link';
 import {
@@ -10,10 +10,15 @@ import {
   createMuiTheme,
   ThemeProvider,
   CssBaseline,
+  Switch,
 } from '@material-ui/core';
 import useStyles from '../utils/styles';
+import { Store } from '../utils/Store';
+import Cookies from 'js-cookie';
 
 export default function Layout({ title, description, children }) {
+  const { state, dispatch } = useContext(Store);
+  const { darkMode } = state;
   const theme = createMuiTheme({
     typography: {
       h1: {
@@ -28,7 +33,7 @@ export default function Layout({ title, description, children }) {
       },
     },
     palette: {
-      type: 'light',
+      type: darkMode ? 'dark' : 'light',
       primary: {
         main: '#f0c000',
       },
@@ -38,6 +43,11 @@ export default function Layout({ title, description, children }) {
     },
   });
   const classes = useStyles();
+  const darkModeChangeHandler = () => {
+    dispatch({ type: darkMode ? 'DARK_MODE_OFF' : 'DARK_MODE_ON' });
+    const newDarkMode = !darkMode;
+    Cookies.set('darkMode', newDarkMode ? 'ON' : 'OFF');
+  };
   return (
     <div>
       <Head>
@@ -55,6 +65,10 @@ export default function Layout({ title, description, children }) {
             </NextLink>
             <div className={classes.grow}></div>
             <div>
+              <Switch
+                checked={darkMode}
+                onChange={darkModeChangeHandler}
+              ></Switch>
               <NextLink href="/cart" passHref>
                 <Link>Cart</Link>
               </NextLink>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.4",
+    "js-cookie": "^2.2.1",
     "next": "11.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import '../styles/globals.css';
+import { StoreProvider } from '../utils/Store';
 
 function MyApp({ Component, pageProps }) {
   useEffect(() => {
@@ -8,7 +9,11 @@ function MyApp({ Component, pageProps }) {
       jssStyles.parentElement.removeChild(jssStyles);
     }
   }, []);
-  return <Component {...pageProps} />;
+  return (
+    <StoreProvider>
+      <Component {...pageProps} />
+    </StoreProvider>
+  );
 }
 
 export default MyApp;
diff --git a/utils/Store.js b/utils/Store.js
@@ -0,0 +1,24 @@
+import Cookies from 'js-cookie';
+import { createContext, useReducer } from 'react';
+
+export const Store = createContext();
+const initialState = {
+  darkMode: Cookies.get('darkMode') === 'ON' ? true : false,
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'DARK_MODE_ON':
+      return { ...state, darkMode: true };
+    case 'DARK_MODE_OFF':
+      return { ...state, darkMode: false };
+    default:
+      return state;
+  }
+}
+
+export function StoreProvider(props) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const value = { state, dispatch };
+  return <Store.Provider value={value}>{props.children}</Store.Provider>;
+}