london-10-shadi-fakhri-full-stack-project

.gitignore

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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

client/.gitignore

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

client/package.json

@@ -3,13 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.6",
+    "@mui/material": "^5.14.6",
+    "@mui/styled-engine-sc": "^5.14.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.1.10",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "^5.0.0",
+    "styled-components": "^5.3.11",
+    "express": "^4.18.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

client/src/App.css

@@ -1,3 +1,132 @@
 .App {
   text-align: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #55BCC9;
 }
+
+.nav{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #97CAEF;
+  height: 40px;
+  margin-top: 10px;
+}
+.orderBtn{
+  display: flex;
+  background-color: transparent;
+  margin: 5px;
+  font-weight: bold;
+
+}
+.orderBtn p{
+  background-color: transparent;
+  color: #FC4445;
+}
+.orderBtn button{
+  background-color:  transparent;
+  border-radius: 5px;
+  border-style: none;
+  color:black;
+  height: 20px;
+  text-align: center;
+  font-weight: bold;
+}
+.orderBtn button:active {
+  color: aliceblue;
+}
+.main{
+  width: 800px;
+}
+div{
+  background-color: #55BCC9;
+}
+p{
+  background-color: #55BCC9;
+  color: black;
+}
+button{
+  background-color:  #FC4445;
+  border-radius: 5px;
+  border-style: none;
+  color:aliceblue ;
+}
+iframe{
+  border-radius: 5px;
+  height: 100%;
+}
+
+.formDiv {
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: center;
+  width: 100vh; 
+  height: 30vh; 
+}
+
+
+.input-group {
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+background-color: #3FEEE6;
+}
+
+#url.lineInput{
+ margin-left: 10px;
+ background-color:#3FEEE6;                 
+ border: none;
+ border-bottom: 1px solid #FC4445; 
+ outline: none;
+ padding: 5px;
+}
+#title.lineInput{
+ margin-left: 10px;
+ background-color:#3FEEE6 ;                 
+ border: none;
+ border-bottom: 1px solid #FC4445; 
+ outline: none;
+ padding: 5px;
+
+}
+
+.input-group label {
+  margin-bottom: 5px;
+  color: #FC4445;
+  font-weight: bold ;
+
+}
+.addCancelBtn{
+  display: flex;
+  justify-content: space-between;
+}
+.addCancelBtn button{
+  margin: 20px;
+}
+.showVideo{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.btnShowVideo{
+  margin: 10px;
+  border-radius: 5px;
+}
+.mainShowVideos{
+  display: grid;
+  width: 100 vh;
+  grid-template-columns: repeat(3,1fr);
+  grid-template-rows: auto;
+  gap: 20px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.thumbBtn{
+  background-color: transparent;
+  border: none;
+}

client/src/App.js

@@ -1,12 +1,92 @@
+import React, {useState } from "react";
+import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom"; 
+
 import "./App.css";
+import Videos from "./Videos.js";
 
 function App() {
+
+  const [showVideos, setShowVideos] = useState(false);
+   const [loadData, setLoadData] = useState([]);
+
+  async function aseClickHandler(e) {
+     e.preventDefault();
+      try {
+        const response = await fetch(
+          "https://web-server-5nme.onrender.com/videos"
+        );
+        if (!response.ok) {
+          throw new Error("something went wrong");
+        }
+        const data = await response.json();
+        //asending acording to the rating
+        data.sort((a, b) => a.rating - b.rating);
+        return setLoadData(data);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+  }
+
+async function descClickHandler(e) {
+  e.preventDefault();
+  try {
+    const response = await fetch("https://web-server-5nme.onrender.com/videos");
+    if (!response.ok) {
+      throw new Error("something went wrong");
+    }
+    const data = await response.json();
+    //asending acording to the rating
+    data.sort((a, b) => b.rating - a.rating);
+    return setLoadData(data);
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+}
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Video Recommendation</h1>
-      </header>
-    </div>
+    <Router>
+      <div className="App">
+        <header className="appHeader">
+          <h1 style={{ background: "#97CAEF", color: "black" }}>
+            Video Recommendation
+          </h1>
+        </header>
+        <nav className="nav">
+          <div className="orderBtn">
+            <p>order by rate : </p>
+            <button onClick={aseClickHandler}>ase</button>
+            <button onClick={descClickHandler}>desc</button>
+          </div>
+          <div style={{ backgroundColor: "#55BCC9" }}></div>
+          <Link
+            to="/videos"
+            style={{
+              color: "#FC4445",
+              marginLeft: 20,
+              textDecoration: "none",
+              fontWeight: "bold",
+            }}
+            onClick={() => setShowVideos(true)}
+          >
+            Videos
+          </Link>
+        </nav>
+        <Routes>
+          {" "}
+          <Route
+            path="/videos"
+            element={
+              <Videos
+                show={showVideos}
+                setShow={setShowVideos}
+                loadData={loadData}
+                setLoadData={setLoadData}
+              />
+            }
+          />
+        </Routes>
+      </div>
+    </Router>
   );
 }