react-14

Author: abhishekrathore

src/App.js

@@ -1,4 +1,4 @@
-import { useCallback, useReducer, useState } from 'react';
+import { useCallback, useReducer, useState,useRef } from 'react';
 import './App.css';
 import AddVideo from './components/AddVideo';
 import videoDB from './data/data';
@@ -12,7 +12,7 @@ function App() {
   console.log('render App');
   const [editableVideo, setEditableVideo] = useState(null);
   const [mode, setMode] = useState('darkMode');
-
+  const inputRef = useRef(null);
 
 
   function videoReducer(videos, action) {
@@ -33,7 +33,7 @@ function App() {
         return videos;
     }
   }
-  const [videos, dispatch] = useReducer(videoReducer, []);
+  const [videos, dispatch] = useReducer(videoReducer, videoDB);
 
   const editVideo = useCallback(function editVideo(id) {
     setEditableVideo(videos.find((video) => video.id === id));
@@ -45,14 +45,16 @@ function App() {
       <VideosContext.Provider value={videos}>
         <VideoDispatchContext.Provider value={dispatch}>
         <div className={`App ${mode}`} onClick={() => console.log('App')}>
+          <button onClick={()=>{inputRef.current.jumpTo()}}>Focus</button>
           <button
             onClick={() =>
               setMode(mode === 'darkMode' ? 'lightMode' : 'darkMode')
             }
           >
             Mode
           </button>
-          <AddVideo
+          <AddVideo 
+            ref={inputRef} 
             editableVideo={editableVideo}
           ></AddVideo>
           <VideoList

src/components/AddVideo.js

@@ -1,5 +1,5 @@
 import './AddVideo.css';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import useVideoDispatch from '../hooks/VideoDispatch';
 
 const initialState = {
@@ -10,10 +10,20 @@ const initialState = {
   views: '',
 };
 
-function AddVideo({ editableVideo }) {
+const AddVideo = forwardRef(function AddVideo({ editableVideo },ref) {
   const [video, setVideo] = useState(initialState);
   const dispatch = useVideoDispatch();
-  const inputRef = useRef(null);
+  // const inputRef = useRef(null);
+  const iRef =  useRef(null);
+
+  useImperativeHandle(ref,()=>{
+    return {
+      jumpTo(){
+          iRef.current.focus()
+      }
+    }
+
+  },[])
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -33,13 +43,13 @@ function AddVideo({ editableVideo }) {
     if (editableVideo) {
       setVideo(editableVideo);
     }
-    inputRef.current.focus();
+    // inputRef.current.focus();
   }, [editableVideo]);
 
   return (
     <form>
       <input
-        ref={inputRef}
+        ref={iRef}
         type="text"
         name="title"
         onChange={handleChange}
@@ -58,6 +68,6 @@ function AddVideo({ editableVideo }) {
       </button>
     </form>
   );
-}
+})
 
 export default AddVideo;

src/components/Video.js

@@ -1,4 +1,4 @@
-import { useContext, useEffect, memo } from 'react';
+import { useContext, useRef, memo,useLayoutEffect } from 'react';
 import ThemeContext from '../context/ThemeContext';
 import useVideoDispatch from '../hooks/VideoDispatch';
 import './Video.css';
@@ -16,10 +16,16 @@ const Video = memo(function Video({
   console.log('render Video', id);
   const theme = useContext(ThemeContext);
   const dispatch = useVideoDispatch();
+  const ref = useRef(null);
+
+  // useLayoutEffect(() => {
+  //   const { height } = ref.current.getBoundingClientRect();
+  //   console.log(height)
+  // }, []);
 
   return (
     <>
-      <div className={`container ${theme}`}>
+      <div ref={ref} className={`container ${theme}`}>
         <button
           className="close"
           onClick={() => dispatch({ type: 'DELETE', payload: id })}

src/components/VideoList.js

@@ -1,16 +1,24 @@
 import Video from './Video';
 import PlayButton from './PlayButton';
 import useVideos from '../hooks/Videos';
-import { useEffect, useCallback, useMemo } from 'react';
+import { useEffect, useCallback, useMemo, useDeferredValue, useState, useTransition } from 'react';
 import useVideoDispatch from '../hooks/VideoDispatch';
+import moreVideos  from '../data/moredata';
 
 function VideoList({ editVideo }) {
 
-  const videos = useVideos();
+  // const videos = useVideos();
   const dispatch = useVideoDispatch();
+  const [isPending, startTransition] = useTransition();
+  // const defVideos =  useDeferredValue(videos)
+   const [videos, setVideos] = useState([]);
 
   function getVideos() {
-       dispatch({ type: 'LOAD', payload: [] });
+      //  dispatch({ type: 'LOAD', payload: moreVideos  });
+      startTransition(()=>{
+        setVideos(moreVideos)
+      })
+      
   }
 
   useEffect(() => {
@@ -40,7 +48,8 @@ function VideoList({ editVideo }) {
           {memoButton}
         </Video>
       ))}
-      <button onClick={getVideos}>Get Videos</button>
+      
+      <button onClick={getVideos}>{isPending ?'Getting...': 'Get Videos'}</button>
     </>
   );
 }

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import ThemeContext from './context/ThemeContext';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>