diff --git a/package.json b/package.json index 180852a..8143829 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "react-dom": "^19.1.0", "tsx": "^4.19.3", "typescript": "^5.8.3", - "vite-express": "*" + "vite-express": "*", + "zod": "^4.4.3" }, "devDependencies": { "@biomejs/biome": "2.5.0", diff --git a/src/client/routes/index.tsx b/src/client/routes/index.tsx index adaabad..fbcb864 100644 --- a/src/client/routes/index.tsx +++ b/src/client/routes/index.tsx @@ -2,23 +2,44 @@ import { Alert, CircularProgress } from "@mui/material"; import { useQuery } from "@tanstack/react-query"; import { createFileRoute } from "@tanstack/react-router"; import { useEffect } from "react"; +import z from "zod"; + +const Announcements = z.array( + z.object({ + id: z.number(), + title: z.string(), + text: z.string(), + publication_date: z.iso.datetime().transform((arg) => new Date(arg)), + image: z.string(), + }), +); export const Route = createFileRoute("/")({ component: RouteComponent, }); function RouteComponent() { + // the query to retrieve the announcements const announcementsQuery = useQuery({ queryKey: ["announcements"], - queryFn: () => fetch("/api/announcements").then((x) => x.json()), + queryFn: async () => { + const response = await fetch("/api/announcements"); + const data = await response.json(); + const announcements = Announcements.parse(data); + console.log(announcements); + return announcements; + }, + retry: false, }); + // log error only if we get one useEffect(() => { if (announcementsQuery.error) { console.log(announcementsQuery.error); } }, [announcementsQuery.error]); + // handle loading / error / show values return announcementsQuery.status === "pending" ? ( ) : announcementsQuery.status === "error" ? (