added theme to redux (#2)

package.json

@@ -6,9 +6,11 @@
     "start": "next start"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.7.2",
     "next": "latest",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6"
   },
   "devDependencies": {
     "@types/node": "17.0.4",

src/components/Layout/NavigationBar.tsx

@@ -3,10 +3,13 @@ import Link from "next/link";
 export default function Navbar() {
 	return (
 		<div className="w-screen mx-auto bg-background-default px-4 sm:px-6 lg:px-8">
-			<div className="flex justify-center py-4">
+			<div className="flex justify-between py-4">
 			<Link href="/">
 				<div className="cursor-pointer text-primary-default">Navigation Bar</div>
 			</Link>
+			<Link href="/theme">
+				<div className="cursor-pointer text-primary-default">Settings</div>
+			</Link>
 			</div>
 		</div>
 	);

src/components/ThemeProvider.tsx

@@ -1,56 +1,17 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
+import { RootStateOrAny, useSelector } from "react-redux";
 
 //@ts-ignore
 export default function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState('');
-
-  function changeTheme(theme: string) {
-    const localStorageTheme = localStorage.getItem('theme');
-    if (localStorageTheme) setTheme(localStorageTheme);
-    setTheme(theme)
-    localStorage.setItem('theme', theme);
-  }
-
-  useEffect(() => {
-    changeTheme(localStorage.getItem('theme') || '')
-  }, []);
+	const theme = useSelector((state: RootStateOrAny) => state.theme.theme);
 
   useEffect(() => {
-    localStorage.setItem('theme', theme);
+    localStorage.setItem('theme', theme );
   }, [theme]);
 
   return (
     <div className={`${theme}`}>
       {children}
-      <div className="flex justify-center">
-        <div className="bg-gray-200 m-4 p-4 rounded">
-          <button
-            className=""
-            onClick={() => {
-              changeTheme('')
-            }}>
-            Theme Root
-          </button>
-        </div>
-        <div className="pink bg-gray-200 m-4 p-4 rounded">
-          <button
-            className="text-primary-default"
-            onClick={() => {
-              changeTheme('pink')
-            }}>
-            Pink
-          </button>
-        </div>
-        <div className="dark bg-gray-200 m-4 p-4 rounded">
-          <button
-            className="text-primary-default"
-            onClick={() => {
-              changeTheme('dark')
-            }}>
-            Dark
-          </button>
-        </div>
-      </div>
     </div>
   );
 }

src/pages/_app.tsx

@@ -1,14 +1,18 @@
 import 'styles/globals.css';
 import Layout from 'components/Layout';
 import ThemeProvider from 'components/ThemeProvider';
+import store from "store/store";
+import { Provider } from "react-redux";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <ThemeProvider>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </ThemeProvider>
+    <Provider store={store}>
+      <ThemeProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
+    </Provider>
   );
 }
 

src/pages/index.tsx

@@ -1,7 +1,10 @@
 export default function Home() {
+
   return (
     <div className="flex justify-center">
-      <h3 className="text-primary-default">Hello</h3>
+      <div>
+        <h3 className="text-primary-default">This is the homepage</h3>
+      </div>
     </div>
   )
 }

src/pages/theme.tsx

@@ -0,0 +1,23 @@
+import { useDispatch } from "react-redux";
+import { changeTheme } from "store/theme";
+
+export default function Home() {
+  const dispatch = useDispatch();
+
+  return (
+    <div className="flex justify-center">
+      <button className="mx-2 bg-gray-300 px-3 py-2 rounded" onClick={() => {
+        dispatch(changeTheme(''))
+        }}
+      >Base</button>
+      <button className="dark mx-2 bg-gray-300 px-3 py-2 rounded" onClick={() => {
+        dispatch(changeTheme('dark'))
+        }}
+      >Dark</button>
+      <button className="pink mx-2 bg-gray-300 px-3 py-2 rounded" onClick={() => {
+        dispatch(changeTheme('pink'))
+        }}
+      >Pink</button>
+    </div>
+  )
+}

src/store/store.ts

@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit';
+import themeReducer from './theme';
+
+export default configureStore({
+	reducer: {
+		theme: themeReducer,
+	},
+});
+

src/store/theme.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface ThemeState {
+	theme: string;
+}
+
+const initialState: ThemeState = {
+	theme: 'dark',
+};
+
+export const themeSlice = createSlice({
+	name: "theme",
+	initialState,
+	reducers: {
+		changeTheme: (state, action: PayloadAction<string>) => {
+			state.theme = action.payload;
+			localStorage.setItem('theme', action.payload);
+		},
+	},
+});
+
+// Action creators are generated for each case reducer function
+export const { changeTheme } = themeSlice.actions;
+
+export default themeSlice.reducer;