feat: show image

src/client/components/AnnouncementTable.tsx

@@ -23,6 +23,7 @@ export function AnnouncementTable({
 			<Table>
 				<TableHead>
 					<TableRow>
+						<TableCell />
 						<TableCell />
 						<TableCell>Title</TableCell>
 						<TableCell>Text</TableCell>

src/client/components/AnnouncementTableRow.tsx

@@ -1,6 +1,16 @@
 import DeleteIcon from "@mui/icons-material/Delete";
-import { IconButton, TableCell, TableRow } from "@mui/material";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import {
+	Collapse,
+	IconButton,
+	TableCell,
+	TableRow,
+	Typography,
+} from "@mui/material";
+import { Box } from "@mui/system";
 import type { Announcement } from "../services";
+import { useBoolean } from "./use-boolean";
 
 export interface AnnouncementTableRowProps {
 	announcement: Announcement;
@@ -11,8 +21,15 @@ export function AnnouncementTableRow({
 	openDeleteConfirmation,
 	announcement,
 }: AnnouncementTableRowProps) {
+	const [isOpen, { toggle }] = useBoolean();
 	return (
+		<>
 			<TableRow>
+				<TableCell>
+					<IconButton aria-label="expand row" size="small" onClick={toggle}>
+						{isOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+					</IconButton>
+				</TableCell>
 				<TableCell>{announcement.id}</TableCell>
 				<TableCell>{announcement.title}</TableCell>
 				<TableCell>
@@ -26,5 +43,19 @@ export function AnnouncementTableRow({
 					</IconButton>
 				</TableCell>
 			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+					<Collapse in={isOpen} timeout="auto" unmountOnExit>
+						<Box>
+							<Typography>Image:</Typography>
+							<img
+								src={`/images/${announcement.image}`}
+								alt={`${announcement.title}`}
+							/>
+						</Box>
+					</Collapse>
+				</TableCell>
+			</TableRow>
+		</>
 	);
 }

src/server/main.ts

@@ -76,6 +76,8 @@ app.delete("/api/announcements/:announcementId", async (req, res) => {
 	res.status(204).send();
 });
 
+app.use("/images", express.static(baseUploadsFolder));
+
 ViteExpress.listen(app, 3000, () =>
 	console.log("Server is listening on port 3000..."),
 );