feat(02-02): add thread hooks, UI store, tab navigation, and thread list
- Create useThreads/useCandidates TanStack Query hooks - Extend uiStore with candidate panel and resolve dialog state - Add ThreadTabs component for gear/planning tab switching - Add ThreadCard component with candidate count and price range chips - Refactor index.tsx to tabbed HomePage with PlanningView - Create placeholder thread detail route for navigation target
This commit is contained in:
113
src/client/hooks/useThreads.ts
Normal file
113
src/client/hooks/useThreads.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
|
||||
|
||||
interface ThreadListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
status: "active" | "resolved";
|
||||
resolvedCandidateId: number | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
candidateCount: number;
|
||||
minPriceCents: number | null;
|
||||
maxPriceCents: number | null;
|
||||
}
|
||||
|
||||
interface CandidateWithCategory {
|
||||
id: number;
|
||||
threadId: number;
|
||||
name: string;
|
||||
weightGrams: number | null;
|
||||
priceCents: number | null;
|
||||
categoryId: number;
|
||||
notes: string | null;
|
||||
productUrl: string | null;
|
||||
imageFilename: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
categoryName: string;
|
||||
categoryEmoji: string;
|
||||
}
|
||||
|
||||
interface ThreadWithCandidates {
|
||||
id: number;
|
||||
name: string;
|
||||
status: "active" | "resolved";
|
||||
resolvedCandidateId: number | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
candidates: CandidateWithCategory[];
|
||||
}
|
||||
|
||||
export function useThreads(includeResolved = false) {
|
||||
return useQuery({
|
||||
queryKey: ["threads", { includeResolved }],
|
||||
queryFn: () =>
|
||||
apiGet<ThreadListItem[]>(
|
||||
`/api/threads${includeResolved ? "?includeResolved=true" : ""}`,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
export function useThread(threadId: number | null) {
|
||||
return useQuery({
|
||||
queryKey: ["threads", threadId],
|
||||
queryFn: () => apiGet<ThreadWithCandidates>(`/api/threads/${threadId}`),
|
||||
enabled: threadId != null,
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateThread() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: { name: string }) =>
|
||||
apiPost<ThreadListItem>("/api/threads", data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateThread() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, ...data }: { id: number; name?: string }) =>
|
||||
apiPut<ThreadListItem>(`/api/threads/${id}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteThread() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: number) =>
|
||||
apiDelete<{ success: boolean }>(`/api/threads/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useResolveThread() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
threadId,
|
||||
candidateId,
|
||||
}: {
|
||||
threadId: number;
|
||||
candidateId: number;
|
||||
}) =>
|
||||
apiPost<{ success: boolean; item: unknown }>(
|
||||
`/api/threads/${threadId}/resolve`,
|
||||
{ candidateId },
|
||||
),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["items"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["totals"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user