Bug fixing...

Author: Gaurav242007

components/Studio/Dashboard.jsx

@@ -50,6 +50,7 @@ const VideoPerformance = () => {
     const fetchLatestVideo = async () => {
       const {data} = await supabase.from('videos').select().eq('channelRef', currentChannel?.uid).order('timestamp', {ascending: false})
       const videos = data;
+      console.log(videos)
       setLatestVideo(videos[data?.length -1 ]);
     }
     fetchLatestVideo();

components/Studio/Header.jsx

@@ -22,7 +22,15 @@ import { useChannelState } from "../../context/ChannelState";
 const Header = () => {
   const { isSidebar, setIsSidebar, user, videos } = useStateContext();
   const { fetchChannelVideos } = useChannelState();
-  const channelVideos = fetchChannelVideos(videos);
+  const [channelVideos, setChannelVideos] = useState([]);
+  useEffect(() => {
+    const getChannelVideos = async () => {
+      const videos = await fetchChannelVideos();
+      console.log(videos)
+      await setChannelVideos(videos);
+    };
+    getChannelVideos();
+  }, []);
   const [hasFocused, setHasFocused] = useState(false);
   const [searchString, setSearchString] = useState("");
   const router = useRouter();
@@ -106,9 +114,14 @@ const Header = () => {
       </div>
       <div className="flex items-center">
         <Tooltip
-          element={<VideoCameraIcon onClick={() => {
-            router.push('/studio/?create=true')
-          }} className="clickable-icon" />}
+          element={
+            <VideoCameraIcon
+              onClick={() => {
+                router.push("/studio/?create=true");
+              }}
+              className="clickable-icon"
+            />
+          }
           hoverText="Create"
         />
         <Tooltip

components/Studio/Video/Edit.jsx

@@ -14,20 +14,26 @@ import Tooltip from "../../Tooltip";
 import copy from "clipboard-copy";
 import { supabase } from "../../../SupabaseClient";
 
-const Header = ({ uid, setEditedDetails, videoDetails, editedDetails }) => {
+const Header = ({
+  uid,
+  setEditedDetails,
+  videoDetails,
+  url,
+  editedDetails,
+}) => {
   const router = useRouter();
   const { editDialog, setEditDialog, startLoadingBar } = useChannelState();
   const { setLoading, setLoadingProgress } = useStateContext();
-  const Delete = () => {
-    console.log("deleted the video ...");
+  const Delete = async () => {
+    await supabase.from("videos").delete().eq("uid", uid);
     setEditDialog(false);
     router.push("/studio?content=true");
   };
 
   const resetEditedDetails = () => {
     const getPreviousDetails = async () => {
       const { data } = await supabase.from("videos").select().eq("uid", uid);
-      console.log(data)
+      console.log(data);
       setEditedDetails(data[0]);
     };
     startLoadingBar(setLoading, setLoadingProgress, () => getPreviousDetails());
@@ -37,7 +43,8 @@ const Header = ({ uid, setEditedDetails, videoDetails, editedDetails }) => {
     const updateNewDetails = async () => {
       const { data } = await supabase
         .from("videos")
-        .update({ ...editedDetails }).select()
+        .update({ ...editedDetails })
+        .select()
         .eq("uid", uid);
       setEditedDetails(data);
     };
@@ -88,12 +95,12 @@ const Header = ({ uid, setEditedDetails, videoDetails, editedDetails }) => {
               className="flex items-center gap-4 click-show cursor-pointer hover:bg-gray-100 rounded-xl px-2 py-1 dark:hover:bg-white/10"
             >
               <ArrowDownTrayIcon className="icon" />
-              <a download href={`${process.env.NEXT_PUBLIC_BASE_URL}`}>
+              <a href={`${url}`} download>
                 <span className="lg:block hidden">Download</span>
               </a>
             </p>
             <p
-              onClick={Delete}
+              onClick={() => Delete()}
               className="flex items-center gap-4 click-show cursor-pointer hover:bg-gray-100 rounded-xl px-2 py-1 dark:hover:bg-white/10"
             >
               <TrashIcon className="icon" />
@@ -149,12 +156,12 @@ const EditVideo = ({ uid, videoDetails }) => {
   const { thumbnailDialog, setThumbnailDialog, GetUid } = useChannelState();
   const thumbnailRef = useRef(null);
   const [editedDetails, setEditedDetails] = useState(videoDetails);
-  const [key, setKey] = useState('key');
+  const [key, setKey] = useState("key");
 
   useEffect(() => {
     const newKey = GetUid();
     setKey(newKey);
-  }, [editedDetails])
+  }, [editedDetails]);
 
   useEffect(() => {
     setEditedDetails(videoDetails);
@@ -172,11 +179,12 @@ const EditVideo = ({ uid, videoDetails }) => {
     const path = data?.path;
     const newThumbnail = `https://lumsrpmlumtfpbbafpug.supabase.co/storage/v1/object/public/thumbnails/${path}`;
     setEditedDetails({ ...editedDetails, thumbnail: newThumbnail });
-    event.target.value = ''
+    event.target.value = "";
   };
   return (
     <Fragment>
       <Header
+        url={editedDetails?.url}
         uid={uid}
         setEditedDetails={setEditedDetails}
         editedDetails={editedDetails}
@@ -262,7 +270,7 @@ const EditVideo = ({ uid, videoDetails }) => {
             </p>
             <div className="relative w-80 h-60">
               <img
-              key={key}
+                key={key}
                 src={editedDetails?.thumbnail}
                 className="object-cover rounded-xl w-80 h-44"
                 alt="thumbnail image"

components/Studio/VideoAutoComplete.jsx

@@ -7,16 +7,18 @@ import {
 } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { useChannelState } from "../../context/ChannelState";
+import { useRouter } from "next/router";
 
 export default function VideoAutoComplete({
   searchString,
   setSearchString,
   channelVideos,
 }) {
+  const router = useRouter();
   const [filteredVideos, setFilteredVideos] = useState([]);
   const getFilteredVideos = () => {
     setFilteredVideos(
-      channelVideos.filter((video) =>
+      channelVideos?.filter((video) =>
         video?.title?.toLowerCase().includes(searchString?.toLowerCase())
       )
     );
@@ -74,7 +76,7 @@ export default function VideoAutoComplete({
               </div>
               <p className="flex flex-col">
                 <span className="text-bold text-[10px]">
-                  {timestamp?.toDateString()}
+                  {new Date(timestamp)?.toDateString()}
                 </span>
                 <span className="text-[10px] dark:text-gray-300 text-gray-900">
                   Published