London10-AfshaHossain-FullStackProjectAssessment-Week2-Level 250

.gitignore

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

client/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+plan.drawio
+plan.md

client/package.json

@@ -10,8 +10,16 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.0",
+    "valid-url": "^1.0.9",
     "web-vitals": "^1.1.2"
   },
+  "devDependencies": {
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.28",
+    "prettier": "^3.0.2",
+    "prettier-plugin-tailwindcss": "^0.5.3",
+    "tailwindcss": "^3.3.3"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

client/plan.drawio

@@ -0,0 +1,53 @@
+<mxfile host="65bd71144e">
+    <diagram id="BdzzjRRzsWgrQ7JI_RHI" name="Page-1">
+        <mxGraphModel dx="529" dy="348" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="3" value="App.jsx&lt;br&gt;videoList, setVideoList as props" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="10" y="80" width="150" height="110" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="VideoList.jsx" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="200" y="80" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="VideoCard.jsx" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="200" y="200" width="90" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" value="" style="endArrow=classic;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4" target="5" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="240" y="310" as="sourcePoint"/>
+                        <mxPoint x="290" y="260" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="10" value="" style="endArrow=classic;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;" parent="1" source="3" target="4" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="240" y="310" as="sourcePoint"/>
+                        <mxPoint x="290" y="260" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="11" value="Main" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="80" y="360" width="90" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="16" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="12" target="13">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="12" value="100" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="80" y="460" width="80" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="13" value="200" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="80" y="550" width="80" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" value="200" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="205" y="360" width="80" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="15" value="" style="endArrow=classic;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="12">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="180" y="480" as="sourcePoint"/>
+                        <mxPoint x="230" y="430" as="targetPoint"/>
+                        <Array as="points"/>
+                    </mxGeometry>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

client/plan.md

@@ -0,0 +1,124 @@
+
+1. Videos should be loaded from a local javascript variable containing the data included in `exampleresponse.json`
+  ```json
+  {
+    "id": 523523,
+    "title": "Never Gonna Give You Up",
+    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    "rating": 23
+  },
+  ```
+    - Log `exampleresponse.json` into app to check data is arriving into frontend. ✅
+
+    - We will create a VideoCard component. This will contain a single videos data.✅
+    - Hardcode the VideoCard component with information from the object above.✅
+        * replace watch?v= with embed/;
+        * data.url.replace("watch?v=", "embed/");
+
+  **Notes** We will use props to send the data from exampleresponse.json file to our VideoList component
+
+2. For each video, display a React component that contains
+   - The videos title ✅
+   - An embedded video ✅
+   - The number of votes the video has ✅
+   - A button that when clicked removes the video ✅
+
+    - Create a VideoList component with videoList prop (which is state from app level) ✅
+    - We need to map through each of the objects from the state that we are passing as a single prop to the VideoList component ✅
+    - For each of these objects we are rendering a VideoCard component ✅
+    - Each VideoCard component will take the props [id={id}, title={title}, url={url}, rating={rating}] ✅
+
+3. On each video submission there should be two buttons
+  - "Up Vote" - This increases the vote score when clicked ✅
+  - "Down Vote" - This decreases the vote score when clicked ✅
+
+    - Hard code one button at time add state where necessary
+
+4. On the page there must be another React component that will add a Video.
+   - It should include fields to add a
+     - Title ✅
+     - Url ✅
+   - When a button is clicked the video should be added to the list ✅
+
+a. Create a VideoForm component ✅
+b. Create mock structure below ✅
+  ```html
+  <form>
+    <label for="title">
+      Please enter your video title below:
+      <input type="text" name="title" id="title" placeholder="Enter video title here" required/>
+    </label>
+    <label for="url">
+      Please enter your video url below:
+      <input type="url" name="url" id="url" placeholder="Enter video url here"/>
+    </label>
+    <button type="submit">Submit</button>
+  </form>
+  ```
+  notes: Check implementation above is correct
+
+
+
+5. Your website must follow accessibility guidelines (see below for more details)
+
+==========================================================
+
+  App.jsx
+
+  State variable to hold videoList (initial value will be the data we get from exampleresponse.json)
+
+    VideoList.jsx -> props will be [videoList={videoList}]
+      VideoCard.jsx -> props will be [id={id}, title={title}, url={url}, rating={rating}]
+    VideoForm.jsx -> props will be [videoList={videoList} setVideoList={setVideoList}]
+
+    State variable to hold information that will be updating the videoList state variable declared in App.jsx
+
+
+
+## Youtube URL
+embedded version:
+https://www.youtube.com/embed/lJIrF4YjHfQ
+watch version:
+https://www.youtube.com/watch?v=lJIrF4YjHfQ
+
+
+## Youtube URL from data
+embedded version:
+https://www.youtube.com/embed/dQw4w9WgXcQ
+watch version:
+https://www.youtube.com/watch?v=dQw4w9WgXcQ
+
+
+Helpful related articles:
+
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
+
+
+
+===========================================
+
+Make reusable button
+
+We will always need to hand down the following:
+
+- content (can be a text or icon; this goes between the button tags)
+- type attribute (eg. submit or delete)
+- onClickHandler
+- 
+
+=============================================
+
+ Validate URL Workings:
+
+     function validateUrl(urlObject) {
+      console.log(urlObject);
+      if (urlObject.protocol !== "https:") {
+        throw new Error("Protocol must be https:");
+      }
+      return true;
+      // return either validated URL or an error
+    }
+    //   const unValidatedTitle = event.target.form.title.value;
+    const unValidatedUrl = new URL(event.target.form.url.value);
+    //   const isValidated = validateUrl(unValidatedUrl);
+

client/prettier.config.cjs

@@ -0,0 +1,4 @@
+// prettier.config.js
+module.exports = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};

