react-7

Author: abhishekrathore

src/App.js

@@ -7,18 +7,32 @@ function App() {
   console.log('render App')
 
   const [videos,setVideos] = useState(videoDB);
+  const [editableVideo,setEditableVideo] = useState(null);
 
   function addVideos(video){
       setVideos([
             ...videos,
             {...video, id: videos.length+1}
           ]);
   }
+  function deleteVideo(id){
+    setVideos(videos.filter(video=>video.id!==id))
+  }
+  function editVideo(id){
+    setEditableVideo(videos.find(video=>video.id===id))
+  }
+
+  function updateVideo(video){
+    const index = videos.findIndex(v=>v.id===video.id)
+    const newVideos = [...videos]
+    newVideos.splice(index,1,video)
+    setVideos(newVideos)
+  }
 
   return (
     <div className="App" onClick={()=>console.log('App')}>
-       <AddVideo addVideos={addVideos}></AddVideo>
-       <VideoList videos={videos}></VideoList>
+       <AddVideo addVideos={addVideos} updateVideo={updateVideo} editableVideo={editableVideo}></AddVideo>
+       <VideoList deleteVideo={deleteVideo} editVideo={editVideo}  videos={videos}></VideoList>
 
 
     </div>

src/components/AddVideo.js

@@ -1,5 +1,5 @@
 import './AddVideo.css';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 const initialState = {
     time: '1 month ago',
@@ -9,12 +9,17 @@ const initialState = {
     views:''
   }
 
-function AddVideo({addVideos}) {
+function AddVideo({addVideos,updateVideo,editableVideo}) {
   const [video, setVideo] = useState(initialState);
 
   function handleSubmit(e) {
     e.preventDefault();
-    addVideos(video)
+    if(editableVideo){
+      updateVideo(video)
+    }else{
+      addVideos(video)
+    }
+    
     setVideo(initialState)
 
   }
@@ -24,6 +29,12 @@ function AddVideo({addVideos}) {
     })
   }
 
+  useEffect(()=>{
+    if(editableVideo){
+      setVideo(editableVideo)
+    }
+  },[editableVideo])
+
   return (
     <form>
       <input
@@ -43,7 +54,7 @@ function AddVideo({addVideos}) {
       <button
         onClick={handleSubmit}
       >
-        Add Video
+        {editableVideo?'Edit':'Add'} Video
       </button>
     </form>
   );

src/components/Video.css

@@ -7,6 +7,7 @@
     width:15em;
     margin: 0 0.2em;
     float: left;
+    position: relative;
 }
   .pic img{
     width: 100%;
@@ -24,4 +25,13 @@
 
   .views span{
     padding: 0 0.5em;
+  }
+
+  .close{
+    position: absolute;
+    right:0;
+  }
+  .edit{
+    position: absolute;
+    right:4em;
   }

src/components/Video.js

@@ -1,12 +1,14 @@
 import './Video.css';
 
-function Video({title,id,channel="Coder Dost",views,time,verified,children}) {
+function Video({title,id,channel="Coder Dost",views,time,verified,children,deleteVideo,editVideo}) {
   console.log('render Video')
 
 
   return (
       <>
       <div className='container'>
+      <button className='close' onClick={()=>deleteVideo(id)}>X</button>  
+      <button className='edit' onClick={()=>editVideo(id)}>Edit</button>  
       <div className="pic">
       <img src={`https://picsum.photos/id/${id}/160/90`} alt="Katherine Johnson" />
       </div>

src/components/VideoList.js

@@ -1,7 +1,7 @@
 import Video from "./Video";
 import PlayButton from "./PlayButton";
 
-function VideoList({videos}){
+function VideoList({videos,deleteVideo,editVideo}){
 
     return(
         <>
@@ -14,6 +14,8 @@ function VideoList({videos}){
               channel={video.channel}
               verified={video.verified}
               id={video.id}
+              deleteVideo={deleteVideo}
+              editVideo={editVideo}
             >
               <PlayButton
                 onPlay={() => console.log('Playing..',video.title)}