feat: download announcements via react query

src/client/App.tsx

@@ -1,11 +0,0 @@
-import Button from "@mui/material/Button";
-
-function App() {
-	return (
-		<div>
-			the app: <Button variant="contained">Click here</Button>
-		</div>
-	);
-}
-
-export default App;

src/client/components/DashboardLayout.tsx

@@ -20,7 +20,10 @@ interface Page {
 	to: ValidRoutes;
 }
 
-const pages: Page[] = [{ title: "Announcements", to: "/" }];
+const pages: Page[] = [
+	{ title: "Announcements", to: "/" },
+	{ title: "Subroute", to: "/subroute" },
+];
 
 export default function DashboardLayout({
 	children,

src/client/main.tsx

@@ -3,10 +3,11 @@ import "@fontsource/raleway/400.css";
 import "@fontsource/raleway/500.css";
 import "@fontsource/raleway/700.css";
 
+import { QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import ReactDOM from "react-dom/client";
-
+import { queryClient } from "./query-client";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
@@ -22,6 +23,8 @@ declare module "@tanstack/react-router" {
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
-		<RouterProvider router={router} />
+		<QueryClientProvider client={queryClient}>
+			<RouterProvider router={router} />
+		</QueryClientProvider>
 	</React.StrictMode>,
 );

src/client/query-client.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();

src/client/routeTree.gen.ts

@@ -10,33 +10,43 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as SubrouteIndexRouteImport } from './routes/subroute/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SubrouteIndexRoute = SubrouteIndexRouteImport.update({
+  id: '/subroute/',
+  path: '/subroute/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/subroute/': typeof SubrouteIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/subroute': typeof SubrouteIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/subroute/': typeof SubrouteIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/subroute/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/subroute'
+  id: '__root__' | '/' | '/subroute/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  SubrouteIndexRoute: typeof SubrouteIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -48,11 +58,19 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/subroute/': {
+      id: '/subroute/'
+      path: '/subroute'
+      fullPath: '/subroute/'
+      preLoaderRoute: typeof SubrouteIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  SubrouteIndexRoute: SubrouteIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/client/routes/index.tsx

@@ -1,9 +1,29 @@
+import { Alert, CircularProgress } from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <div>Hello "/"!</div>;
+	const announcementsQuery = useQuery({
+		queryKey: ["announcements"],
+		queryFn: () => fetch("/api/announcements").then((x) => x.json()),
+	});
+
+	useEffect(() => {
+		if (announcementsQuery.error) {
+			console.log(announcementsQuery.error);
+		}
+	}, [announcementsQuery.error]);
+
+	return announcementsQuery.status === "pending" ? (
+		<CircularProgress aria-label="Loading…" />
+	) : announcementsQuery.status === "error" ? (
+		<Alert severity="error">Error (see console)</Alert>
+	) : (
+		<pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
+	);
 }

src/client/routes/subroute/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/subroute/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/subroute/"!</div>;
+}

src/server/main.ts

@@ -9,6 +9,7 @@ app.get("/hello", (_, res) => {
 });
 
 app.get("/api/announcements", async (_, res) => {
+	// await new Promise((resolve) => setTimeout(resolve, 1000));
 	const announcements = await db
 		.selectFrom("announcements")
 		.select(["id", "title", "text", "publication_date", "image"])