react-12

Author: abhishekrathore

package-lock.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

package.json

@@ -12,8 +12,13 @@ function App() {
   console.log('render App');
   const [editableVideo, setEditableVideo] = useState(null);
   const [mode, setMode] = useState('darkMode');
+
+
+
   function videoReducer(videos, action) {
     switch (action.type) {
+      case 'LOAD':
+        return action.payload;
       case 'ADD':
         return [...videos, { ...action.payload, id: videos.length + 1 }];
       case 'DELETE':
@@ -28,7 +33,7 @@ function App() {
         return videos;
     }
   }
-  const [videos, dispatch] = useReducer(videoReducer, videoDB);
+  const [videos, dispatch] = useReducer(videoReducer, []);
 
   function editVideo(id) {
     setEditableVideo(videos.find((video) => video.id === id));

src/App.js

@@ -37,6 +37,7 @@ function AddVideo({editableVideo}) {
       setVideo(editableVideo)
     }
     inputRef.current.focus()
+
   },[editableVideo])
 
   return (

src/components/AddVideo.js

@@ -1,12 +1,27 @@
-import { useContext } from 'react';
+import { useContext, useEffect } 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,editVideo}) {
-  console.log('render Video')
+  console.log('render Video',id)
    const theme = useContext(ThemeContext)
    const dispatch = useVideoDispatch()
+
+
+
+
+  
+  //  useEffect(()=>{
+  //     const idx= setInterval(()=>{
+  //       console.log('video playing', id)
+  //     },3000)
+      
+  //     return ()=>{
+  //         clearInterval(idx)
+  //      }
+
+  //  },[id])
 
   return (
       <>

src/components/Video.js

@@ -1,9 +1,32 @@
 import Video from "./Video";
 import PlayButton from "./PlayButton";
 import useVideos from "../hooks/Videos";
+import axios from 'axios';
+import {useState, useEffect} from 'react';
+import useVideoDispatch from "../hooks/VideoDispatch";
 
 function VideoList({editVideo}){
+   const url ="https://my.api.mockaroo.com/video.json?key=2a12c4d0"
+
    const videos = useVideos()
+   const dispatch = useVideoDispatch();
+
+   async function handleClick (){
+    const res = await axios.get(url);
+    console.log('getVideos', res.data)
+    dispatch({type:'LOAD',payload:res.data})
+   }
+
+  useEffect(()=>{
+    async function getVideos (){
+      const res = await axios.get(url);
+      console.log('getVideos', res.data)
+      dispatch({type:'LOAD',payload:res.data})
+     }
+     getVideos()
+  },[dispatch])
+
+
     return(
         <>
         {videos.map((video) => (
@@ -25,6 +48,7 @@ function VideoList({editVideo}){
               </PlayButton>
             </Video>
           ))}
+          <button onClick={handleClick}>Get Videos</button>
           </>
     )
 }