From 1d9285718e450486ae519d67bbc5965ce128274c Mon Sep 17 00:00:00 2001 From: Basir Date: Sat, 3 Jul 2021 21:31:13 +0430 Subject: [PATCH] Video-11-Create-Application-Context --- .eslintrc | 2 +- README.md | 5 +++++ components/Layout.js | 18 ++++++++++++++++-- package-lock.json | 11 +++++++++++ package.json | 1 + pages/_app.js | 7 ++++++- utils/Store.js | 24 ++++++++++++++++++++++++ 7 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 utils/Store.js diff --git a/.eslintrc b/.eslintrc index 97a2bb8..33f55ef 100644 --- 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 index c296ca3..3404a0f 100644 --- 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 index ef20585..a2164f8 100644 --- 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 (
@@ -55,6 +65,10 @@ export default function Layout({ title, description, children }) {
+ Cart diff --git a/package-lock.json b/package-lock.json index ea43cad..d0b2d45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "version": "0.1.0", "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" @@ -3110,6 +3111,11 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -7857,6 +7863,11 @@ } } }, + "js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/package.json b/package.json index b684636..dfeb00f 100644 --- 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 index 7052e09..021cb05 100644 --- 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 ; + return ( + + + + ); } export default MyApp; diff --git a/utils/Store.js b/utils/Store.js new file mode 100644 index 0000000..2fc6283 --- /dev/null +++ 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 {props.children}; +}