From 19c393fb8dd5942cf290c7bb36277534575891c8 Mon Sep 17 00:00:00 2001 From: OMEGA Date: Sun, 31 Mar 2024 11:56:49 -0700 Subject: [PATCH] theme toggle fix --- src/RTK/slices/themeSlice.tsx | 25 --------------------- src/RTK/store.tsx | 2 -- src/app/ClientLayout.tsx | 5 +++-- src/components/InitialState.tsx | 20 ----------------- src/components/dev/DevProfileSSR.tsx | 1 - src/components/menu/Menu.tsx | 20 +++++------------ src/hooks/useTheme.ts | 33 ++++++++++++++++++++++++++++ 7 files changed, 41 insertions(+), 65 deletions(-) delete mode 100644 src/RTK/slices/themeSlice.tsx delete mode 100644 src/components/InitialState.tsx create mode 100644 src/hooks/useTheme.ts diff --git a/src/RTK/slices/themeSlice.tsx b/src/RTK/slices/themeSlice.tsx deleted file mode 100644 index f5979af..0000000 --- a/src/RTK/slices/themeSlice.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { createSlice } from "@reduxjs/toolkit"; -import type { PayloadAction } from "@reduxjs/toolkit"; - -export interface themeFace { - dark: boolean; -} - -const initialState: themeFace = { - dark: false, -}; - -export const themeSlice = createSlice({ - name: "themeSlice", - initialState, - reducers: { - setTheme: (state, action: PayloadAction) => { - state.dark = action.payload; - }, - }, -}); - -// Action creators are generated for each case reducer function -export const { setTheme } = themeSlice.actions; - -export default themeSlice.reducer; diff --git a/src/RTK/store.tsx b/src/RTK/store.tsx index 09a2722..b8e49bc 100644 --- a/src/RTK/store.tsx +++ b/src/RTK/store.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, }; diff --git a/src/app/ClientLayout.tsx b/src/app/ClientLayout.tsx index f5d2b10..6406e53 100644 --- a/src/app/ClientLayout.tsx +++ b/src/app/ClientLayout.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 ( -
{children}
 ); diff --git a/src/components/InitialState.tsx b/src/components/InitialState.tsx deleted file mode 100644 index b27b66b..0000000 --- a/src/components/InitialState.tsx +++ /dev/null @@ -1,20 +0,0 @@ -"use client"; -import { useEffect } from "react"; - -function InitialState() { - useEffect(() => { - if ( - localStorage.theme === "dark" || - (!("theme" in localStorage) && - window.matchMedia("(prefers-color-scheme: dark)").matches) - ) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }, []); - - return <>; -} - -export default InitialState; diff --git a/src/components/dev/DevProfileSSR.tsx b/src/components/dev/DevProfileSSR.tsx index d2f8e93..c7ae2ae 100644 --- a/src/components/dev/DevProfileSSR.tsx +++ b/src/components/dev/DevProfileSSR.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"; diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index be4d50a..df71bc2 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -1,22 +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 { useEffect } from "react"; - +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(); - - useEffect(() => { - dispatch(setTheme(theme())); - }, [dispatch]); + const [theme, setTheme] = useTheme() return ( ); diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts new file mode 100644 index 0000000..3ec4c82 --- /dev/null +++ b/src/hooks/useTheme.ts @@ -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;