From 860330bc6da1ea54420e63cb5aa1dbd5be6da9f1 Mon Sep 17 00:00:00 2001
From: saqibjvd <70890519+saqibjvd@users.noreply.github.com>
Date: Sun, 27 Aug 2023 11:39:45 +0100
Subject: [PATCH 01/12] full stack - level 100
level 100 WIP
---
client/.gitignore | 1 +
client/src/App.css | 37 +
client/src/App.js | 10 +
client/src/Components/Button.js | 32 +
client/src/Components/Footer.js | 14 +
client/src/Components/NewVideo.js | 54 +
client/src/Components/Video.js | 51 +
client/src/Components/exampleresponse.json | 62 +
client/yarn.lock | 14715 ++++++++++---------
server/.gitignore | 1 +
10 files changed, 7622 insertions(+), 7355 deletions(-)
create mode 100644 client/.gitignore
create mode 100644 client/src/Components/Button.js
create mode 100644 client/src/Components/Footer.js
create mode 100644 client/src/Components/NewVideo.js
create mode 100644 client/src/Components/Video.js
create mode 100644 client/src/Components/exampleresponse.json
create mode 100644 server/.gitignore
diff --git a/client/.gitignore b/client/.gitignore
new file mode 100644
index 0000000000..b512c09d47
--- /dev/null
+++ b/client/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/client/src/App.css b/client/src/App.css
index 493161332b..6c54108e7d 100644
--- a/client/src/App.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/src/App.js b/client/src/App.js
index bcf61b17da..03ec621080 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,13 +1,23 @@
import "./App.css";
+import Footer from "./Components/Footer";
+import NewVideo from "./Components/NewVideo";
+import Video from "./Components/Video";
function App() {
return (
Video Recommendation
+
+
+
+
+
);
}
export default App;
+
+
diff --git a/client/src/Components/Button.js b/client/src/Components/Button.js
new file mode 100644
index 0000000000..74ca76e2af
--- /dev/null
+++ b/client/src/Components/Button.js
@@ -0,0 +1,32 @@
+import React, {useState} from "react";
+
+function Button({video}) {
+
+const [upCount, setUpCount] = useState(0);
+ const [downCount, setDownCount] = useState(0);
+
+
+ function like() {
+ // console.log(props.video);
+ video.rating += 1;
+ setUpCount(video.rating + 1)
+ }
+
+
+ function dislike() {
+ // console.log(props.video);
+ video.rating -= 1;
+ setDownCount(video.rating -1);
+ }
+
+
+ return (
+
+
+
+
+ );
+}
+
+
+export default Button;
diff --git a/client/src/Components/Footer.js b/client/src/Components/Footer.js
new file mode 100644
index 0000000000..3af48eaf2a
--- /dev/null
+++ b/client/src/Components/Footer.js
@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+
+
+function Footer() {
+
+ return (
+
+
Full Stack Assessment - created by Saqib Javed, London 10 CYF
+
Date: 18 August 2023
+
+
Add new video to your list
+
+
+
+ {videos && videos.sort((a , b) => b.rating - a.rating).map((video) => {
+ return (
+
+
{video.title}
+
+
+ RATINGS: {video.rating}
+
+
+ );
+ })}
+
+
Video Recommendation
-
-
+
diff --git a/client/src/Components/Button.js b/client/src/Components/Button.js
deleted file mode 100644
index 74ca76e2af..0000000000
--- a/client/src/Components/Button.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, {useState} from "react";
-
-function Button({video}) {
-
-const [upCount, setUpCount] = useState(0);
- const [downCount, setDownCount] = useState(0);
-
-
- function like() {
- // console.log(props.video);
- video.rating += 1;
- setUpCount(video.rating + 1)
- }
-
-
- function dislike() {
- // console.log(props.video);
- video.rating -= 1;
- setDownCount(video.rating -1);
- }
-
-
- return (
-
-
-
-
- );
-}
-
-
-export default Button;
diff --git a/client/src/Components/Video.js b/client/src/Components/Video.js
deleted file mode 100644
index 1a55554c19..0000000000
--- a/client/src/Components/Video.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useState } from "react";
-import videosData from "./exampleresponse.json";
-import Button from "./Button";
-
-
-function Video() {
-
- const [videos, setVideos] = useState(videosData);
- console.log(videos)
-
- const handleDelete = (id) => {
- console.log("im clicked")
- console.log(id)
- setVideos((prevVideosData) => prevVideosData.filter((video) => video.id !== id));
-
- };
-
- return (
-
-
- {videos && videos.sort((a , b) => b.rating - a.rating).map((video) => {
- return (
-
-
{video.title}
-
-
- RATINGS: {video.rating}
-
-
- );
- })}
-
-
+
{video.title}
+
+
+ RATINGS: {rating}
+
+
+
+
+
+
+
+
+
+ {videos &&
+ videos
+ .sort((a, b) => b.rating - a.rating)
+ .map((video) => {
+ return ;
+ })}
+
+
@@ -11,7 +14,7 @@ function App() {
-
+
);
}
diff --git a/client/src/Components/NewVideo.js b/client/src/Components/NewVideo.js
index 8e3e9497c7..63b630b184 100644
--- a/client/src/Components/NewVideo.js
+++ b/client/src/Components/NewVideo.js
@@ -1,52 +1,58 @@
import React, { useState } from "react";
+function NewVideo(props) {
+ // const { newVideos, handleNewVideo, handleSubmit} = props
-
-function NewVideo() {
-
- const [newVideos, SetNewVideos] = useState("");
- const[title, setTitle] = useState("");
+ const [title, setTitle] = useState("");
const [url, setUrl] = useState("");
-
- const handleNewVideo = (newVideos) => {
- SetNewVideos((prevVideosData) => [
- ...prevVideosData,
- { ...newVideos, id: Date.now(), rating: 0 },
- ]);
- };
+ const [newVideo, SetNewVideo] = useState({ title: "", url: "" });
const handleSubmit = (e) => {
e.preventDefault();
if (title && url) {
- SetNewVideos({ title, url });
- setTitle("");
- setUrl("");
+ // console.log("title and url", title, url);
+ let updatedValue = {
+ title: title,
+ url: url,
+ id: Date.now(),
+ rating: 0,
+ };
+ // console.log("updated value", updatedValue);
+ props.onAddNewVideo(updatedValue)
+ setTitle("")
+ setUrl("")
}
};
-
-
-
return (
Add new video to your list
-
);
diff --git a/client/src/Components/VideoCard.js b/client/src/Components/VideoCard.js
index db1736464e..1a113f5479 100644
--- a/client/src/Components/VideoCard.js
+++ b/client/src/Components/VideoCard.js
@@ -1,6 +1,9 @@
import React, { useState } from "react";
-function VideoCard({ video, handleDelete }) {
+
+function VideoCard(props) {
+
+ const {video, handleDelete} = props
const [rating, setRating] = useState(video.rating);
function like() {
@@ -11,30 +14,37 @@ function VideoCard({ video, handleDelete }) {
setRating(rating - 1);
}
- return (
-
-
-
{video.title}
-
-
- RATINGS: {rating}
-
+ return (
-
-
-
+
+
+
+
{video.title}
+
+
RATINGS: {rating}
+
+
+
+
+
+
+
-
-
+
{videos &&
videos
.sort((a, b) => b.rating - a.rating)
.map((video) => {
- return ;
+ return (
+
+ );
})}