Merge pull request #17 from NYCU-SDC/feat/CORE-188-adminNav-api-integration

[CORE-188] AdminNav Api Integration

Author: elvisdragonmao

src/features/auth/hooks/useAuth.ts

@@ -1,5 +1,7 @@
+import { authService, type AuthUser } from "@/features/auth/services/authService";
 import { useQuery } from "@tanstack/react-query";
-import { authService, type AuthUser } from "../services/authService";
+
+const canAccessAdmin = (user: AuthUser | null) => !!user;
 
 export const useAuth = () => {
 	const { data: user, isLoading } = useQuery<AuthUser | null>({
@@ -12,6 +14,7 @@ export const useAuth = () => {
 		user: user ?? null,
 		isLoading,
 		isAuthenticated: !!user,
-		isOnboarded: user?.is_onboarded ?? false
+		isOnboarded: user?.is_onboarded ?? false,
+		isAdmin: canAccessAdmin(user ?? null)
 	};
 };

src/features/auth/hooks/useOrgAdminAccess.ts

@@ -0,0 +1,48 @@
+import { useOrgMembers } from "@/features/dashboard/hooks/useOrgSettings";
+import { useMemo } from "react";
+import { useAuth } from "./useAuth";
+
+const ORG_SLUG = "SDC";
+
+const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === "object" && value !== null;
+const getString = (value: unknown): string | null => (typeof value === "string" ? value : null);
+const getStringArray = (value: unknown): string[] => (Array.isArray(value) ? value.filter((v): v is string => typeof v === "string") : []);
+const normalize = (value: string) => value.trim().toLowerCase();
+
+export const useOrgAdminAccess = () => {
+	const { user, isLoading: isAuthLoading } = useAuth();
+	const membersQuery = useOrgMembers(ORG_SLUG, !!user);
+
+	const isOrgMember = useMemo(() => {
+		if (!user) return false;
+		const rawMembers = membersQuery.data;
+		if (!Array.isArray(rawMembers)) return false;
+
+		const byId = normalize(user.id ?? "");
+		const byUsername = normalize(user.username ?? "");
+		const byEmails = new Set((user.emails ?? []).map(normalize));
+
+		return rawMembers.some(item => {
+			if (!isRecord(item)) return false;
+			const member = isRecord(item.member) ? item.member : item;
+
+			const memberId = normalize(getString(member.id) ?? "");
+			const memberUsername = normalize(getString(member.username) ?? "");
+			const memberEmails = getStringArray(member.emails).map(normalize);
+
+			if (byId && memberId && byId === memberId) return true;
+			if (byUsername && memberUsername && byUsername === memberUsername) return true;
+
+			return memberEmails.some(email => byEmails.has(email));
+		});
+	}, [membersQuery.data, user]);
+
+	const isLoading = isAuthLoading || membersQuery.isLoading;
+	const canAccessOrgAdmin = isOrgMember;
+
+	return {
+		user,
+		canAccessOrgAdmin,
+		isLoading
+	};
+};

src/features/auth/services/authService.ts

@@ -8,6 +8,8 @@ export type AuthUser = {
 	roles?: Array<"USER">;
 	is_onboarded?: boolean;
 	allow_onboarding?: boolean;
+	isMember?: boolean;
+	isFirstLogin?: boolean;
 };
 
 const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === "object" && value !== null;
@@ -67,7 +69,7 @@ export const authService = {
 
 		return readJsonSafely<unknown>(response);
 	},
-  
+
 	async getCurrentUser<TUser extends AuthUser = AuthUser>(): Promise<TUser | null> {
 		const response = await fetch("/api/users/me", {
 			credentials: "include"
@@ -81,7 +83,7 @@ export const authService = {
 		}
 
 		return readJsonSafely<TUser>(response);
-  },
+	},
 
 	async updateOnboarding(payload: { username: string; name: string }) {
 		const response = await fetch("/api/users/onboarding", {

src/features/dashboard/hooks/useOrgSettings.ts

@@ -11,10 +11,11 @@ export const useOrg = (slug: string) =>
 		queryFn: () => api.getOrg(slug)
 	});
 
-export const useOrgMembers = (slug: string) =>
+export const useOrgMembers = (slug: string, enabled = true) =>
 	useQuery({
 		queryKey: orgKeys.members(slug),
-		queryFn: () => api.listOrgMembers(slug)
+		queryFn: () => api.listOrgMembers(slug),
+		enabled
 	});
 
 /* ---------- Mutations ---------- */

src/layouts/AdminNav.tsx

@@ -1,3 +1,4 @@
+import { useOrgAdminAccess } from "@/features/auth/hooks/useOrgAdminAccess";
 import { ClipboardList, FileText, LogOut, Menu, Settings, X } from "lucide-react";
 import { useState } from "react";
 import { Link, matchPath, useLocation, useParams } from "react-router-dom";
@@ -16,15 +17,15 @@ export const AdminNav = () => {
 	const isFormDetail = !!matchPath({ path: "/orgs/sdc/forms/:formid/*", end: false }, pathname);
 	const isSettings = pathname.startsWith("/orgs/sdc/settings");
 
-	const user = {
-		name: "Alice King",
-		username: "alice",
-		avatarUrl: ""
-	};
+	const { user, canAccessOrgAdmin, isLoading } = useOrgAdminAccess();
 
-	const displayName = user.name || user.username || "??";
-	const initials = displayName.slice(0, 2).toUpperCase();
-	const hasAvatar = !!user.avatarUrl;
+	if (isLoading || !canAccessOrgAdmin) {
+		return null;
+	}
+
+	const displayName = user?.name || user?.username || user?.emails?.[0] || "ˊ_>ˋ";
+	const initials = user ? displayName.slice(0, 2).toUpperCase() : displayName;
+	const hasAvatar = !!user?.avatarUrl;
 
 	return (
 		<>
@@ -60,11 +61,11 @@ export const AdminNav = () => {
 						</Link>
 
 						{/* Avatar */}
-						<div className={styles.avatarContainer}>
-							{hasAvatar ? <img src={user.avatarUrl} alt={displayName} className={styles.avatarImg} /> : <div className={styles.avatarFallback}>{initials}</div>}
+						<div className={styles.avatarContainer} title={user?.username || displayName}>
+							{hasAvatar ? <img src={user?.avatarUrl} alt={displayName} className={styles.avatarImg} /> : <div className={styles.avatarFallback}>{initials}</div>}
 						</div>
 
-						<Link to="/" className={styles.link}>
+						<Link to="/logout" className={styles.link} aria-label="Logout" title="Logout">
 							<div className={`${styles.navItem} ${styles.logoutItem}`}>
 								<LogOut size={22} />
 							</div>

src/routes/AppRouter.tsx

@@ -8,6 +8,7 @@ import { ComponentsDemo } from "@/features/dashboard/components/ComponentsDemo";
 import { AdminFormDetailPage, AdminFormsPage, FormDetailPage, FormsListPage } from "@/features/form/components";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import OrgRewriteToSdc from "./OrgRewriteToSdc";
+import RequireOrgAdminAccess from "./RequireOrgAdminAccess";
 
 export const AppRouter = () => {
 	return (
@@ -26,19 +27,23 @@ export const AppRouter = () => {
 				<Route path="/forms" element={<FormsListPage />} />
 				<Route path="/forms/:id" element={<FormDetailPage />} />
 
-				{/* Organization redirects */}
-				<Route path="/orgs/:orgId/*" element={<OrgRewriteToSdc />} />
-				<Route path="/orgs" element={<Navigate to="/orgs/sdc/forms" replace />} />
-				<Route path="/orgs/sdc" element={<Navigate to="/orgs/sdc/forms" replace />} />
+				{/* Organization redirects (org member only) */}
+				<Route element={<RequireOrgAdminAccess />}>
+					<Route path="/orgs/:orgId/*" element={<OrgRewriteToSdc />} />
+					<Route path="/orgs" element={<Navigate to="/orgs/sdc/forms" replace />} />
+					<Route path="/orgs/sdc" element={<Navigate to="/orgs/sdc/forms" replace />} />
+				</Route>
 
 				{/* Admin routes */}
-				<Route path="/orgs/sdc/forms" element={<AdminFormsPage />} />
-				<Route path="/orgs/sdc/forms/:formid/info" element={<AdminFormDetailPage />} />
-				<Route path="/orgs/sdc/forms/:formid/edit" element={<AdminFormDetailPage />} />
-				<Route path="/orgs/sdc/forms/:formid/section/:sectionId/edit" element={<AdminFormDetailPage />} />
-				<Route path="/orgs/sdc/forms/:formid/reply" element={<AdminFormDetailPage />} />
-				<Route path="/orgs/sdc/forms/:formid/design" element={<AdminFormDetailPage />} />
-				<Route path="/orgs/sdc/settings" element={<AdminSettingsPage />} />
+				<Route element={<RequireOrgAdminAccess />}>
+					<Route path="/orgs/sdc/forms" element={<AdminFormsPage />} />
+					<Route path="/orgs/sdc/forms/:formid/info" element={<AdminFormDetailPage />} />
+					<Route path="/orgs/sdc/forms/:formid/edit" element={<AdminFormDetailPage />} />
+					<Route path="/orgs/sdc/forms/:formid/section/:sectionId/edit" element={<AdminFormDetailPage />} />
+					<Route path="/orgs/sdc/forms/:formid/reply" element={<AdminFormDetailPage />} />
+					<Route path="/orgs/sdc/forms/:formid/design" element={<AdminFormDetailPage />} />
+					<Route path="/orgs/sdc/settings" element={<AdminSettingsPage />} />
+				</Route>
 
 				{/* 404 */}
 				<Route path="*" element={<NotFoundPage />} />

src/routes/RequireOrgAdminAccess.tsx

@@ -0,0 +1,19 @@
+import { useOrgAdminAccess } from "@/features/auth/hooks/useOrgAdminAccess";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+
+const RequireOrgAdminAccess = () => {
+	const { canAccessOrgAdmin, isLoading } = useOrgAdminAccess();
+	const location = useLocation();
+
+	if (isLoading) {
+		return null;
+	}
+
+	if (!canAccessOrgAdmin) {
+		return <Navigate to="/forms" replace state={{ from: location.pathname }} />;
+	}
+
+	return <Outlet />;
+};
+
+export default RequireOrgAdminAccess;