From 07c6bf53a9460e2256bdd9d3947b27a597ab9bb0 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 22 Dec 2022 15:43:10 +0100
Subject: [PATCH] refactor: extract dark theme to recoil state

---
 frontend/components/Navigation.tsx | 4 ++--
 frontend/lib/state.ts              | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
index 22930c9..c82816a 100644
--- a/frontend/components/Navigation.tsx
+++ b/frontend/components/Navigation.tsx
@@ -5,11 +5,12 @@ import Link from "next/link";
 import NavItem from "./NavItem";
 import Logo from "./logo";
 import { useRecoilState } from "recoil";
-import { userState } from "../lib/state";
+import { themeState, userState } from "../lib/state";
 import { fetchAPI, APIError, ErrorCode, MeUser } from "../lib/api-fetch";
 
 export default function Navigation() {
   const [user, setUser] = useRecoilState(userState);
+  const [darkTheme, setDarkTheme] = useRecoilState(themeState);
 
   useEffect(() => {
     if (user) return;
@@ -28,7 +29,6 @@ export default function Navigation() {
     );
   }, [user, setUser]);
 
-  const [darkTheme, setDarkTheme] = useState<boolean>(false);
   const [showMenu, setShowMenu] = useState(false);
 
   useEffect(() => {
diff --git a/frontend/lib/state.ts b/frontend/lib/state.ts
index faeca38..aed101a 100644
--- a/frontend/lib/state.ts
+++ b/frontend/lib/state.ts
@@ -5,3 +5,8 @@ export const userState = atom<MeUser | null>({
   key: "userState",
   default: null,
 });
+
+export const themeState = atom<boolean>({
+  key: "themeState",
+  default: false,
+});