react-9

Author: abhishekrathore

src/App.css

@@ -1,6 +1,13 @@
 
 .App{
-  background-color: #333;
+ 
   width:100%;
   height:100vh;
-}
+}
+.darkMode{
+  background-color: #333;
+}
+
+.lightMode{
+  background-color: #ccc;
+}

src/App.js

@@ -1,12 +1,15 @@
-import { useReducer, useState } from 'react';
+import { useContext, 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';
+
+
 function App() {
   console.log('render App')
   const [editableVideo,setEditableVideo] = useState(null);
-
+  const [mode,setMode] = useState('darkMode')
   function videoReducer(videos,action){
     switch(action.type){
       case 'ADD':
@@ -27,21 +30,25 @@ function App() {
     }
 
   }
-
   const [videos,dispatch] = useReducer(videoReducer,videoDB)
 
 
+
+
   function editVideo(id){
     setEditableVideo(videos.find(video=>video.id===id))
   }
 
   return (
-    <div className="App" onClick={()=>console.log('App')}>
+    <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>
+    </ThemeContext.Provider>
+
   );
 }
 

src/components/PlayButton.css

@@ -1,13 +1,20 @@
 button{
-    background-color: black;
-    border: 1px solid yellow;
     padding: 1em;
     border-radius: 1em;
-    color: white;
     cursor: pointer;
 }
 button:hover{
     background-color: grey;
     color: white;
 }
+button.darkMode, .darkMode button{
+    background-color: black;
+    border: 1px solid yellow;
+    color:white
+}
+button.lightMode, .lightMode button{
+    background-color: #ccc;
+    border: 1px solid black;
+    color:black
+}
 

src/components/PlayButton.js

@@ -1,8 +1,10 @@
 import './PlayButton.css';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+import ThemeContext from '../context/ThemeContext';
 
 function PlayButton({message,children,onPlay,onPause}){
     console.log('render PlayButton')
+    const theme = useContext(ThemeContext)
 
     const [playing, setPlaying] = useState(false);  
     function handleClick(e){
@@ -16,7 +18,7 @@ function PlayButton({message,children,onPlay,onPause}){
     }
 
     return (
-        <button onClick={handleClick}>{children} : {playing?'⏸️':'⏯️'}</button>
+        <button className={theme} onClick={handleClick}>{children} : {playing?'⏸️':'⏯️'}</button>
     )
 
 }

src/components/Video.css

@@ -8,20 +8,31 @@
     margin: 0 0.2em;
     float: left;
     position: relative;
+}
+.container.darkMode{
+  color: white
+}
+.container.lightMode{
+  color: black
+
 }
   .pic img{
     width: 100%;
   }
   .title{
     font-weight: bold;
     margin-bottom: 1em;
-    color:white
   }
-  .channel, .views{
+  .darkMode .channel, .darkMode .views{
     font-size: small;
     color:#ccc;
     margin-bottom: 0.2em;
   }
+  .lightMode .channel, .lightMode .views{
+    font-size: small;
+    color:black;
+    margin-bottom: 0.2em;
+  }
 
   .views span{
     padding: 0 0.5em;

src/components/Video.js

@@ -1,12 +1,14 @@
+import { useContext } from 'react';
+import ThemeContext from '../context/ThemeContext';
 import './Video.css';
 
 function Video({title,id,channel="Coder Dost",views,time,verified,children,dispatch,editVideo}) {
   console.log('render Video')
-
+   const theme = useContext(ThemeContext)
 
   return (
       <>
-      <div className='container'>
+      <div className={`container ${theme}`}>
       <button className='close' onClick={()=>dispatch({type:'DELETE',payload:id})}>X</button>  
       <button className='edit' onClick={()=>editVideo(id)}>Edit</button>  
       <div className="pic">

src/context/ThemeContext.js

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

src/index.js

@@ -2,11 +2,11 @@ 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>
-    <App />
+      <App />
   </React.StrictMode>
 );