client/src/App.js

@@ -1,13 +1,17 @@
-import "./App.css";
+import React from "react";
+import MainContainer from "./components/MainContainer";
+import youtubeLogo from "./components/images/youtubeLogo.png";
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Video Recommendation</h1>
-      </header>
+    <div className="App text-left">
+      <div className="font-semi-bold flex flex-row justify-center pt-8 text-5xl">
+        <img src={youtubeLogo} alt="Logo" className="h-13 mx-7 w-20" />
+        <h1>Video Recommendations</h1>
+      </div>
+      <MainContainer />
     </div>
   );
-}
+};
 
 export default App;

client/src/components/Button.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+function Button({ onDelete, id }) {
+  return (
+    <button
+      onClick={() => onDelete(id)}
+      className="rounded bg-gray-200 p-2 text-lg font-bold"
+    >
+      Delete ❌
+    </button>
+  );
+}
+
+export default Button;

client/src/components/CardsContainer.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import VideoCard from "./VideoCard";
+
+function CardsContainer({ videoData, setVideoData, setFetchData }) {
+  async function handleDelete(id) {
+    fetch(`http://localhost:5000/videos/${id}`, {
+      method: "delete",
+    })
+      .then((response) => response.json())
+      .then((result) => console.log(result))
+      .catch((error) => console.log("error", error));
+    setFetchData(true);
+  }
+
+  return (
+    <div className="grid justify-center gap-9">
+      {videoData
+        ?.sort((a, b) => b.rating - a.rating)
+        .map((singleVideo) => {
+          return (
+            <VideoCard
+              key={singleVideo.id}
+              videoData={videoData}
+              singleVideo={singleVideo}
+              onDelete={handleDelete}
+              setVideoData={setVideoData}
+            />
+          );
+        })}
+    </div>
+  );
+}
+
+export default CardsContainer;

client/src/components/MainContainer.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import CardsContainer from "./CardsContainer";
+import VideoForm from "./VideoForm";
+
+function MainContainer() {
+  const [videoData, setVideoData] = useState();
+  const [fetchData, setFetchData] = useState(true);
+
+  useEffect(() => {
+    if (fetchData) {
+      fetch("http://localhost:5000/videos")
+        .then((response) => response.json())
+        .then((data) => setVideoData(data));
+    }
+    setFetchData(false);
+  }, [fetchData, videoData]);
+
+  return (
+    <div>
+      <VideoForm
+        setFetchData={setFetchData}
+        videoData={videoData}
+        setVideoData={setVideoData}
+      />
+      <CardsContainer
+        setFetchData={setFetchData}
+        videoData={videoData}
+        setVideoData={setVideoData}
+      />
+    </div>
+  );
+}
+
+export default MainContainer;