NW5 Manchester - Doris Siu - SQL - Week 1

.gitignore

@@ -0,0 +1 @@
+node_modules

client/src/AddVideo.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+export default function AddVideo({ addVideo }) {
+  let [input, setInput] = useState({
+    title: "",
+    url: "",
+    rating: 0,
+  });
+
+  const handleChange = (e) => {
+    setInput({ ...input, [e.target.name]: e.target.value });
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    input.id = uuidv4();
+    addVideo(input);
+  };
+
+  function uuidv4() {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+      (
+        c ^
+        (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+      ).toString(16)
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div>
+        <h3>Add a video</h3>
+        <label>Title:</label>
+        <input
+          id="title"
+          type="text"
+          name="title"
+          value={input.title}
+          onChange={handleChange}
+          required
+        />
+        <label>URL:</label>
+        <input
+          id="url"
+          type="text"
+          name="url"
+          value={input.url}
+          onChange={handleChange}
+          required
+        />
+        <button type="submit" className="btn btn-primary">
+          Add
+        </button>
+      </div>
+    </form>
+  );
+}

client/src/App.css

@@ -1,3 +1,18 @@
 .App {
   text-align: center;
 }
+
+.grid-container {
+  display: grid;
+  margin: 20px;
+  gap: 50px 0px;
+  grid-template-columns: auto auto auto auto;
+}
+
+button, input {
+  margin: 10px;
+}
+
+h3 {
+  color: red;
+}

client/src/App.js

@@ -1,11 +1,27 @@
 import "./App.css";
+import React, { useState } from "react";
+import VideoCards from "./VideoCards";
+import AddVideo from "./AddVideo";
+import data from "./exampleresponse.json";
 
 function App() {
+  let [videos, setVideos] = useState(data);
+
+  function addVideo(video) {
+    setVideos([...videos, video]);
+  }
+
+  function removeVideo(id) {
+    setVideos(videos.filter((video) => video.id !== id));
+  }
+
   return (
     <div className="App">
       <header className="App-header">
         <h1>Video Recommendation</h1>
       </header>
+      <AddVideo addVideo={addVideo} />
+      <VideoCards videoList={videos} removeVideo={removeVideo} />
     </div>
   );
 }

client/src/Rating.js

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export default function Rating({ rating }) {
+  let [rate, setRate] = useState(rating);
+  function incrementRate() {
+    setRate(rate + 1);
+  }
+  function decrementRate() {
+    setRate(rate - 1);
+  }
+
+  return (
+    <div>
+      Rating: {rate}
+      <br />
+      <button type="button" className="btn btn-primary" onClick={incrementRate}>
+        Up Vote
+      </button>
+      <button type="button" className="btn btn-primary" onClick={decrementRate}>
+        Down Vote
+      </button>
+    </div>
+  );
+}

client/src/VideoCards.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Rating from "./Rating";
+
+export default function VideoCards({ videoList, removeVideo }) {
+  return (
+    <div className="grid-container">
+      {videoList.map((element, index) => (
+        <span key={index} className="card">
+          <iframe
+            width="560"
+            height="315"
+            src={
+              "https://www.youtube.com/embed/" +
+              element.url.replace("https://www.youtube.com/watch?v=", "")
+            }
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>{" "}
+          <div className="card-body">
+            <h4>{element.title}</h4>
+            <Rating rating={element.rating} />
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => {
+                removeVideo(element.id);
+              }}
+            >
+              Remove video
+            </button>
+          </div>
+        </span>
+      ))}
+    </div>
+  );
+}

exampleresponse.json → client/src/exampleresponse.json

@@ -3,60 +3,70 @@
     "id": 523523,
     "title": "Never Gonna Give You Up",
     "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    "vid": "dQw4w9WgXcQ",
     "rating": 23
   },
   {
     "id": 523427,
     "title": "The Coding Train",
     "url": "https://www.youtube.com/watch?v=HerCR8bw_GE",
+    "vid": "HerCR8bw_GE",
     "rating": 230
   },
   {
     "id": 82653,
     "title": "Mac & Cheese | Basics with Babish",
     "url": "https://www.youtube.com/watch?v=FUeyrEN14Rk",
+    "vid": "FUeyrEN14Rk",
     "rating": 2111
   },
   {
     "id": 858566,
     "title": "Videos for Cats to Watch - 8 Hour Bird Bonanza",
     "url": "https://www.youtube.com/watch?v=xbs7FT7dXYc",
+    "vid": "xbs7FT7dXYc",
     "rating": 11
   },
   {
     "id": 453538,
     "title": "The Complete London 2012 Opening Ceremony | London 2012 Olympic Games",
     "url": "https://www.youtube.com/watch?v=4As0e4de-rI",
+    "vid": "4As0e4de-rI",
     "rating": 3211
   },
   {
     "id": 283634,
     "title": "Learn Unity - Beginner's Game Development Course",
     "url": "https://www.youtube.com/watch?v=gB1F9G0JXOo",
+    "vid": "gB1F9G0JXOo",
     "rating": 211
   },
   {
     "id": 562824,
     "title": "Cracking Enigma in 2021 - Computerphile",
     "url": "https://www.youtube.com/watch?v=RzWB5jL5RX0",
+    "vid": "RzWB5jL5RX0",
     "rating": 111
   },
   {
     "id": 442452,
     "title": "Coding Adventure: Chess AI",
     "url": "https://www.youtube.com/watch?v=U4ogK0MIzqk",
+    "vid": "U4ogK0MIzqk",
     "rating": 671
   },
   {
     "id": 536363,
     "title": "Coding Adventure: Ant and Slime Simulations",
     "url": "https://www.youtube.com/watch?v=X-iSQQgOd1A",
+    "vid": "X-iSQQgOd1A",
     "rating": 76
   },
   {
     "id": 323445,
     "title": "Why the Tour de France is so brutal",
     "url": "https://www.youtube.com/watch?v=ZacOS8NBK6U",
+    "vid": "ZacOS8NBK6U",
     "rating": 73
   }
 ]