aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/hooks
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2026-02-13 22:40:45 +0900
committernsfisis <nsfisis@gmail.com>2026-02-13 23:07:26 +0900
commite239fe743fc66a8712cf9886d3dfed3cc41fce36 (patch)
treee3452fb13dce114cea0e8371dbb049118aa1229e /frontend/app/hooks
parent482c3a52a0fcc5870a7db4a190475caf61b211a3 (diff)
downloadphperkaigi-2026-albatross-e239fe743fc66a8712cf9886d3dfed3cc41fce36.tar.gz
phperkaigi-2026-albatross-e239fe743fc66a8712cf9886d3dfed3cc41fce36.tar.zst
phperkaigi-2026-albatross-e239fe743fc66a8712cf9886d3dfed3cc41fce36.zip
refactor(frontend): replace React Router BFF with Wouter SPA
Remove React Router 7 SSR/BFF architecture (server-side loaders, actions, sessions, remix-auth) and replace with a client-side SPA using Wouter for routing and cookie-based JWT auth. - Replace reactRouter() Vite plugin with @vitejs/plugin-react - Add index.html + app/main.tsx as SPA entry points - Add Wouter routing with auth guards (ProtectedRoute/PublicOnlyRoute) - Add client-side auth (app/auth.ts) and useAuth hook - Migrate all route files to app/pages/ with client-side data fetching - Update NavigateLink and GolfPlayAppGaming to use Wouter Link - Remove .server/, routes/, root.tsx, react-router.config.ts - Clean up tsconfig.json (remove .react-router references) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Diffstat (limited to 'frontend/app/hooks')
-rw-r--r--frontend/app/hooks/useAuth.ts58
-rw-r--r--frontend/app/hooks/usePageTitle.ts7
2 files changed, 65 insertions, 0 deletions
diff --git a/frontend/app/hooks/useAuth.ts b/frontend/app/hooks/useAuth.ts
new file mode 100644
index 0000000..8762734
--- /dev/null
+++ b/frontend/app/hooks/useAuth.ts
@@ -0,0 +1,58 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { apiLogin } from "../api/client";
+import {
+ type User,
+ clearToken,
+ getToken,
+ getUserFromToken,
+ isTokenExpired,
+ setToken,
+} from "../auth";
+
+// Simple external store to trigger re-renders when auth state changes.
+let authVersion = 0;
+const listeners = new Set<() => void>();
+
+function subscribe(callback: () => void) {
+ listeners.add(callback);
+ return () => listeners.delete(callback);
+}
+
+function getSnapshot() {
+ return authVersion;
+}
+
+function notifyAuthChange() {
+ authVersion++;
+ for (const listener of listeners) {
+ listener();
+ }
+}
+
+export function useAuth(): {
+ user: User | null;
+ token: string | null;
+ isLoggedIn: boolean;
+ login: (username: string, password: string) => Promise<void>;
+ logout: () => void;
+} {
+ useSyncExternalStore(subscribe, getSnapshot);
+
+ const token = getToken();
+ const isExpired = isTokenExpired();
+ const user = isExpired ? null : getUserFromToken();
+ const isLoggedIn = user !== null && !isExpired;
+
+ const login = useCallback(async (username: string, password: string) => {
+ const { token } = await apiLogin(username, password);
+ setToken(token);
+ notifyAuthChange();
+ }, []);
+
+ const logout = useCallback(() => {
+ clearToken();
+ notifyAuthChange();
+ }, []);
+
+ return { user, token: isLoggedIn ? token : null, isLoggedIn, login, logout };
+}
diff --git a/frontend/app/hooks/usePageTitle.ts b/frontend/app/hooks/usePageTitle.ts
new file mode 100644
index 0000000..fb8def5
--- /dev/null
+++ b/frontend/app/hooks/usePageTitle.ts
@@ -0,0 +1,7 @@
+import { useEffect } from "react";
+
+export function usePageTitle(title: string) {
+ useEffect(() => {
+ document.title = title;
+ }, [title]);
+}