From e34c6efc0ba7257a3c36a4142981354c20d607d7 Mon Sep 17 00:00:00 2001
From: zee-bit <equbalzeeshan@gmail.com>
Date: Sun, 30 Aug 2020 11:23:02 +0530
Subject: [PATCH] Added Theme Provider to contain the theme context

---
 src/components/Header.js        | 22 +++++++++++++++++++++-
 src/components/ThemeProvider.js | 20 ++++++++++++++++++++
 src/index.js                    | 11 +++++++----
 3 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ThemeProvider.js

diff --git a/src/components/Header.js b/src/components/Header.js
index 995ab5d20..2b02617e3 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,22 +1,32 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   AppBar,
   Toolbar,
   Typography,
   makeStyles,
   Link,
+  IconButton
 } from "@material-ui/core";
 import { HeadsetTwoTone } from "@material-ui/icons";
+import Brightness3Icon from '@material-ui/icons/Brightness3';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
+import {GlobalThemeContext} from "./ThemeProvider";
 // Got access to theme as well
 const useStyles = makeStyles((theme) => ({
   heading: {
     marginLeft: theme.spacing(2),
   },
+  themeIcon: {
+    position: 'absolute',
+    right: 30,
+  }
 }));
 
 function Header() {
   //Styles can be used as hooks.
   const classes = useStyles();
+  //const [Theme, setTheme] = React.useState('dark')
+  const {GlobalTheme, setGlobalTheme} = useContext(GlobalThemeContext)
 
   return (
     <AppBar color="secondary" position="fixed">
@@ -33,6 +43,16 @@ function Header() {
             A-POP
           </Link>
         </Typography>
+        <div className={classes.themeIcon}>
+          {/* {Theme === 'dark' ? 
+          <Brightness7Icon type="button" onClick={() => setTheme('light')} /> :
+          <Brightness3Icon type="button" onClick={() => setTheme('dark')} />} */}
+          <IconButton>
+            {GlobalTheme === 'dark' ? 
+            <Brightness7Icon onClick={() => setGlobalTheme('light')} /> :
+            <Brightness3Icon onClick={() => setGlobalTheme('dark')} />}
+          </IconButton>
+        </div>
       </Toolbar>
     </AppBar>
   );
diff --git a/src/components/ThemeProvider.js b/src/components/ThemeProvider.js
new file mode 100644
index 000000000..615305317
--- /dev/null
+++ b/src/components/ThemeProvider.js
@@ -0,0 +1,20 @@
+import React, { useState, createContext, useMemo } from 'react'
+
+export const GlobalThemeContext = createContext()
+
+const GlobalThemeContextProvider = (props) => {
+  const [GlobalTheme, setGlobalTheme] = useState('dark')
+
+  const value = useMemo(() => ({
+    GlobalTheme,
+    setGlobalTheme
+  }), [GlobalTheme])
+
+  return (
+    <GlobalThemeContext.Provider value={value}>
+        {props.children}
+    </GlobalThemeContext.Provider>
+  )
+}
+
+export default GlobalThemeContextProvider
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index dfc4eca66..52319c436 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import { MuiThemeProvider, CssBaseline } from "@material-ui/core";
+import GlobalThemeContextProvider from "./components/ThemeProvider";
 import theme from "./theme";
 import { ApolloProvider } from "@apollo/react-hooks";
 import client from "./graphql/client";
@@ -9,10 +10,12 @@ import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <MuiThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </MuiThemeProvider>
+    <GlobalThemeContextProvider>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        <App />
+      </MuiThemeProvider>
+    </GlobalThemeContextProvider>
   </ApolloProvider>,
   document.getElementById("root")
 );