CodeYourFuture · KristinaDudnyk · Aug 27, 2023 · Aug 27, 2023 · Aug 27, 2023 · Aug 27, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+/client/node_modules
+/server/node_modules
+.DS_Store
+thumbs.db
+*.swp
+*.swo
+*.sublime*
+.vscode/
+.env
diff --git a/client/build/manifest.json b/client/build/manifest.json
@@ -0,0 +1,8 @@
+{
+  "short_name": "To Do App",
+  "name": "To Do App",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/client/build/robots.txt b/client/build/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/public/index.html b/client/public/index.html
@@ -32,7 +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>
+    <title>Fullstack Project Assessment</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/App.css b/client/src/App.css
@@ -1,3 +1,66 @@
 .App {
   text-align: center;
 }
+
+body {
+  background-color: rgb(199, 199, 199);
+}
+
+.toggle_container {
+  max-width: 1200px;
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+.checkbox {
+  display: inline-block;
+}
+
+.checkbox_inp {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  appearance: none;
+}
+
+.checkbox_span {
+  display: inline-block;
+  position: relative;
+  font-size: 18px;
+  padding: 8px 8px 8px 74px;
+}
+
+.checkbox_span::before {
+  content: "";
+  width: 60px;
+  height: 36px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 18px;
+  background-color: rgb(255, 255, 255);
+  transition: background-color 0.3s;
+}
+
+.checkbox_span::after {
+  display: block;
+  content: "";
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background-color: rgb(86, 206, 30);
+  left: 3px;
+  top: 3px;
+  transition: background-color 0.3s, left 0.3s;
+}
+
+.checkbox_inp:checked + .checkbox_span::before {
+  background-color: rgb(86, 206, 30);
+}
+
+.checkbox_inp:checked + .checkbox_span::after {
+  background-color: rgb(255, 255, 255);
+  left: 27px;
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,11 +1,19 @@
+import { useState } from "react";
 import "./App.css";
+import Header from "./Header";
+import DisplayVideos from "./DisplayVideos";
+import NewVivdeo from "./NewVideo";
 
 function App() {
+  const [refreshVideos, setRefreshVideos] = useState(false);
   return (
     <div className="App">
-      <header className="App-header">
-        <h1>Video Recommendation</h1>
-      </header>
+      <Header />
+      <NewVivdeo setRefreshVideos={setRefreshVideos} />
+      <DisplayVideos
+        setRefreshVideos={setRefreshVideos}
+        refreshVideos={refreshVideos}
+      />
     </div>
   );
 }

diff --git a/client/src/CardVideo.jsx b/client/src/CardVideo.jsx
@@ -0,0 +1,16 @@
+// import { useState } from "react";
+import UpdateRating from "./UpdateRating";
+import DeleteVideo from "./DeleteVideo";
+
+export default function CardVideo({ video, setRefreshVideos }) {
+  return (
+    <>
+      <div key={video.id}>
+        <h2>{video.title}</h2>
+        <iframe title={video.title} src={video.url} width="500" height="281" />
+        <UpdateRating video={video} />
+        <DeleteVideo setRefreshVideos={setRefreshVideos} video={video} />
+      </div>
+    </>
+  );
+}
diff --git a/client/src/DeleteVideo.jsx b/client/src/DeleteVideo.jsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+export default function DeleteVideo({ video, setRefreshVideos }) {
+  const [videoId] = useState(video.id);
+
+  // console.log(videoId);
+
+  async function handleDelete(event) {
+    // event.preventDefault();
+
+    try {
+      // console.log(videoId);
+
+      const response = await fetch(
+        `https://kristinadudnyk-fullstack-project.onrender.com/video/${videoId}`,
+        // `http://localhost:4500/video/${videoId}`
+        {
+          method: "DELETE",
+        }
+      );
+      // console.log(`http://localhost:4500/video/${videoId}`);
+
+      console.log("handleDelete response:", response);
+
+      const json = await response.json();
+      console.log("handleDelete json:", json);
+
+      // event.target.reset();
+
+      setRefreshVideos((prevRefreshVideos) => !prevRefreshVideos);
+    } catch (error) {
+      console.log("handleDelete error:", error);
+    }
+  }
+
+  return (
+    <div>
+      <button className="submit-button" onClick={handleDelete}>
+        DELETE
+      </button>
+    </div>
+  );
+}
diff --git a/client/src/DisplayVideos.jsx b/client/src/DisplayVideos.jsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+import CardVideo from "./CardVideo";
+import ToggleOrderOfVideos from "./ToggleOrderOfVideos";
+
+export default function DisplayVideos({ refreshVideos, setRefreshVideos }) {
+  const [videos, setVideos] = useState([]);
+
+  const fetchData = async () => {
+    try {
+      const response = await fetch(
+        `https://kristinadudnyk-fullstack-project.onrender.com/video`
+        // "http://localhost:4500/video"
+      );
+      const data = await response.json();
+      console.log("fetchData in Videos", data);
+      setVideos(data);
+    } catch (error) {
+      console.log("The ERROR occured in fetchData in DisplayVideos:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [refreshVideos]);
+
+  return (
+    <div className="videos-container">
+      <ToggleOrderOfVideos
+        refreshVideos={refreshVideos}
+        setVideos={setVideos}
+      />
+      {videos.map((video) => (
+        <CardVideo
+          key={video.id}
+          video={video}
+          setRefreshVideos={setRefreshVideos}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/Header.jsx b/client/src/Header.jsx
@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <header className="App-header">
+      <h1>Video Recommendation</h1>
+    </header>
+  );
+}