implemented react - 6

src/App.css

@@ -1,6 +1,6 @@
-
-.App{
+.App {
   background-color: #333;
-  width:100%;
-  height:100vh;
-}
+  width: 50%;
+  height: 100vh;
+  margin: 0 auto;
+}

src/App.js

@@ -6,21 +6,30 @@ import VideoList from './components/VideoList';
 function App() {
   console.log('render App')
 
-  const [videos,setVideos] = useState(videoDB);
+  const [videos, setVideos] = useState(videoDB);
+  const [editVideo, setEditVideo] = useState(null)
 
-  function addVideos(video){
-      setVideos([
-            ...videos,
-            {...video, id: videos.length+1}
-          ]);
+  function addVideos(video) {
+    setVideos([
+      ...videos,
+      { ...video, id: videos.length + 1 }
+    ]);
   }
 
-  return (
-    <div className="App" onClick={()=>console.log('App')}>
-       <AddVideo addVideos={addVideos}></AddVideo>
-       <VideoList videos={videos}></VideoList>
+  const editableVideo = (id) => {
+    let editVideo = videos.find(video => video.id === id)
+    setEditVideo(editVideo);
+  }
 
+  const updateVideo = (updatedVideo) => {
+    const newVideos = videos.map(video => video.id === updatedVideo.id ? updatedVideo : video);
+    setVideos([...newVideos])
+  }
 
+  return (
+    <div className="App" onClick={() => console.log('App')}>
+      <AddVideo addVideos={addVideos} editVideo={editVideo} setEditVideo={setEditVideo} updateVideo={updateVideo}></AddVideo>
+      <VideoList videos={videos} editableVideo={editableVideo}></VideoList>
     </div>
   );
 }

src/components/AddVideo.js

@@ -1,29 +1,40 @@
 import './AddVideo.css';
-import {useState} from 'react';
+import { useEffect, useState } from 'react';
 
 const initialState = {
-    time: '1 month ago',
-    channel: 'Coder Dost',
-    verified: true,
-    title:'',
-    views:''
-  }
+  time: '1 month ago',
+  channel: 'Coder Dost',
+  verified: true,
+  title: '',
+  views: ''
+}
 
-function AddVideo({addVideos}) {
-  const [video, setVideo] = useState(initialState);
+function AddVideo({ addVideos, editVideo, setEditVideo, updateVideo }) {
+  const [video, setVideo] = useState(editVideo || initialState);
+  setEditVideo(editVideo);
 
   function handleSubmit(e) {
     e.preventDefault();
-    addVideos(video)
+    if (editVideo) {
+      updateVideo(video)
+    } else {
+      addVideos(video)
+    }
     setVideo(initialState)
-
+    setEditVideo(null)
   }
+
   function handleChange(e) {
-    setVideo({...video,
-        [e.target.name] : e.target.value
+    setVideo({
+      ...video,
+      [e.target.name]: e.target.value
     })
   }
 
+  useEffect(() => {
+    if (editVideo) setVideo({ ...editVideo })
+  }, [editVideo])
+
   return (
     <form>
       <input
@@ -43,7 +54,7 @@ function AddVideo({addVideos}) {
       <button
         onClick={handleSubmit}
       >
-        Add Video
+        {editVideo ? 'Edit Video' : 'Add Video'}
       </button>
     </form>
   );

src/components/Video.css

@@ -1,27 +1,33 @@
-.dark{
-    background-color: gray;
-    color:white;
+.dark {
+  background-color: gray;
+  color: white;
 }
 
-.container{
-    width:15em;
-    margin: 0 0.2em;
-    float: left;
+.container {
+  width: 15em;
+  margin: 0 0.2em;
+  float: left;
+  position: relative;
+}
+.pic img {
+  width: 100%;
+}
+.title {
+  font-weight: bold;
+  margin-bottom: 1em;
+  color: white;
+}
+.channel,
+.views {
+  font-size: small;
+  color: #ccc;
+  margin-bottom: 0.2em;
+}
+
+.views span {
+  padding: 0 0.5em;
+}
+.edit {
+  position: absolute;
+  right: 0;
 }
-  .pic img{
-    width: 100%;
-  }
-  .title{
-    font-weight: bold;
-    margin-bottom: 1em;
-    color:white
-  }
-  .channel, .views{
-    font-size: small;
-    color:#ccc;
-    margin-bottom: 0.2em;
-  }
-
-  .views span{
-    padding: 0 0.5em;
-  }

src/components/Video.js

@@ -1,25 +1,26 @@
 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, editableVideo }) {
   console.log('render Video')
 
-  
+
   return (
-      <>
+    <>
       <div className='container'>
-      <div className="pic">
-      <img src={`https://picsum.photos/id/${id}/160/90`} alt="Katherine Johnson" />
-      </div>
-      <div className="title">{title}</div>
-      <div className="channel">{channel} {verified && '✅'} </div>
-      <div className="views">
-        {views} views <span>.</span> {time}
-      </div>
-      <div>
-        {children}
-      </div>
+        <button className='edit' onClick={() => editableVideo(id)}>Edit</button>
+        <div className="pic">
+          <img src={`https://picsum.photos/id/${id}/160/90`} alt="Katherine Johnson" />
+        </div>
+        <div className="title">{title}</div>
+        <div className="channel">{channel} {verified && '✅'} </div>
+        <div className="views">
+          {views} views <span>.</span> {time}
+        </div>
+        <div>
+          {children}
+        </div>
       </div>
-      </>
+    </>
   );
 }
 

src/components/VideoList.js

@@ -1,30 +1,32 @@
 import Video from "./Video";
 import PlayButton from "./PlayButton";
 
-function VideoList({videos}){
+function VideoList({ videos, editableVideo }) {
 
-    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>
-          ))}
-          </>
-    )
+
+  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}
+          editableVideo={editableVideo}
+        >
+          <PlayButton
+            onPlay={() => console.log('Playing..', video.title)}
+            onPause={() => console.log('Paused..', video.title)}
+          >
+            {video.title}
+          </PlayButton>
+        </Video>
+      ))}
+    </>
+  )
 }
 
 export default VideoList