feat(web): TanStack Query hooks + session-guarded routes
Installs @tanstack/react-query and react-router-dom; adds typed query hooks (useMe, useObjectsPage, useObject, useFieldDefinitions, useLogin, useLogout), a QueryClient+MemoryRouter test render helper, and RequireAuth — a layout route that blocks unauthenticated access and redirects to /login. All 7 tests pass, typecheck/lint/build clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,95 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { api } from "./client";
|
||||
import type { components } from "./schema";
|
||||
|
||||
type UserView = components["schemas"]["UserView"];
|
||||
type LoginRequest = components["schemas"]["LoginRequest"];
|
||||
|
||||
export function useMe() {
|
||||
return useQuery({
|
||||
queryKey: ["me"],
|
||||
queryFn: async (): Promise<UserView | null> => {
|
||||
const { data, response } = await api.GET("/api/admin/me");
|
||||
|
||||
if (response.status === 401) return null;
|
||||
|
||||
if (!data) throw new Error("failed to load session");
|
||||
|
||||
return data;
|
||||
},
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
export function useObjectsPage(limit: number, offset: number) {
|
||||
return useQuery({
|
||||
queryKey: ["objects", { limit, offset }],
|
||||
queryFn: async () => {
|
||||
const { data, error } = await api.GET("/api/admin/objects", {
|
||||
params: { query: { limit, offset } },
|
||||
});
|
||||
|
||||
if (error || !data) throw new Error("failed to load objects");
|
||||
|
||||
return data;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useObject(id: string) {
|
||||
return useQuery({
|
||||
queryKey: ["object", id],
|
||||
queryFn: async () => {
|
||||
const { data, response } = await api.GET("/api/admin/objects/{id}", {
|
||||
params: { path: { id } },
|
||||
});
|
||||
|
||||
if (response.status === 404) return null;
|
||||
|
||||
if (!data) throw new Error("failed to load object");
|
||||
|
||||
return data;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useFieldDefinitions() {
|
||||
return useQuery({
|
||||
queryKey: ["field-definitions"],
|
||||
queryFn: async () => {
|
||||
const { data, error } = await api.GET("/api/admin/field-definitions");
|
||||
|
||||
if (error || !data) throw new Error("failed to load field definitions");
|
||||
|
||||
return data;
|
||||
},
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useLogin() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (body: LoginRequest) => {
|
||||
const { response } = await api.POST("/api/admin/login", { body });
|
||||
|
||||
if (response.status !== 204) {
|
||||
throw new Error(response.status === 401 ? "invalid" : "network");
|
||||
}
|
||||
},
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ["me"] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useLogout() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.POST("/api/admin/logout");
|
||||
},
|
||||
onSuccess: () => qc.setQueryData(["me"], null),
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user