CodeYourFuture · ElenaBarker · Aug 26, 2023 · Aug 30, 2023 · Sep 1, 2023 · Sep 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+server/node_modules
+client/node_modules
+server/.env
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.1.10",

diff --git a/client/public/index.html b/client/public/index.html
@@ -32,6 +32,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
     <title>React App</title>
   </head>
   <body>

diff --git a/client/src/AddVideo.js b/client/src/AddVideo.js
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+
+const AddVideo = ({ onAddVideo }) => {
+  const [title, setTitle] = useState("");
+  const [url, setUrl] = useState("");
+
+  const clearForm = () => {
+    setTitle("");
+    setUrl("");
+  };
+
+  const isYouTubeURL = (inputURL) => {
+    const youTubePattern = /^https:\/\/www.youtube.com\/watch\?v=.+$/;
+    return youTubePattern.test(inputURL);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (isYouTubeURL(url)) {
+      onAddVideo(title, url, clearForm);
+    } else {
+      alert("Please enter a valid YouTube URL");
+      clearForm();
+    }
+  };
+
+  return (
+    <div className="add-video">
+      <h3>Add a Video</h3>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          placeholder="Title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="URL"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+        <button type="submit">Add Video</button>{" "}
+      </form>
+    </div>
+  );
+};
+
+
+export default AddVideo;
diff --git a/client/src/App.css b/client/src/App.css
@@ -1,3 +1,4 @@
 .App {
   text-align: center;
+
 }
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,13 +1,81 @@
 import "./App.css";
+import React, { useEffect, useState } from "react";
+import Video from "./Video";
+import AddVideo from "./AddVideo";
+
+const App = () => {
+  const [videos, setVideos] = useState([]);
+
+  useEffect(() => {
+    fetchAllVideos();
+  }, []);
+
+  const fetchAllVideos = async () => {
+    try {
+      const response = await fetch(
+        "https://full-stack-project-video-reccomendations.onrender.com/videos"
+      );
+      if (!response.ok) {
+        throw Error(`Failed to fetch. Error: ${response.status}`);
+      }
+      const data = await response.json();
+      setVideos(data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleAddVideo = async (title, url, clearForm) => {
+    try {
+      const response = await fetch(
+        "https://full-stack-project-video-reccomendations.onrender.com/videos",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ title, url, rating: 0 }),
+        }
+      );
+      if (!response.ok) {
+        throw Error(`Failed to add video. Error: ${response.status}`);
+      }
+      await fetchAllVideos();
+      clearForm();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleDeleteVideo = async (id) => {
+    try {
+      const response = await fetch(
+        `https://full-stack-project-video-reccomendations.onrender.com/videos/${id}`,
+        {
+          method: "DELETE",
+        }
+      );
+      if (!response.ok) {
+        throw new Error("Video not found!");
+      }
+      await fetchAllVideos();
+    } catch (error) {
+      console.log(error.message);
+    }
+  };
 
-function App() {
   return (
     <div className="App">
       <header className="App-header">
         <h1>Video Recommendation</h1>
       </header>
+      {videos.map((video) => (
+        <Video key={video.id} video={video} onDeleteVideo={handleDeleteVideo} />
+      ))}
+
+      <AddVideo onAddVideo={handleAddVideo} />
     </div>
   );
-}
+};
 
 export default App;
diff --git a/client/src/CountVotes.js b/client/src/CountVotes.js
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import ThumbUp from "@material-ui/icons/ThumbUp";
+import ThumbDown from "@material-ui/icons/ThumbDown";
+
+const CountVotes = () => {
+  const [likeCount, setLikeCount] = useState(0);
+  const [dislikeCount, setDislikeCount] = useState(0);
+  const [activeButton, setActiveButton] = useState("none");
+
+  const handleLikeClick = () => {
+    if (activeButton === "none") {
+      setLikeCount(likeCount + 1);
+      setActiveButton("like");
+      return;
+    }
+
+    if (activeButton === "like") {
+      setLikeCount(likeCount - 1);
+      setActiveButton("none");
+      return;
+    }
+
+    if (activeButton === "dislike") {
+      setLikeCount(likeCount + 1);
+      setDislikeCount(dislikeCount - 1);
+      setActiveButton("like");
+    }
+  };
+  const handleDislikeClick = () => {
+    if (activeButton === "none") {
+      setDislikeCount(dislikeCount + 1);
+      setActiveButton("dislike");
+      return;
+    }
+    if (activeButton === "dislike") {
+      setDislikeCount(dislikeCount - 1);
+      setActiveButton("none");
+      return;
+    }
+    if (activeButton === "like") {
+      setDislikeCount(dislikeCount + 1);
+      setLikeCount(likeCount - 1);
+      setActiveButton("dislike");
+    }
+  };
+  return (
+    <div className="main-container">
+      <div className="button-container">
+        <button
+          className={`button ${activeButton === "like" ? "like-active" : ""}`}
+          onClick={handleLikeClick}
+        >
+          <ThumbUp />
+          Like {likeCount}
+        </button>
+
+        <button
+          className={`button ${
+            activeButton === "dislike" ? "dislike-active" : ""
+          }`}
+          onClick={handleDislikeClick}
+        >
+          <ThumbDown />
+          Dislike {dislikeCount}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CountVotes;
diff --git a/client/src/Data.js b/client/src/Data.js
@@ -0,0 +1,63 @@
+export const videosData = [
+  {
+    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,
+  },
+];
diff --git a/client/src/Video.js b/client/src/Video.js
@@ -0,0 +1,31 @@
+import React from "react";
+import CountVotes from "./CountVotes.js";
+
+const Video = ({ video, onDeleteVideo }) => {
+  let videoID = video.url.split("=")[1];
+  const handleDelete = () => {
+    onDeleteVideo(video.id);
+  };
+  return (
+    <div className="video">
+      <h3>{video.title}</h3>
+      <iframe
+        width="560"
+        height="315"
+        src={`https://www.youtube.com/embed/${videoID}`}
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+
+      <p> {video.votes}</p>
+      <CountVotes />
+      <button className="button" onClick={handleDelete}>
+        Delete
+      </button>
+    </div>
+  );
+};
+
+export default Video;
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,7 @@ @@
           work correctly both with client-side routing and a non-root public URL.
           Learn how to configure a non-root public URL by running `npm run build`.
         -->
         <title>React App</title>
       </head>
       <body>
@@ Expand Down @@