CodeYourFuture · aishaathmanlali · May 20, 2024 · May 20, 2024 · May 20, 2024 · May 20, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.eslintrc → .eslintrc.json b/.eslintrc → .eslintrc.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -51,4 +51,4 @@ While you are free to use this codebase for your future projects we recommend ag
 
 For launch projects and future portfolio pieces, look at the [Code Your Future Starter Kit](https://github.com/CodeYourFuture/cyf-final-project-starter-kit). This assessment project is a simplified version of the starter kit, with a lot of the features removed to keep it light and more understandable. In fact, some of the challenges in this project are to re-add these features yourself, like support for linting.
 
-Since these features will already be present in the starter kit, it will be a much better starting point. And since it uses the same libraries and setup that you will learn here, you should feel immediately familiar with it. 
+Since these features will already be present in the starter kit, it will be a much better starting point. And since it uses the same libraries and setup that you will learn here, you should feel immediately familiar with it.
diff --git a/client/.DS_Store b/client/.DS_Store
diff --git a/client/index.html b/client/index.html
@@ -9,5 +9,6 @@
 	<body>
 		<div id="root"></div>
 		<script type="module" src="/src/index.jsx"></script>
+
 	</body>
 </html>
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,7 +1,12 @@
+import VideoForm from "./components/VideoForm";
+import Videos from "./components/Videos";
+
 const App = () => {
 	return (
 		<>
 			<h1>Video Recommendations</h1>
+			<Videos />
+
 		</>
 	);
 };

diff --git a/client/src/components/VideoForm.jsx b/client/src/components/VideoForm.jsx
@@ -0,0 +1,44 @@
+// components/VideoForm.js
+import { useState } from 'react';
+
+const VideoForm = ({ addVideo }) => {
+    const [title, setTitle] = useState('');
+    const [url, setUrl] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (title && url) {
+            addVideo({ title, src: url });
+            setTitle('');
+            setUrl('');
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div>
+                <label>Title:</label>
+                <input
+                    type="text"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    placeholder="Type your video"
+                    required
+                />
+            </div>
+            <div>
+                <label>YouTube URL:</label>
+                <input
+                    type="url"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    placeholder="URL"
+                    required
+                />
+            </div>
+            <button type="submit">Add New Video</button>
+        </form>
+    );
+};
+
+export default VideoForm;
diff --git a/client/src/components/Videos.jsx b/client/src/components/Videos.jsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import VideoForm from "./VideoForm";
+
+const Videos = () => {
+	const [videos, setVideos] = useState([]);
+
+	useEffect(() => {
+		const fetchVideos = async () => {
+			try {
+				const response = await fetch("/api/videos");
+				const data = await response.json();
+				setVideos(data.videos);
+				console.log(data);
+			} catch (error) {
+				console.error("Error fetching videos:", error);
+			}
+		};
+
+		fetchVideos();
+	}, []);
+
+	const addVideo = (video) => {
+		setVideos((prevVideos) => [...prevVideos, video]);
+	};
+
+	const deleteVideo = async (id) => {
+		try {
+			const response = await fetch(`/api/videos/${id}`, {
+				method: "DELETE",
+			});
+
+			if (response.status === 204) {
+				setVideos((prevVideos) =>
+					prevVideos.filter((video) => video.id !== id)
+				);
+			} else if (response.status === 404) {
+				console.error("Video not found");
+			} else {
+				console.error("Failed to delete video");
+			}
+		} catch (error) {
+			console.error("Error deleting video:", error);
+		}
+	};
+
+	return (
+		<div>
+			<h2>Video List</h2>
+			<VideoForm addVideo={addVideo} />
+
+			<ul>
+				{videos.map((video) => (
+					<li key={video.id}>
+						<a href={video.src} target="_blank" rel="noopener noreferrer">
+							{video.title}
+						</a>
+						<button onClick={() => deleteVideo(video.id)}>Delete</button>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};
+
+export default Videos;
diff --git a/data/example_data.csv b/data/example_data.csv
@@ -1,3 +1,4 @@
+"title","src"
 "Never Gonna Give You Up","https://www.youtube.com/watch?v=dQw4w9WgXcQ"
 "The Coding Train","https://www.youtube.com/watch?v=HerCR8bw_GE"
 "Mac & Cheese | Basics with Babish","https://www.youtube.com/watch?v=FUeyrEN14Rk"

diff --git a/db/initdb.sql b/db/initdb.sql
@@ -1,9 +1,21 @@
 DROP TABLE IF EXISTS videos CASCADE;
 
 CREATE TABLE videos (
+    id serial PRIMARY KEY,
     title VARCHAR,
     src VARCHAR
 );
 
 INSERT INTO videos (title,src) VALUES ('Never Gonna Give You Up','https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+INSERT INTO videos (title,src) VALUES ('The Coding Train','https://www.youtube.com/watch?v=HerCR8bw_GE');
+INSERT INTO videos (title,src) VALUES ('Mac & Cheese | Basics with Babish','https://www.youtube.com/watch?v=FUeyrEN14Rk');
+INSERT INTO videos (title,src) VALUES ('Videos for Cats to Watch - 8 Hour Bird Bonanza','https://www.youtube.com/watch?v=xbs7FT7dXYc');
+INSERT INTO videos (title,src) VALUES ('The Complete London 2012 Opening Ceremony | London 2012 Olympic Games','https://www.youtube.com/watch?v=4As0e4de-rI');
+INSERT INTO videos (title,src) VALUES ('Learn Unity - Beginner''s Game Development Course','https://www.youtube.com/watch?v=gB1F9G0JXOo');
+INSERT INTO videos (title,src) VALUES ('Cracking Enigma in 2021 - Computerphile','https://www.youtube.com/watch?v=RzWB5jL5RX0');
+INSERT INTO videos (title,src) VALUES ('Coding Adventure: Chess AI','https://www.youtube.com/watch?v=U4ogK0MIzqk');
+INSERT INTO videos (title,src) VALUES ('Coding Adventure: Ant and Slime Simulations','https://www.youtube.com/watch?v=X-iSQQgOd1A');
+INSERT INTO videos (title,src) VALUES ('Why the Tour de France is so brutal','https://www.youtube.com/watch?v=ZacOS8NBK6U');
+
+
 -- you can insert more rows using example data from the example_data.csv file
diff --git a/e2e/.DS_Store b/e2e/.DS_Store
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,4 +51,4 @@ While you are free to use this codebase for your future projects we recommend ag

		For launch projects and future portfolio pieces, look at the [Code Your Future Starter Kit](https://github.com/CodeYourFuture/cyf-final-project-starter-kit). This assessment project is a simplified version of the starter kit, with a lot of the features removed to keep it light and more understandable. In fact, some of the challenges in this project are to re-add these features yourself, like support for linting.

		Since these features will already be present in the starter kit, it will be a much better starting point. And since it uses the same libraries and setup that you will learn here, you should feel immediately familiar with it.
		Since these features will already be present in the starter kit, it will be a much better starting point. And since it uses the same libraries and setup that you will learn here, you should feel immediately familiar with it.
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,6 @@ @@
     	<body>
     		<div id="root"></div>
     		<script type="module" src="/src/index.jsx"></script>
     	</body>
     </html>