react-10

Author: abhishekrathore

src/App.js

@@ -1,54 +1,60 @@
-import { useContext, useReducer, useState } from 'react';
+import { useReducer, useState } from 'react';
 import './App.css';
 import AddVideo from './components/AddVideo';
 import videoDB from './data/data';
 import VideoList from './components/VideoList';
 import ThemeContext from './context/ThemeContext';
-
+import VideosContext from './context/VideosContext';
+import VideoDispatchContext from './context/VideoDispatchContext';
 
 function App() {
-  console.log('render App')
-  const [editableVideo,setEditableVideo] = useState(null);
-  const [mode,setMode] = useState('darkMode')
-  function videoReducer(videos,action){
-    switch(action.type){
+  console.log('render App');
+  const [editableVideo, setEditableVideo] = useState(null);
+  const [mode, setMode] = useState('darkMode');
+  function videoReducer(videos, action) {
+    switch (action.type) {
       case 'ADD':
-        return [
-          ...videos,
-          {...action.payload, id: videos.length+1}
-        ]
+        return [...videos, { ...action.payload, id: videos.length + 1 }];
       case 'DELETE':
-        return videos.filter(video=>video.id!==action.payload)  
+        return videos.filter((video) => video.id !== action.payload);
       case 'UPDATE':
-        const index = videos.findIndex(v=>v.id===action.payload.id)
-        const newVideos = [...videos]
-        newVideos.splice(index,1,action.payload)
+        const index = videos.findIndex((v) => v.id === action.payload.id);
+        const newVideos = [...videos];
+        newVideos.splice(index, 1, action.payload);
         setEditableVideo(null);
         return newVideos;
       default:
-        return videos  
+        return videos;
     }
-
   }
-  const [videos,dispatch] = useReducer(videoReducer,videoDB)
-
-
+  const [videos, dispatch] = useReducer(videoReducer, videoDB);
 
-
-  function editVideo(id){
-    setEditableVideo(videos.find(video=>video.id===id))
+  function editVideo(id) {
+    setEditableVideo(videos.find((video) => video.id === id));
   }
 
   return (
     <ThemeContext.Provider value={mode}>
-    <div className={`App ${mode}`} onClick={()=>console.log('App')}>
-       <button onClick={()=>setMode(mode==='darkMode'? 'lightMode':'darkMode')}>Mode</button>
-       <AddVideo dispatch={dispatch} editableVideo={editableVideo}></AddVideo>
-       <VideoList dispatch={dispatch} editVideo={editVideo}  videos={videos}></VideoList>
-
-    </div>
+      <VideosContext.Provider value={videos}>
+        <VideoDispatchContext.Provider value={dispatch}>
+        <div className={`App ${mode}`} onClick={() => console.log('App')}>
+          <button
+            onClick={() =>
+              setMode(mode === 'darkMode' ? 'lightMode' : 'darkMode')
+            }
+          >
+            Mode
+          </button>
+          <AddVideo
+            editableVideo={editableVideo}
+          ></AddVideo>
+          <VideoList
+            editVideo={editVideo}
+          ></VideoList>
+        </div>
+        </VideoDispatchContext.Provider>
+      </VideosContext.Provider>
     </ThemeContext.Provider>
-
   );
 }
 

src/components/AddVideo.js

@@ -1,5 +1,6 @@
 import './AddVideo.css';
-import {useEffect, useState} from 'react';
+import { useEffect, useState} from 'react';
+import useVideoDispatch from '../hooks/VideoDispatch';
 
 const initialState = {
     time: '1 month ago',
@@ -9,8 +10,9 @@ const initialState = {
     views:''
   }
 
-function AddVideo({dispatch,editableVideo}) {
+function AddVideo({editableVideo}) {
   const [video, setVideo] = useState(initialState);
+  const dispatch = useVideoDispatch();
 
   function handleSubmit(e) {
     e.preventDefault();

src/components/Video.js

@@ -1,10 +1,12 @@
 import { useContext } from 'react';
 import ThemeContext from '../context/ThemeContext';
+import useVideoDispatch from '../hooks/VideoDispatch';
 import './Video.css';
 
-function Video({title,id,channel="Coder Dost",views,time,verified,children,dispatch,editVideo}) {
+function Video({title,id,channel="Coder Dost",views,time,verified,children,editVideo}) {
   console.log('render Video')
    const theme = useContext(ThemeContext)
+   const dispatch = useVideoDispatch()
 
   return (
       <>

src/components/VideoList.js

@@ -1,8 +1,9 @@
 import Video from "./Video";
 import PlayButton from "./PlayButton";
+import useVideos from "../hooks/Videos";
 
-function VideoList({videos,dispatch,editVideo}){
-
+function VideoList({editVideo}){
+   const videos = useVideos()
     return(
         <>
         {videos.map((video) => (
@@ -15,7 +16,6 @@ function VideoList({videos,dispatch,editVideo}){
               verified={video.verified}
               id={video.id}
               editVideo={editVideo}
-              dispatch={dispatch}
             >
               <PlayButton
                 onPlay={() => console.log('Playing..',video.title)}

src/context/VideoDispatchContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const VideoDispatchContext = createContext(null)
+
+export default VideoDispatchContext;

src/context/VideosContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const VideosContext = createContext(null)
+
+export default VideosContext;

src/hooks/VideoDispatch.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import VideoDispatchContext from "../context/VideoDispatchContext";
+
+
+function useVideoDispatch(){
+    return useContext(VideoDispatchContext)
+}
+
+export default useVideoDispatch

src/hooks/Videos.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import VideosContext from "../context/VideosContext";
+
+
+function useVideos(){
+    return useContext(VideosContext)
+}
+
+export default useVideos