London-10_Saqib-Javed_full-stack_level_100_200_300

client/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

client/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^5.1.3",
+    "build": "^0.1.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.0",

client/src/App.css

@@ -1,3 +1,40 @@
 .App {
+
   text-align: center;
+  background-color: rgb(9, 12, 15);
+  color: azure;
 }
+h1{
+  font-family: fantasy;
+}
+
+.video-container{
+  padding: 150px auto;
+  margin: 50px;
+  font-family:fantasy;
+}
+.btn-del{
+  background-color: #f44336;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 12px;
+}
+.like, .dislike{
+ background-color: #555555;
+  color: white;
+  padding: 15px 32px;
+  margin:10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 12px;
+}
+
+.footer{
+  color: orange;
+  font-size:small;
+  padding-bottom: 5px;
+}

client/src/App.js

@@ -1,13 +1,24 @@
 import "./App.css";
+import React from 'react'
+import Footer from "./Components/Footer";
+import Videos from "./Components/Videos";
+
 
 function App() {
+
   return (
     <div className="App">
       <header className="App-header">
         <h1>Video Recommendation</h1>
+        <div>
+          <Videos />
+        </div>
       </header>
+      <Footer />
     </div>
   );
 }
 
 export default App;
+
+

client/src/Components/Footer.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+
+function Footer() {
+
+  return (
+    <div className="footer">
+     <p>Full Stack Assessment - created by Saqib Javed, London 10 CYF</p>
+     <p>Date: 18 August 2023</p>
+    </div>
+  );
+}
+
+export default Footer;

client/src/Components/NewVideo.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+
+function NewVideo(props) {
+
+
+  const [title, setTitle] = useState("");
+  const [url, setUrl] = useState("");
+  // const [newVideo, SetNewVideo] = useState({ title: "", url: "" });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (title && url) {
+
+      let updatedValue = {
+        title: title,
+        url: url,
+        id: Date.now(),
+        rating: 0,
+      };
+
+      props.onAddNewVideo(updatedValue)
+      setTitle("")
+      setUrl("")
+    }
+  };
+
+  return (
+    <div className="new-video">
+      <p>Add new video to your list</p>
+      <form className="form">
+        <label>
+          Title:{" "}
+          <input
+            type="text"
+            placeholder="enter title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+          />
+        </label>{" "}
+        <br></br>
+        <label>
+          URL:{" "}
+          <input
+            type="url"
+            placeholder="enter url address"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            required
+          />
+        </label>
+        <br></br>
+        <button type="submit" onClick={handleSubmit}>
+          Submit Video{" "}
+        </button>
+      </form>
+    </div>
+  );
+}
+export default NewVideo;

client/src/Components/VideoCard.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+
+function VideoCard(props) {
+
+  const {video, handleDelete} = props
+  const [rating, setRating] = useState(video.rating);
+
+  function like() {
+    setRating(rating + 1);
+  }
+
+  function dislike() {
+    setRating(rating - 1);
+  }
+
+    return (
+      <div>
+
+        <div></div>
+        <div key={video.id}>
+          <p>{video.title}</p>
+          <iframe
+            width="600"
+            height="400"
+            src={video.url.replace("watch?v=", "embed/")}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            title="Youtube Videos"
+            allowFullScreen
+          />
+          <p>RATINGS: {rating}</p>
+          <div>
+            <button onClick={like} className="like">
+              Like 👍🏼{" "}
+            </button>
+            <button onClick={dislike} className="dislike">
+              Dislike 👎🏻{" "}
+            </button>
+            <button className="btn-del" onClick={() => handleDelete(video.id)}>
+              Delete 🗑️
+            </button>
+          </div>
+          <hr></hr>
+        </div>
+      </div>
+    );
+  }
+
+
+export default VideoCard;

client/src/Components/Videos.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+// import videosData from "./exampleresponse.json";
+import VideoCard from "./VideoCard";
+import NewVideo from "./NewVideo";
+
+function Videos({ newVideos, handleSubmit }) {
+  const [videos, setVideos] = useState([]);
+
+  const url = "https://fullstack-backend-qwia.onrender.com/videos";
+
+    const getTheVideos = async () => {
+        try {
+            const res = await fetch(url);
+            const data = await res.json();
+            setVideos(data);
+
+        } catch (err) {
+            console.error(err.message);
+        }
+    }
+    useEffect(() => {
+        getTheVideos();
+    }, [])
+
+
+
+
+  const handleDelete = (id) => {
+    setVideos((prevVideosData) =>
+      prevVideosData.filter((video) => video.id !== id)
+    );
+  };
+
+  const addVideos = (video) => {
+    console.log("this is video", video);
+    setVideos([video, ...videos]);
+    console.log("in add videos", videos);
+  };
+
+  return (
+    <div>
+      <NewVideo
+        onAddNewVideo={addVideos}
+      />
+      <div className="video-container">
+        {videos &&
+          videos
+            .sort((a, b) => b.rating - a.rating)
+            .map((video) => {
+              return (
+                <VideoCard
+                  key={video.id}
+                  video={video}
+                  handleDelete={handleDelete}
+                  newVideos={newVideos}
+                  handleSubmit={handleSubmit}
+                />
+              );
+            })}
+      </div>
+    </div>
+  );
+}
+
+export default Videos;

client/src/Components/exampleresponse.json

@@ -0,0 +1,62 @@
+[
+  {
+    "id": 523523,
+    "title": "Never Gonna Give You Up",
+    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    "rating": 23
+  },
+  {
+    "id": 523427,
+    "title": "The Coding Train",
+    "url": "https://www.youtube.com/watch?v=HerCR8bw_GE",
+    "rating": 230
+  },
+  {
+    "id": 82653,
+    "title": "Mac & Cheese | Basics with Babish",
+    "url": "https://www.youtube.com/watch?v=FUeyrEN14Rk",
+    "rating": 2111
+  },
+  {
+    "id": 858566,
+    "title": "Videos for Cats to Watch - 8 Hour Bird Bonanza",
+    "url": "https://www.youtube.com/watch?v=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",
+    "rating": 3211
+  },
+  {
+    "id": 283634,
+    "title": "Learn Unity - Beginner's Game Development Course",
+    "url": "https://www.youtube.com/watch?v=gB1F9G0JXOo",
+    "rating": 211
+  },
+  {
+    "id": 562824,
+    "title": "Cracking Enigma in 2021 - Computerphile",
+    "url": "https://www.youtube.com/watch?v=RzWB5jL5RX0",
+    "rating": 111
+  },
+  {
+    "id": 442452,
+    "title": "Coding Adventure: Chess AI",
+    "url": "https://www.youtube.com/watch?v=U4ogK0MIzqk",
+    "rating": 671
+  },
+  {
+    "id": 536363,
+    "title": "Coding Adventure: Ant and Slime Simulations",
+    "url": "https://www.youtube.com/watch?v=X-iSQQgOd1A",
+    "rating": 76
+  },
+  {
+    "id": 323445,
+    "title": "Why the Tour de France is so brutal",
+    "url": "https://www.youtube.com/watch?v=ZacOS8NBK6U",
+    "rating": 73
+  }
+]