+
+
);
}
diff --git a/src/components/AddVideo.js b/src/components/AddVideo.js
index d994576..527bd68 100644
--- a/src/components/AddVideo.js
+++ b/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 (
);
diff --git a/src/components/Video.js b/src/components/Video.js
index 790264e..009d49e 100644
--- a/src/components/Video.js
+++ b/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 (
- <>
+ <>
-
-
-
-
+
);
}
diff --git a/src/components/VideoList.js b/src/components/VideoList.js
index cc7bf1d..db11510 100644
--- a/src/components/VideoList.js
+++ b/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) => (
-
- ))}
-
- )
+function VideoList() {
+ const { videos } = useContext(VideosContext);
+ return (
+ <>
+ {videos.map((video) => (
+
+ ))}
+
+ )
}
export default VideoList
\ No newline at end of file
diff --git a/src/contexts/videosContext.js b/src/contexts/videosContext.js
new file mode 100644
index 0000000..d675d3e
--- /dev/null
+++ b/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
- 
+
+
+
-
+
+
+ {title}
+ {channel} {verified && '✅'}
+
+ {views} views . {time}
+
+
+ {children}
+
{title}
- {channel} {verified && '✅'}
-
- {views} views . {time}
-
-
- {children}
-
-