NW6 | Zeliha Pala | Full-Stack-Project | Week-2 | DELETE-A- Video-Recommendation

client/src/App.jsx

@@ -5,8 +5,8 @@ const App = () => {
 	return (
 		<>
 			<h1>Video Recommendations</h1>
-    	<VideoList />
-       <NewVideoForm />
+			<VideoList />
+			<NewVideoForm />
 		</>
 	);
 };

client/src/DeleteVideoRecommendation.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const DeleteVideoRecommendation = ({ videoId, onDelete }) => {
+	const handleDelete = () => {
+		fetch(`/api/videos/${videoId}`, {
+			method: "DELETE",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+		})
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to delete the video");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				onDelete(videoId);
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	};
+
+	return <button onClick={handleDelete}>Remove Video</button>;
+};
+
+export default DeleteVideoRecommendation;

client/src/NewVideoForm.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-
 import "./NewVideoForm.css";
+
 const NewVideoForm = () => {
 	const [title, setTitle] = useState("");
 	const [src, setSrc] = useState("");
@@ -26,10 +26,10 @@ const NewVideoForm = () => {
 	};
 
 	return (
-		<div>
-			<h2>Add New Video</h2>
-			<form onSubmit={handleSubmit}>
-				<div>
+		<div className="form-container">
+			<h2 className="form-header">Add New Video</h2>
+			<form className="form-body" onSubmit={handleSubmit}>
+				<div className="input-group">
 					<label htmlFor="title">Video Title: </label>
 					<input
 						type="text"
@@ -39,7 +39,7 @@ const NewVideoForm = () => {
 						required
 					/>
 				</div>
-				<div>
+				<div className="input-group">
 					<label htmlFor="src">Video URL: </label>
 					<input
 						type="url"
@@ -49,7 +49,9 @@ const NewVideoForm = () => {
 						required
 					/>
 				</div>
-				<button type="submit">Submit</button>
+				<button className="submit-button" type="submit">
+					Submit
+				</button>
 			</form>
 		</div>
 	);

client/src/VideoRecommendations.jsx

@@ -1,5 +1,6 @@
-import "./VideoRecommendations.css";
 import React, { useState, useEffect } from "react";
+import "./VideoRecommendations.css";
+import DeleteVideoRecommendation from "./DeleteVideoRecommendation";
 
 const VideoList = () => {
 	const [videos, setVideos] = useState([]);
@@ -21,14 +22,21 @@ const VideoList = () => {
 			});
 	}, []);
 
+	const handleDelete = (videoId) => {
+		setVideos(videos.filter((video) => video.id !== videoId));
+	};
+
 	return (
 		<div className="video-list">
 			{videos.map((videoData, i) => (
 				<div className="video" data-testid="video" key={i}>
 					<div>
-						{/* <a>{videoData.title}</a> */}
 						<a href={videoData.src}>{videoData.title}</a>
 					</div>
+					<DeleteVideoRecommendation
+						videoId={videoData.id}
+						onDelete={handleDelete}
+					/>
 				</div>
 			))}
 		</div>

server/api.js

@@ -27,4 +27,19 @@ router.post("/videos", async (req, res) => {
 	res.status(200).json({ success: true, data: { id: newVideoId } });
 });
 
+router.delete("/videos/:id", async (req, res) => {
+	const videoId = req.params.id;
+
+	try {
+		await db.query("DELETE FROM videos WHERE id = $1", [videoId]);
+		res
+			.status(200)
+			.json({ success: true, message: "Video deleted successfully" });
+	} catch (error) {
+		res
+			.status(500)
+			.json({ success: false, error: "Failed to delete the video" });
+	}
+});
+
 export default router;