feat: contextAPI added

src/App.js

@@ -1,40 +1,16 @@
-import { useState } from 'react';
 import './App.css';
 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);
-  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))
-  }
+import { useContext } from 'react';
+import { VideosContext } from './contexts/videosContext';
 
-  function updateVideo(video){
-    const index = videos.findIndex(v=>v.id===video.id)
-    const newVideos = [...videos]
-    newVideos.splice(index,1,video)
-    setVideos(newVideos)
-  }
+function App() {
+  const { videos, setVideos } = useContext(VideosContext)
 
   return (
-    <div className="App" onClick={()=>console.log('App')}>
-       <AddVideo addVideos={addVideos} updateVideo={updateVideo} editableVideo={editableVideo}></AddVideo>
-       <VideoList deleteVideo={deleteVideo} editVideo={editVideo}  videos={videos}></VideoList>
-
-
+    <div className="App">
+      <AddVideo />
+      <VideoList />
     </div>
   );
 }

src/components/AddVideo.js

@@ -1,39 +1,44 @@
+import { VideosContext } from '../contexts/videosContext';
 import './AddVideo.css';
-import {useEffect, useState} from 'react';
+import { useContext, 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,updateVideo,editableVideo}) {
+function AddVideo() {
+  const { addVideos, updateVideo, editableVideo } = useContext(VideosContext);
   const [video, setVideo] = useState(initialState);
 
   function handleSubmit(e) {
+    e.stopPropagation()
     e.preventDefault();
-    if(editableVideo){
+    if (video.title === '' || video.views === '') return
+    if (editableVideo) {
       updateVideo(video)
-    }else{
+    } else {
       addVideos(video)
     }
-    
+
     setVideo(initialState)
 
   }
   function handleChange(e) {
-    setVideo({...video,
-        [e.target.name] : e.target.value
+    setVideo({
+      ...video,
+      [e.target.name]: e.target.value
     })
   }
 
-  useEffect(()=>{
-    if(editableVideo){
+  useEffect(() => {
+    if (editableVideo) {
       setVideo(editableVideo)
     }
-  },[editableVideo])
+  }, [editableVideo])
 
   return (
     <form>
@@ -54,7 +59,7 @@ function AddVideo({addVideos,updateVideo,editableVideo}) {
       <button
         onClick={handleSubmit}
       >
-        {editableVideo?'Edit':'Add'} Video
+        {editableVideo ? 'Edit' : 'Add'} Video
       </button>
     </form>
   );

src/components/Video.js

@@ -1,27 +1,29 @@
+import { useContext } from 'react';
 import './Video.css';
+import { VideosContext } from '../contexts/videosContext';
 
-function Video({title,id,channel="Coder Dost",views,time,verified,children,deleteVideo,editVideo}) {
+function Video({ title, id, channel = "Coder Dost", views, time, verified, children }) {
   console.log('render Video')
+  const { deleteVideo, editVideo } = useContext(VideosContext);
 
-
   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" />
+        <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>
+        <div className="title">{title}</div>
+        <div className="channel">{channel} {verified && '✅'} </div>
+        <div className="views">
+          {views} views <span>.</span> {time}
+        </div>
+        <div>
+          {children}
+        </div>
       </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,32 +1,32 @@
 import Video from "./Video";
 import PlayButton from "./PlayButton";
+import { useContext } from "react";
+import { VideosContext } from "../contexts/videosContext";
 
-function VideoList({videos,deleteVideo,editVideo}){
-
-    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}
-              deleteVideo={deleteVideo}
-              editVideo={editVideo}
-            >
-              <PlayButton
-                onPlay={() => console.log('Playing..',video.title)}
-                onPause={() => console.log('Paused..',video.title)}
-              >
-                {video.title}
-              </PlayButton>
-            </Video>
-          ))}
-          </>
-    )
+function VideoList() {
+  const { videos } = useContext(VideosContext);
+  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

src/contexts/videosContext.js

@@ -0,0 +1,46 @@
+import { createContext, useState } from "react";
+import videosDB from "../data/data";
+
+const VideosContext = createContext({
+    videos: null,
+    setVideos: () => { }
+})
+
+const VideosProvider = ({ children }) => {
+    const [videos, setVideos] = useState(videosDB);
+    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)
+    }
+
+    const value = {
+        videos,
+        setVideos,
+        addVideos,
+        deleteVideo,
+        editVideo,
+        updateVideo,
+        editableVideo
+    }
+
+    return <VideosContext.Provider value={value}>{children}</VideosContext.Provider>
+}
+
+export { VideosContext, VideosProvider }

src/index.js

@@ -2,11 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { VideosProvider } from './contexts/videosContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <VideosProvider>
+      <App />
+    </VideosProvider>
   </React.StrictMode>
 );