NW6 | Zeliha Pala | Full-Stack-Project | Week-2 | Embed videos

.github/workflows/enforce-linting.yml

@@ -4,7 +4,7 @@ run-name: Enforce lint passes on committed files
 
 on:
   workflow_dispatch:
-  #pull_request:
+  pull_request:
 
 jobs:
   run-linter:

.gitignore

@@ -4,4 +4,5 @@ e2e/playwright-report/
 e2e/test-results/
 node_modules/
 server/static/
+.DS_Store
 .env

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.

client/src/App.jsx

@@ -1,7 +1,12 @@
+import NewVideoForm from "./NewVideoForm.jsx";
+import VideoList from "./VideoRecommendations";
+
 const App = () => {
 	return (
 		<>
 			<h1>Video Recommendations</h1>
+    	<VideoList />
+       <NewVideoForm />
 		</>
 	);
 };

client/src/NewVideoForm.css

@@ -0,0 +1,56 @@
+/* CSS for NewVideoForm component */
+div {
+	max-width: fit-content;
+	margin: 0 auto;
+	padding: 20px;
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	background-color: #f9f9f9;
+}
+
+h2 {
+	text-align: center;
+	color: #333;
+	margin-bottom: 20px;
+}
+
+form {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 15px;
+}
+
+div > div {
+	flex-grow: 1; /* Allow elements to grow equally to fit the container */
+}
+
+label {
+	font-weight: bold;
+	margin-bottom: 5px;
+	color: #555;
+}
+
+input {
+	width: 100%; /* Make inputs fill the available space */
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	font-size: 16px;
+}
+
+button {
+	width: 100%; /* Make button fill the available space */
+	padding: 10px 20px;
+	border: none;
+	border-radius: 5px;
+	background-color: #007bff;
+	color: #fff;
+	font-size: 16px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+button:hover {
+	background-color: #0056b3;
+}

client/src/NewVideoForm.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+import "./NewVideoForm.css";
+const NewVideoForm = () => {
+	const [title, setTitle] = useState("");
+	const [src, setSrc] = useState("");
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+
+		fetch("/api/videos", {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ title, src }),
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(JSON.stringify(data));
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	};
+
+	return (
+		<div>
+			<h2>Add New Video</h2>
+			<form onSubmit={handleSubmit}>
+				<div>
+					<label htmlFor="title">Video Title: </label>
+					<input
+						type="text"
+						id="title"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						required
+					/>
+				</div>
+				<div>
+					<label htmlFor="src">Video URL: </label>
+					<input
+						type="url"
+						id="src"
+						value={src}
+						onChange={(e) => setSrc(e.target.value)}
+						required
+					/>
+				</div>
+				<button type="submit">Submit</button>
+			</form>
+		</div>
+	);
+};
+
+export default NewVideoForm;

client/src/VideoRecommendations.css

@@ -0,0 +1,33 @@
+.video-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 20px;
+}
+
+.video {
+	width: calc(50% - 20px); /* Adjust width of each video */
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	overflow: hidden; /* Ensure video containers don't overflow */
+	background-color: #f9f9f9;
+	font-family: Arial, sans-serif;
+}
+
+.video iframe {
+	width: 100%;
+	height: 200px; /* Adjust height of each video */
+	border: none;
+}
+
+a {
+	display: block;
+	padding: 20px;
+	color: #007bff;
+	font-family: Arial, sans-serif;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}

client/src/VideoRecommendations.jsx

@@ -0,0 +1,55 @@
+import "./VideoRecommendations.css";
+import React, { useState, useEffect } from "react";
+
+const VideoList = () => {
+	const [videos, setVideos] = useState([]);
+
+	useEffect(() => {
+		fetch("/api/videos", {
+			method: "GET",
+			headers: {
+				Accept: "application/json",
+			},
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(JSON.stringify(data));
+				setVideos(data);
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	}, []);
+
+	function changeYTLinkToEmbed(watchLink) {
+		const embedLink = watchLink.replace("watch?v=", "embed/");
+		return embedLink;
+	}
+
+	return (
+		<div className="video-list">
+			{videos.map((videoData, i) => {
+				const embededLink = changeYTLinkToEmbed(videoData.src);
+				return (
+					<div className="video" data-testid="video" key={i}>
+						<div>
+							<iframe
+								title={videoData.title}
+								width="560"
+								height="315"
+								src={embededLink}
+								frameBorder="0"
+								allowFullScreen
+							></iframe>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+	() => {
+		return askxjsnj;
+	};
+};
+
+export default VideoList;

data/example_response.json

@@ -2,16 +2,16 @@
 	{
 		"id": 1,
 		"title": "Never Gonna Give You Up",
-		"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+		"src": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
 	},
 	{
 		"id": 2,
 		"title": "The Coding Train",
-		"url": "https://www.youtube.com/watch?v=HerCR8bw_GE"
+		"src": "https://www.youtube.com/watch?v=HerCR8bw_GE"
 	},
 	{
 		"id": 3,
 		"title": "Mac & Cheese | Basics with Babish",
-		"url": "https://www.youtube.com/watch?v=FUeyrEN14Rk"
+		"src": "https://www.youtube.com/watch?v=FUeyrEN14Rk"
 	}
 ]

db/initdb.sql

@@ -3,9 +3,19 @@
 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');
--- you can insert more rows using example data from the example_data.csv file
+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');