chore: better organized "delete announcement" dialog

src/client/components/DeleteAnnouncementDialog.tsx

@@ -6,25 +6,39 @@ import {
 	DialogContentText,
 	DialogTitle,
 } from "@mui/material";
+import { useCallback } from "react";
+import { useDeleteAnnouncementMutation } from "../hooks";
 import type { Announcement } from "../services";
 
 export interface DeleteAnnouncementDialogProps {
 	isDeleteConfirmationOpen: boolean;
-	denyDelete(): void;
-	confirmDelete(): void;
+	closeDeleteConfirmation(): void;
 	announcement: Announcement;
 }
 
 export function DeleteAnnouncementDialog({
 	announcement,
-	confirmDelete,
-	denyDelete,
+	closeDeleteConfirmation,
 	isDeleteConfirmationOpen,
 }: DeleteAnnouncementDialogProps) {
+	const deleteAnnouncementMutation = useDeleteAnnouncementMutation();
+
+	const confirmDelete = useCallback(() => {
+		closeDeleteConfirmation();
+		if (announcement === undefined) {
+			throw new Error("Cannot delete announcement without an attempt set.");
+		}
+		deleteAnnouncementMutation.mutate(announcement.id);
+	}, [
+		announcement,
+		closeDeleteConfirmation,
+		deleteAnnouncementMutation.mutate,
+	]);
+
 	return (
 		<Dialog
 			open={isDeleteConfirmationOpen}
-			onClose={denyDelete}
+			onClose={closeDeleteConfirmation}
 			role="alertdialog"
 		>
 			<DialogTitle>Delete announcement</DialogTitle>
@@ -34,7 +48,7 @@ export function DeleteAnnouncementDialog({
 					<strong>{announcement.title}</strong>?
 				</DialogContentText>
 				<DialogActions>
-					<Button onClick={denyDelete} autoFocus>
+					<Button onClick={closeDeleteConfirmation} autoFocus>
 						No
 					</Button>
 					<Button onClick={confirmDelete}>Yes</Button>

src/client/routes/index.tsx

@@ -1,11 +1,11 @@
 import { Alert, Box, CircularProgress, Typography } from "@mui/material";
 import { createFileRoute } from "@tanstack/react-router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { AnnouncementTable } from "../components/AnnouncementTable";
 import { DeleteAnnouncementDialog } from "../components/DeleteAnnouncementDialog";
 import { RouterButton } from "../components/RouterButton";
 import { useBoolean } from "../components/use-boolean";
-import { useAnnouncementsQuery, useDeleteAnnouncementMutation } from "../hooks";
+import { useAnnouncementsQuery } from "../hooks";
 import type { Announcement } from "../services";
 
 export const Route = createFileRoute("/")({
@@ -15,8 +15,6 @@ export const Route = createFileRoute("/")({
 function RouteComponent() {
 	const announcementsQuery = useAnnouncementsQuery();
 
-	const deleteAnnouncementMutation = useDeleteAnnouncementMutation();
-
 	// delete confirmation dialog status
 	const [
 		isDeleteConfirmationOpen,
@@ -39,18 +37,6 @@ function RouteComponent() {
 		[openDeleteConfirmationDialog],
 	);
 
-	const confirmDelete = useCallback(() => {
-		closeDeleteConfirmation();
-		if (announcementForLatestDeleteAttempt === undefined) {
-			throw new Error("Cannot delete announcement without an attempt set.");
-		}
-		deleteAnnouncementMutation.mutate(announcementForLatestDeleteAttempt?.id);
-	}, [
-		announcementForLatestDeleteAttempt,
-		closeDeleteConfirmation,
-		deleteAnnouncementMutation.mutate,
-	]);
-
 	// handle loading / error / show values
 	return (
 		<Box sx={{ flexDirection: "column", display: "flex", gap: "3em" }}>
@@ -75,8 +61,7 @@ function RouteComponent() {
 					{announcementForLatestDeleteAttempt && (
 						<DeleteAnnouncementDialog
 							announcement={announcementForLatestDeleteAttempt}
-							confirmDelete={confirmDelete}
-							denyDelete={closeDeleteConfirmation}
+							closeDeleteConfirmation={closeDeleteConfirmation}
 							isDeleteConfirmationOpen={isDeleteConfirmationOpen}
 						/>
 					)}