react-6

Author: abhishekrathore

src/App.js

@@ -1,53 +1,25 @@
 import { useState } from 'react';
 import './App.css';
-import Counter from './components/Counter';
-import PlayButton from './components/PlayButton';
-import Video from './components/Video';
+import AddVideo from './components/AddVideo';
 import videoDB from './data/data';
+import VideoList from './components/VideoList';
 function App() {
   console.log('render App')
 
   const [videos,setVideos] = useState(videoDB);
 
+  function addVideos(video){
+      setVideos([
+            ...videos,
+            {...video, id: videos.length+1}
+          ]);
+  }
+
   return (
     <div className="App" onClick={()=>console.log('App')}>
-      <div>
-        <button onClick={()=>{
-           setVideos( [...videos,{ id:videos.length+1,
-            title: 'Demo JS tutorial',
-            views: '1M',
-            time: '1 month ago',
-            channel: 'Coder Dost',
-            verified: true
-          }]);
-        }}>Add Video</button>
-      </div>
-      {videos.map((video) => (
-        <Video
-          key={video.id}
-          title={video.title}
-          views={video.views}
-          time={video.time}
-          channel={video.channel}
-          verified={video.verified}
-          id={video.id}
-        >
-          <PlayButton
-            onPlay={() => console.log('Playing..',video.title)}
-            onPause={() => console.log('Paused..',video.title)}
-          >
-            {video.title}
-          </PlayButton>
-        </Video>
-      ))}
-
-      <div style={{ clear: 'both' }}>
-        {/* <PlayButton message="play-msg" onPlay={()=>console.log('Play')} onPause={()=>console.log('Pause')}>Play</PlayButton> */}
-
-        {/* <PlayButton message="pause-msg" onSmash={()=>alert('Playyy')}>Pause</PlayButton> */}
-      </div>
+       <AddVideo addVideos={addVideos}></AddVideo>
+       <VideoList videos={videos}></VideoList>
 
-      <Counter></Counter>
 
     </div>
   );

src/components/AddVideo.css

@@ -0,0 +1,5 @@
+input{
+    display: block;
+    padding: 1em;
+    margin-bottom:10px;
+}

src/components/AddVideo.js

@@ -0,0 +1,52 @@
+import './AddVideo.css';
+import {useState} from 'react';
+
+const initialState = {
+    time: '1 month ago',
+    channel: 'Coder Dost',
+    verified: true,
+    title:'',
+    views:''
+  }
+
+function AddVideo({addVideos}) {
+  const [video, setVideo] = useState(initialState);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    addVideos(video)
+    setVideo(initialState)
+
+  }
+  function handleChange(e) {
+    setVideo({...video,
+        [e.target.name] : e.target.value
+    })
+  }
+
+  return (
+    <form>
+      <input
+        type="text"
+        name="title"
+        onChange={handleChange}
+        placeholder="title"
+        value={video.title}
+      />
+      <input
+        type="text"
+        name="views"
+        onChange={handleChange}
+        placeholder="views"
+        value={video.views}
+      />
+      <button
+        onClick={handleSubmit}
+      >
+        Add Video
+      </button>
+    </form>
+  );
+}
+
+export default AddVideo;

src/components/VideoList.js

@@ -0,0 +1,30 @@
+import Video from "./Video";
+import PlayButton from "./PlayButton";
+
+function VideoList({videos}){
+
+    return(
+        <>
+        {videos.map((video) => (
+            <Video
+              key={video.id}
+              title={video.title}
+              views={video.views}
+              time={video.time}
+              channel={video.channel}
+              verified={video.verified}
+              id={video.id}
+            >
+              <PlayButton
+                onPlay={() => console.log('Playing..',video.title)}
+                onPause={() => console.log('Paused..',video.title)}
+              >
+                {video.title}
+              </PlayButton>
+            </Video>
+          ))}
+          </>
+    )
+}
+
+export default VideoList