Toggling posted and deleting

ppq-frontend/src/Card.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 
+import axios from "axios";
 import { NavLink, Link } from "react-router";
 
 type CardProps = {
@@ -9,6 +10,8 @@ type CardProps = {
 	contributor: string;
 	uuid: string;
 	filepath: string;
+	posted: boolean;
+	handleDelete: (uuid) => void;
 };
 
 export const Card = ({
@@ -18,14 +21,30 @@ export const Card = ({
 	contributor,
 	uuid,
 	filepath,
+	posted,
+	handleDelete,
 }: CardProps) => {
 	const [showMenu, setShowMenu] = useState<boolean>(false);
+	const [cardPosted, setCardPosted] = useState<boolean>(posted);
+
+	const handleMarkPosted = () => {
+		setCardPosted(!cardPosted);
+		axios.post(`/api/pictures/post?uuid=${uuid}`);
+	};
+
 	console.log(filepath);
 	return (
 		<div className="flex flex-row justify-center grow">
 			<div className="rounded-xl shadow-xl max-w-96 sm:min-width-full md:min-width-full p-8 border border-solid border-stone-100 bg-neutral-100">
 				<img className="pb-4" src={"/uploads/" + filepath} />
-				<p className="font-bold text-xl">{title}</p>
+				<p className="font-bold text-xl">
+					{title}{" "}
+					{cardPosted && (
+						<span className="p-1 bg-red-300 rounded-lg">
+							posted
+						</span>
+					)}
+				</p>
 				<p className="text-lg italic">
 					submitted {timestamp} by{" "}
 					<span className="font-bold">{contributor}</span>
@@ -61,11 +80,22 @@ export const Card = ({
 									</p>
 								</div>
 							</Link>
-							<div className="bg-green-500 hover:bg-green-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
+							<div
+								className="bg-green-500 hover:bg-green-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center"
+								onClick={() => handleMarkPosted()}
+							>
 								<p className="font-bold text-xl text-neutral-50">
 									mark as posted
 								</p>
 							</div>
+							<div
+								className="bg-red-500 hover:bg-red-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center"
+								onClick={() => handleDelete(uuid)}
+							>
+								<p className="font-bold text-xl text-neutral-50">
+									Delete this post
+								</p>
+							</div>
 						</>
 					)}
 				</div>

ppq-frontend/src/ListPage.tsx

@@ -7,6 +7,11 @@ import { Card } from "./Card";
 export const ListPage = () => {
 	const [petPictures, setPetPictures] = useState([]);
 
+	const handleDelete = (uuid: str) => {
+		setPetPictures(petPictures.filter((post) => post.uuid != uuid));
+		axios.delete(`/api/pictures/${uuid}`);
+	};
+
 	useEffect(() => {
 		axios
 			.get("/api/pictures")
@@ -24,6 +29,8 @@ export const ListPage = () => {
 					timestamp={picture.created_at}
 					contributor={picture.contributor}
 					filepath={picture.filepath}
+					posted={picture.posted}
+					handleDelete={handleDelete}
 				/>
 			))}
 		</>