redglow/owof-announcements
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header and add

Browse Source
This commit is contained in:
redglow
2026-06-20 17:06:43 +02:00
parent f087ec1f05
commit a89e961976
1 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/routes/index.tsx
+46 -30
View File
@@ -1,5 +1,6 @@
import { import {
Alert, Alert,
Box,
CircularProgress, CircularProgress,
Table, Table,
TableBody, TableBody,
@@ -7,11 +8,13 @@ import {
TableContainer, TableContainer,
TableHead, TableHead,
TableRow, TableRow,
Typography,
} from "@mui/material"; } from "@mui/material";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import { useEffect } from "react"; import { useEffect } from "react";
import z from "zod"; import z from "zod";
import { RouterButton } from "../components/RouterButton";
const Announcements = z.array( const Announcements = z.array(
z.object({ z.object({
@@ -49,35 +52,48 @@ function RouteComponent() {
}, [announcementsQuery.error]); }, [announcementsQuery.error]);
// handle loading / error / show values // handle loading / error / show values
return announcementsQuery.status === "pending" ? ( return (
<CircularProgress aria-label="Loading…" /> <Box sx={{ flexDirection: "column", display: "flex", gap: "3em" }}>
) : announcementsQuery.status === "error" ? ( <Box
<Alert severity="error">Error (see console)</Alert> sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
) : ( >
// <pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre> <Typography variant="h4">Announcements</Typography>
<TableContainer> <RouterButton to="/" variant="contained">
<Table> Add announcement
<TableHead> </RouterButton>
<TableRow> </Box>
<TableCell /> {announcementsQuery.status === "pending" ? (
<TableCell>Title</TableCell> <CircularProgress aria-label="Loading…" />
<TableCell>Text</TableCell> ) : announcementsQuery.status === "error" ? (
<TableCell>Publication Date</TableCell> <Alert severity="error">Error (see console)</Alert>
</TableRow> ) : (
</TableHead> // <pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
<TableBody> <TableContainer>
{announcementsQuery.data.map((a) => ( <Table>
<TableRow key={a.id}> <TableHead>
<TableCell>{a.id}</TableCell> <TableRow>
<TableCell>{a.title}</TableCell> <TableCell />
<TableCell> <TableCell>Title</TableCell>
{a.text.substring(0, 50) + (a.text.length > 50 ? "..." : "")} <TableCell>Text</TableCell>
</TableCell> <TableCell>Publication Date</TableCell>
<TableCell>{a.publication_date.toString()}</TableCell> </TableRow>
</TableRow> </TableHead>
))} <TableBody>
</TableBody> {announcementsQuery.data.map((a) => (
</Table> <TableRow key={a.id}>
</TableContainer> <TableCell>{a.id}</TableCell>
<TableCell>{a.title}</TableCell>
<TableCell>
{a.text.substring(0, 50) +
(a.text.length > 50 ? "..." : "")}
</TableCell>
<TableCell>{a.publication_date.toString()}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Box>
); );
} }