chore: delete confirmation

src/client/components/use-boolean.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from "react";
+
+export interface UsetBooleanResultOperators {
+	setTrue(): void;
+	setFalse(): void;
+	toggle(): void;
+}
+
+export type UseBooleanResult = [boolean, UsetBooleanResultOperators];
+
+export function useBoolean(initialValue: boolean = false): UseBooleanResult {
+	const [value, setValue] = useState(initialValue);
+
+	const toggle = useCallback(() => setValue((x) => !x), []);
+	const setTrue = useCallback(() => setValue(true), []);
+	const setFalse = useCallback(() => setValue(false), []);
+
+	return [value, { setTrue, setFalse, toggle }];
+}

src/client/routes/index.tsx

@@ -1,7 +1,15 @@
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
 	Alert,
 	Box,
+	Button,
 	CircularProgress,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	IconButton,
 	Table,
 	TableBody,
 	TableCell,
@@ -12,9 +20,10 @@ import {
 } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import z from "zod";
 import { RouterButton } from "../components/RouterButton";
+import { useBoolean } from "../components/use-boolean";
 
 const Announcements = z.array(
 	z.object({
@@ -26,6 +35,8 @@ const Announcements = z.array(
 	}),
 );
 
+type Announcement = z.infer<typeof Announcements>[0];
+
 export const Route = createFileRoute("/")({
 	component: RouteComponent,
 });
@@ -51,6 +62,27 @@ function RouteComponent() {
 		}
 	}, [announcementsQuery.error]);
 
+	// delete confirmation dialog status
+	const [
+		isDeleteConfirmationOpen,
+		{
+			setTrue: openDeleteConfirmationDialog,
+			setFalse: closeDeleteConfirmation,
+		},
+	] = useBoolean();
+
+	const [
+		announcementForLatestDeleteAttempt,
+		setAnnouncementForLatestDeleteAttempt,
+	] = useState<Announcement | undefined>(undefined);
+	const openDeleteConfirmation = useCallback(
+		(a: Announcement) => {
+			openDeleteConfirmationDialog();
+			setAnnouncementForLatestDeleteAttempt(a);
+		},
+		[openDeleteConfirmationDialog],
+	);
+
 	// handle loading / error / show values
 	return (
 		<Box sx={{ flexDirection: "column", display: "flex", gap: "3em" }}>
@@ -67,32 +99,58 @@ function RouteComponent() {
 			) : announcementsQuery.status === "error" ? (
 				<Alert severity="error">Error (see console)</Alert>
 			) : (
-				// <pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
+				<>
-				<TableContainer>
+					<TableContainer>
-					<Table>
+						<Table>
-						<TableHead>
+							<TableHead>
-							<TableRow>
+								<TableRow>
-								<TableCell />
+									<TableCell />
-								<TableCell>Title</TableCell>
+									<TableCell>Title</TableCell>
-								<TableCell>Text</TableCell>
+									<TableCell>Text</TableCell>
-								<TableCell>Publication Date</TableCell>
+									<TableCell>Publication Date</TableCell>
-							</TableRow>
+									<TableCell />
-						</TableHead>
-						<TableBody>
-							{announcementsQuery.data.map((a) => (
-								<TableRow key={a.id}>
-									<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>
-							))}
+							</TableHead>
-						</TableBody>
+							<TableBody>
-					</Table>
+								{announcementsQuery.data.map((a) => (
-				</TableContainer>
+									<TableRow key={a.id}>
+										<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>
+										<TableCell>
+											<IconButton onClick={() => openDeleteConfirmation(a)}>
+												<DeleteIcon />
+											</IconButton>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					</TableContainer>
+					<Dialog
+						open={isDeleteConfirmationOpen}
+						onClose={closeDeleteConfirmation}
+						role="alertdialog"
+					>
+						<DialogTitle>Delete announcement</DialogTitle>
+						<DialogContent>
+							<DialogContentText>
+								Do you want to delete the announcement{" "}
+								<strong>{announcementForLatestDeleteAttempt?.title}</strong>?
+							</DialogContentText>
+							<DialogActions>
+								<Button onClick={closeDeleteConfirmation} autoFocus>
+									No
+								</Button>
+								<Button onClick={closeDeleteConfirmation}>Yes</Button>
+							</DialogActions>
+						</DialogContent>
+					</Dialog>
+				</>
 			)}
 		</Box>
 	);