From ba05fbedd3e585747f167a284fef9d1ee137e01e Mon Sep 17 00:00:00 2001 From: Owen Date: Sun, 7 Jun 2026 23:07:59 +0200 Subject: [PATCH] add context --- src/context/LichessUserContext.tsx | 47 ++++++++++++++++++++++++++++++ src/hooks/useLichess.ts | 8 +++-- src/routes/__root.tsx | 33 +++++++++++---------- 3 files changed, 70 insertions(+), 18 deletions(-) create mode 100644 src/context/LichessUserContext.tsx diff --git a/src/context/LichessUserContext.tsx b/src/context/LichessUserContext.tsx new file mode 100644 index 0000000..a918183 --- /dev/null +++ b/src/context/LichessUserContext.tsx @@ -0,0 +1,47 @@ +import { + createContext, + type Dispatch, + type ReactNode, + type SetStateAction, + useContext, + useState, +} from "react"; + +interface ILichessUser { + username: string; + isLoggedIn: boolean; +} + +interface ILichessUserContextType { + user: ILichessUser | null; + setUser: Dispatch>; + logout: () => void; +} + +const LichessUserContext = createContext( + undefined, +); + +export const LichessUserProvider = ({ children }: { children: ReactNode }) => { + const [user, setUser] = useState(null); + + const logout = () => { + setUser(null); + }; + + // TODO useEffect to check and login user on mount + + return ( + + {children} + + ); +}; + +export const useLichessUser = () => { + const context = useContext(LichessUserContext); + if (!context) { + throw new Error("useLichessUser must be used within a LichessUserProvider"); + } + return context; +}; diff --git a/src/hooks/useLichess.ts b/src/hooks/useLichess.ts index 5a9a8c3..754ca5e 100644 --- a/src/hooks/useLichess.ts +++ b/src/hooks/useLichess.ts @@ -1,14 +1,14 @@ import { useServerFn } from "@tanstack/react-start"; -import { useState } from "react"; +import { useLichessUser } from "#/context/LichessUserContext.tsx"; import { getToken, login } from "#/server/lichess.ts"; export const useLichess = () => { - const [lichessUser, setLichessUser] = useState(); + const { user, setUser, logout } = useLichessUser(); const triggerLogin = useServerFn(login); const trigggerGetToken = useServerFn(getToken); - console.log("Lichess User:", lichessUser); + console.log("Lichess User:", user); const lichessTokenVerification = async ({ code }) => { await trigggerGetToken(); @@ -21,6 +21,8 @@ export const useLichess = () => { const lichessLogout = () => { console.log("Lichess Logout"); + // TODO remove cookies + logout(); }; return { diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 13602f5..2e3ce86 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -4,6 +4,7 @@ import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"; import { type ReactNode, Suspense } from "react"; import { ToastContainer } from "react-toastify"; import { MatomoAnalytics } from "#/components/MatomoAnalytics.tsx"; +import { LichessUserProvider } from "#/context/LichessUserContext.tsx"; import Footer from "../components/Footer"; import Header from "../components/Header"; import appCss from "../styles.css?url"; @@ -51,21 +52,23 @@ function RootDocument({ children }: { children: ReactNode }) { -
- {children} - -