update display videos

client/src/App.js

@@ -1,8 +1,8 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Nav from "./component/Nav";
 import Home from "./component/Home";
 import Videos from "./component/Videos";
-import Create from "./component/Create";
-import Nav from "./component/Nav";
+import CreateNewVideo from "./component/CreateNewVideo";
 import Login from "./component/Login";
 import SignUp from "./component/SignUp";
 import FooterComponent from "./component/FooterComponent";
@@ -16,7 +16,7 @@ function App() {
         <Routes>
           <Route path='/' element={<Home />}/>
           <Route path='/videos' element={<Videos />}/>
-          <Route path='/create' element={<Create />}/>
+          <Route path='/create' element={<CreateNewVideo />}/>
           <Route path='/login' element={<Login />}/>
           <Route path='/signUp' element={<SignUp />}/>
         </Routes>

client/src/component/CreateNewVideo.js

@@ -0,0 +1,45 @@
+import { React, useState } from 'react'
+import videosData from "../exampleresponse.json"
+
+const CreateNewVideo = () => {
+  const [videos, setVideos] = useState([...videosData])
+  const [title, setTitle] = useState("");
+  const [url, setUrl] = useState("");
+
+  const titleHandler = (e) => setTitle(e.target.value);
+  const urlHandler = (e) => setUrl(e.target.value);
+
+  const clickHandler = () => {
+    const newVid = {}
+    newVid.id = videosData.length + 1;
+    newVid.title = title;
+    newVid.url = url;
+
+    setVideos(videos.push(newVid));
+  }
+
+  return (
+    <div className="login-div">
+      <h1>Create New Video</h1>
+      <div className="login-box">
+        <form>
+          <div className="user-box">
+            <input type="" onChange={titleHandler} value={title} />
+            <label>Video Title</label>
+          </div>
+          <div className="user-box">
+            <input type="" onChange={urlHandler} value={url} />
+            <label>Url</label>
+          </div>
+          <center>
+            <button className="btn-submit" onCanPlay={clickHandler}>
+              SEND
+              <span></span>
+            </button>
+          </center>
+        </form>
+      </div>
+    </div>
+  );
+};
+export default CreateNewVideo

client/src/component/Login.js

@@ -16,7 +16,7 @@ const Login = () => {
       <div className="login-box">
         <form>
           <div className="user-box">
-            <input type="email" onChange={emailHandler} value={email} />
+            <input type="" onChange={emailHandler} value={email} />
             <label>Email</label>
           </div>
           <div className="user-box">

client/src/component/SignUp.js

@@ -23,18 +23,22 @@ const SignUp = () => {
             <label>Username</label>
           </div>
           <div className="user-box">
-            <input type="email" onChange={emailHandler} value={email} />
+            <input type="" onChange={emailHandler} value={email} />
             <label>Email</label>
           </div>
           <div className="user-box">
-            <input type="password" onChange={passwordHandler} value={password} />
+            <input
+              type="password"
+              onChange={passwordHandler}
+              value={password}
+            />
             <label>Password</label>
           </div>
           <center>
-              <button className="btn-submit" onCanPlay={clickHandler}>
-                  SUBMIT
+            <button className="btn-submit" onCanPlay={clickHandler}>
+              SUBMIT
               <span></span>
-              </button>
+            </button>
           </center>
         </form>
       </div>

client/src/component/Videos.js

@@ -1,6 +1,6 @@
 import React from "react";
 import videoData from "../exampleresponse.json";
-
+import ReactPlayer from "react-player/lazy";
 
 const Videos = () => {
 
@@ -10,9 +10,7 @@ const Videos = () => {
       <div className="vid-div">
         {videoData.map((video) => (
           <div key={video.id} className="video-card">
-            <video controls className="vid-size">
-              <source src={video.url} type="video/mp4" />
-            </video>
+            <ReactPlayer url={video.url} />
             <div>
               <h4>{video.title}</h4>
               <h4>{`Rating: ${video.rating}`}</h4>
@@ -24,11 +22,4 @@ const Videos = () => {
   );
 };
 
-export default Videos;
-
-// <div class="card">
-//     <h2>{video.title}</h2>
-//     <div className="video">
-//       <ReactPlayer url={video.url} controls={true} />
-//     </div>
-//   </div>
+export default Videos;