Merge pull request #22 from 0ME9A/themeFix

Theme toggle fix v2

Author: 0ME9A

src/RTK/slices/themeSlice.tsx

@@ -3,10 +3,8 @@ import { configureStore } from "@reduxjs/toolkit";
 import { githubApi } from "./RTKQuery/devQuery";
 
 // import devsHistorySlice from "./slices/devsHistorySlice";
-import themeSlice from "./slices/themeSlice";
 
 const reducer = {
-  theme: themeSlice,
   [githubApi.reducerPath]: githubApi.reducer,
   // devsHistory: devsHistorySlice,
 };

src/RTK/store.tsx

@@ -2,13 +2,14 @@
 import { Provider } from "react-redux";
 import { store } from "@/RTK/store";
 import { ReactNode } from "react";
+import useTheme from "@/hooks/useTheme";
 
-import Theme from "@/components/InitialState";
 
 export const ClientLayout = ({ children }: { children: ReactNode }) => {
+  useTheme();
+
   return (
     <Provider store={store}>
-      <Theme />
       <main className="container mx-auto">{children}</main>
     </Provider>
   );

src/app/ClientLayout.tsx

@@ -2,7 +2,6 @@
 import { NotFound } from "../errors/NotFound";
 import { devFace } from "@/types/devFace";
 import { useEffect } from "react";
-
 import setDevToLocalstorage from "@/utils/setDevToLocalstorage";
 import isValidGitHubUserId from "@/utils/isValidGitHubUserId";
 import Searchbox from "../Searchbox";

src/components/InitialState.tsx

@@ -1,17 +1,12 @@
 "use client";
-import { useDispatch, useSelector } from "react-redux";
 import { MdOutlineLightMode } from "react-icons/md";
-import { setTheme } from "@/RTK/slices/themeSlice";
 import { FiMoon } from "react-icons/fi";
-import { RootState } from "@/RTK/store";
-import { theme } from "@/utils/theme";
-
+import useTheme from "@/hooks/useTheme";
 import Image from "next/image";
 import Link from "next/link";
 
 const Menu = () => {
-  const { dark } = useSelector((state: RootState) => state.theme);
-  const dispatch = useDispatch();
+  const [theme, setTheme] = useTheme()
 
   return (
     <nav className="w-full flex items-center justify-between p-1">
@@ -30,11 +25,11 @@ const Menu = () => {
       <button
         type="button"
         title="Switch theme"
-        onClick={() => dispatch(setTheme(theme()))}
+        onClick={setTheme}
         className="flex items-center justify-center gap-2 px-2 py-1 border-transparent border-2 hover:border-black dark:hover:border-white rounded-full"
       >
-        <span className="text-xs">{!dark ? "Dark" : "Light"}</span>
-        {!dark ? <FiMoon /> : <MdOutlineLightMode />}
+        <span className="text-xs">{theme === "dark" ? "Light" : "Dark"}</span>
+        {theme === "dark" ? <MdOutlineLightMode /> : <FiMoon />}
       </button>
     </nav>
   );

src/components/dev/DevProfileSSR.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+function useTheme(): ["dark" | "light", () => void] {
+  const [themeVal, setThemeVal] = useState<"dark" | "light">("dark");
+
+  useEffect(() => {
+    const savedMode = localStorage.getItem("theme");
+    if (savedMode === "dark") {
+      document.documentElement.classList.add("dark");
+      setThemeVal("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      setThemeVal("light");
+    }
+  }, []);
+
+  const setTheme = () => {
+    const savedMode = localStorage.getItem("theme");
+    if (savedMode === "dark") {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+      setThemeVal("light");
+    } else {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+      setThemeVal("dark");
+    }
+  };
+
+  return [themeVal, setTheme];
+}
+
+export default useTheme;