From 22336e1f315cc10fd49c30245488424b51bc5459 Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Tue, 15 Aug 2023 21:46:05 +0200
Subject: [PATCH] Add ThemeProvider.

---
 src/Pages/BasicPage.js |  7 +++----
 src/ThemeContext.js    | 20 ++++++++++++++++++++
 src/UI/Footer.js       | 15 ++++-----------
 src/UI/Navigation.js   | 17 +++++------------
 src/index.js           |  5 ++++-
 5 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/ThemeContext.js

diff --git a/src/Pages/BasicPage.js b/src/Pages/BasicPage.js
index 8991085..c604791 100644
--- a/src/Pages/BasicPage.js
+++ b/src/Pages/BasicPage.js
@@ -1,17 +1,16 @@
 import React, {useState, useEffect} from 'react';
 import parse from 'html-react-parser'
+import { useTheme } from '../ThemeContext';
 
 // import ScrollSpy from '../UI/ScrollSpy';
 
 const BasicPage = (props) => {
-  const [theme, setTheme] = useState(
-    localStorage.getItem('theme') || 'light'
-  );
-
     const [error, setError] = useState(null);
     const [isLoaded, setIsLoaded] = useState(false);
     const [items, setItems] = useState([]);
 
+    const { theme } = useTheme();
+
     useEffect(() => {
         fetch("http://localhost:5218/page/" + props.id)
           .then(res => res.json())
diff --git a/src/ThemeContext.js b/src/ThemeContext.js
new file mode 100644
index 0000000..e5d1e8d
--- /dev/null
+++ b/src/ThemeContext.js
@@ -0,0 +1,20 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(
+    localStorage.getItem('theme') || 'dark'
+    // document.body.className = theme;
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
diff --git a/src/UI/Footer.js b/src/UI/Footer.js
index fa482f7..49f263b 100644
--- a/src/UI/Footer.js
+++ b/src/UI/Footer.js
@@ -1,17 +1,10 @@
-import React, {useEffect, useState} from 'react';
-
+import React from 'react';
+import { useTheme } from '../ThemeContext';
 import './Footer.css';
 
 
-const Footer = (props) => {
-    const [theme, setTheme] = useState(
-        localStorage.getItem('theme') || 'light'
-    );
-
-    useEffect(() => {
-        localStorage.setItem('theme', theme);
-        document.body.className = theme;
-      }, [theme]);
+const Footer = () => {
+    const { theme } = useTheme();
 
     return (
         <footer className={`bg-${theme} text-center text-lg-start text-${theme}`}>
diff --git a/src/UI/Navigation.js b/src/UI/Navigation.js
index 4523a5b..e1fc101 100644
--- a/src/UI/Navigation.js
+++ b/src/UI/Navigation.js
@@ -1,5 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 import {Link} from 'react-router-dom';
+import { useTheme } from '../ThemeContext';
 
 import './Navigation.css';
 
@@ -8,16 +9,7 @@ let section = window.location.pathname.split('/')[2];
 let chapter = window.location.pathname.split('/')[3];
 
 const Navigation = () => {
-    const [theme, setTheme] = useState(
-        localStorage.getItem('theme') || 'dark'
-      );
-
-    useEffect(() => {
-        localStorage.setItem('theme', theme);
-        document.body.className = theme;
-      }, [theme]);
-
-
+    const { theme, setTheme } = useTheme();
 
     const toggleTheme = () => {
         setTheme((theme === 'light') ? 'dark' : 'light');
@@ -60,7 +52,8 @@ const Navigation = () => {
                     </li>
                     }
                 </ul>
-                <button style={{display: 'none'}} onClick={toggleTheme} type="button" className={`btn btn-${theme}`}>Toggle Theme</button>
+                {/* style={{display: 'none'}}  */}
+                <button  onClick={toggleTheme} type="button" className={`btn btn-${theme}`}>Toggle Theme</button>
                 {/* <form className="d-flex" role="search">
                     <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
                     <button className="btn btn-outline-success" type="submit">Search</button>
diff --git a/src/index.js b/src/index.js
index d563c0f..430f203 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ThemeProvider } from './ThemeContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );