added video filter, channel store

ProgrammingWithGaurav · ProgrammingWithGaurav · commit 40c23144c4a2 · 2023-03-15T10:44:17.000Z
diff --git a/components/Channel/ChannelAbout.jsx b/components/Channel/ChannelAbout.jsx
@@ -6,17 +6,28 @@ import { supabase } from "../../SupabaseClient";
 
 const ChannelAbout = () => {
   const {
-    activeChannel: { timestamp:joinedDate, views, description, location, uid },
+    activeChannel: { timestamp:joinedDate, description, location, uid },
   } = useStateContext();
 
   const [socialLinks, setSocialLinks] = useState([]);
+  const [views, setViews] = useState(0);
   useEffect(() => {
     const myFunction = async () => {
       const {data} = await supabase.from('socialLinks').select().eq('channelRef', uid);
       setSocialLinks(data);
     }
+    const fetchViews  = async () => {
+      const {data: videos} = await supabase.from('videos').select().eq('channelRef', uid);
+      const views = [];
+      videos.map(video => {
+        video?.views?.map(view => views.push(view))
+      })
+      setViews(views?.length);
+    }
     myFunction();
+    fetchViews();
   }, [])
+  
   return (
     <div className="w-full flex items-start justify-between p-4 mt-10 dark:text-white h-screen">
       <div className="w-9/12 mr-8 flex flex-col">
diff --git a/components/Channel/ChannelChannels.jsx b/components/Channel/ChannelChannels.jsx
@@ -1,63 +1,112 @@
 import { BellIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import { numify } from "numify";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useChannelState } from "../../context/ChannelState";
 import { useStateContext } from "../../context/StateContext";
+import { supabase } from "../../SupabaseClient";
 
 const Channel = ({ channelRef }) => {
   const router = useRouter();
-  const { currentChannel, fetchChannelDetails } = useChannelState();
-  const { channelImage, channelName, channelDisplayName, subscribers } =
-    fetchChannelDetails(channelRef);
-  const isSubscribed = (myChannelRef) => {
-    const channels = currentChannel.subscriptions.filter(
-      (channelRef) => channelRef === myChannelRef
-    );
-    return channels.length > 0;
-  };
+  const { currentChannel, fetchChannelDetails, Subscribe, UnSubscribe } =
+    useChannelState();
+  const [channelDetails, setChannelDetails] = useState();
+  const [isSubscribed, setIsSubscribed] = useState();
+
+  const [updatedSubscribers, setUpdatedSubscribers] = useState(0);
+
+  useEffect(() => {
+    const myFunction = async () => {
+      const details = await fetchChannelDetails(channelRef);
+      const { data } = await supabase
+        .from("channelInfo")
+        .select()
+        .eq("channelRef", channelRef);
+      const subscribers = data[0]?.subscribers;
+      subscribers?.includes(currentChannel?.uid) && setIsSubscribed(true);
+      setUpdatedSubscribers(subscribers?.length);
+      setChannelDetails({ ...details, subscribers: subscribers });
+    };
+    myFunction();
+  }, []);
 
   return (
     <div className="flex flex-col justify-center items-center space-y-1">
       <img
-        src={channelImage}
+        src={channelDetails?.channelImage}
         alt="channel image"
         onClick={() => {
-          router.push(`/@${channelName}`);
+          router.push(`/@${channelDetails?.channelName}`);
           window.location.reload();
         }}
         className="rounded-full w-28 h-28 myb-2  cursor-pointer"
       />
-      <p className="font-bold text-center text-xl">{channelDisplayName}</p>
-      <span className="text-gray text-xs">
-        {numify(subscribers)} {subscribers <= 1 ? "Subscriber" : "Subscribers"}
-      </span>
-      <div>
-        {isSubscribed(channelRef) ? (
-          <div
-            // onClick={Unsubscribe}
-            className="mt-4 space-x-2 dark:hover:bg-neutral-700 text-neutral-900 dark:text-white dark:bg-neutral-800 flex items-center py-2 px-4 bg-gray-100 text-sm rounded-full cursor-pointer font-semibold hover:bg-gray-200"
-          >
-            <BellIcon className="icon mr-2 p-0 w-6 h-6" />
-            <span>Subscribed</span>
+      <p className="font-bold text-center text-xl">
+        {channelDetails?.channelDisplayName}
+      </p>
+
+      {channelDetails?.subscribers && (
+        <>
+          <span className="text-gray text-xs">
+            {numify(updatedSubscribers)}{" "}
+            {channelDetails?.subscribers?.length <= 1
+              ? "Subscriber"
+              : "Subscribers"}
+          </span>
+          <div>
+            {isSubscribed ? (
+              <div
+                // onClick={Unsubscribe}
+
+                onClick={() =>
+                  UnSubscribe(
+                    setUpdatedSubscribers,
+                    setIsSubscribed,
+                    channelRef
+                  )
+                }
+                className="mt-4 space-x-2 dark:hover:bg-neutral-700 text-neutral-900 dark:text-white dark:bg-neutral-800 flex items-center py-2 px-4 bg-gray-100 text-sm rounded-full cursor-pointer font-semibold hover:bg-gray-200"
+              >
+                <BellIcon className="icon mr-2 p-0 w-6 h-6" />
+                <span>Subscribed</span>
+              </div>
+            ) : (
+              <button
+                // onClick={Subscribe}
+                onClick={() =>
+                  Subscribe(setUpdatedSubscribers, setIsSubscribed, channelRef)
+                }
+                className="subscribe mt-4"
+              >
+                Subscribe
+              </button>
+            )}
           </div>
-        ) : (
-          <button
-            // onClick={Subscribe}
-            className="subscribe mt-4"
-          >
-            Subscribe
-          </button>
-        )}
-      </div>
+        </>
+      )}
     </div>
   );
 };
 
 const ChannelChannels = () => {
   const {
-    activeChannel: { subscriptions },
+    activeChannel: { uid },
   } = useStateContext();
+  const [subscriptions, setSubscriptions] = useState([]);
+  const { currentChannel } = useChannelState();
+  useEffect(() => {
+    const fetchSubscriptions = async () => {
+      let currentSubscriptions = [];
+      const { data: channels } = await supabase.from("channelInfo").select();
+      channels.map(
+        (channel) =>
+          channel?.subscribers?.includes(uid) &&
+          currentSubscriptions.push(channel?.channelRef)
+      );
+      setSubscriptions(currentSubscriptions);
+    };
+    fetchSubscriptions();
+  }, []);
 
   return (
     <div className="w-full mx-auto flex items-start flex-col space-y-2 p-4 mt-10 dark:text-white h-screen">
diff --git a/components/Channel/ChannelHome.jsx b/components/Channel/ChannelHome.jsx
@@ -2,15 +2,15 @@ import React, { useState, useEffect } from "react";
 import Masonry from "react-masonry-css";
 import { useChannelState } from "../../context/ChannelState";
 import { useStateContext } from "../../context/StateContext";
+import {supabase} from '../../SupabaseClient';
 import Video from "../Video";
 
 const ChannelHome = () => {
   const {
-    videos,
     setVideos,
     activeChannel: { channelName, uid },
   } = useStateContext();
-  const { channelSearch, setChannelSearch } = useChannelState();
+  const { channelSearch, setChannelSearch, fetchChannelVideos } = useChannelState();
   const [videoFilter, setVideoFilter] = useState("Recently Uploaded");
   const videoFilters = [
     {
@@ -33,21 +33,20 @@ const ChannelHome = () => {
   const [channelVideos, setChannelVideos] = useState([]);
   const {fetchChannelDetails} = useChannelState();
 
-  const handlePopularVideos = () => {
-    const channelVideos = videos.filter(
-      (video) => video?.channelRef === uid
-    );
+  const handlePopularVideos =async () => {
+    const {data: videos} = await supabase.from('videos').select().eq('channelRef', uid);
     setChannelVideos(
-      channelVideos.sort(
+      videos.sort(
         (video1, video2) => parseFloat(video2.views) - parseFloat(video1.views)
       )
     );
+    console.log( videos.sort(
+      (video1, video2) => parseFloat(video2.views?.length) - parseFloat(video1.views?.length)
+    ))
   };
 
-  const handleRecentlyPosted = () => {
-    const channelVideos = videos.filter(
-      (video) => video?.channelName === channelName
-    );
+  const handleRecentlyPosted = async () => {
+    const {data: channelVideos} = await supabase.from('videos').select().eq('channelRef', uid);
     channelVideos.length > 1 &&
     setChannelVideos(
       channelVideos.sort(
@@ -57,25 +56,26 @@ const ChannelHome = () => {
     );
   };
 
-  const searchChannelVideos = () => {
+  const searchChannelVideos =  async() => {
     if(channelSearch?.trim() === '') return;
-    const channelVideos = videos.filter(
-      (video) => video?.channelRef === uid
-    );
-    setChannelVideos(
-      channelVideos.filter((video) => video.title.toLowerCase().includes(channelSearch.toLowerCase()))
+    const myFunction = async () => {
+      const channelVideos = await fetchChannelVideos(uid);
+await    setChannelVideos(
+      channelVideos?.filter((video) => video.title.toLowerCase().includes(channelSearch.toLowerCase()))
     );
+    }
+    myFunction();
   };
 
-  const fetchChannelVideos = () => {
-    setChannelVideos(
-      videos.filter((video) => video?.channelRef === uid)
-      );
-  }
-
   useEffect(() => {
-    channelSearch.trim() === '' ? fetchChannelVideos() : searchChannelVideos();
-  }, [videos, channelSearch]);
+    console.log(channelSearch, channelSearch?.trim()?.length)
+    const fetchVideos = async () => {
+      const channelVideos =await fetchChannelVideos(uid);
+      console.log(channelVideos)
+      await setChannelVideos(channelVideos);
+    }
+    channelSearch.trim()?.length ===0 ? fetchVideos(): searchChannelVideos();
+  }, [channelSearch]);
 
   return (
     <div className="w-full flex items-start flex-col p-4 mt-4 dark:text-white h-screen">
diff --git a/components/Channel/ChannelStore.jsx b/components/Channel/ChannelStore.jsx
@@ -1,7 +1,9 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
-import React from "react";
+import React, { useEffect } from "react";
+import { useState } from "react";
 import { NumericFormat } from "react-number-format";
 import { useStateContext } from "../../context/StateContext";
+import { supabase } from "../../SupabaseClient";
 
 const Item = ({ productImage, productPage, price, name, sponsor }) => {
   return (
@@ -35,8 +37,20 @@ const Item = ({ productImage, productPage, price, name, sponsor }) => {
 
 const ChannelStore = () => {
   const {
-    activeChannel: { store },
+    activeChannel: { uid },
   } = useStateContext();
+
+  const [store, setStore] = useState([]);
+
+  useEffect(() => {
+    const myFunction = async () => {
+      const {data} = await supabase.from('store').select().eq('channelRef', uid);
+      setStore(data);
+      console.log(data);
+      console.log(uid);
+    }
+    myFunction();
+  }, [])
   return (
     <div className="w-full flex flex-col items-start p-4 mt-10 dark:text-white h-screen">
       <p className="font-semibold text-lg mb-8">Featured</p>
diff --git a/components/Channel/ChannelVideos.jsx b/components/Channel/ChannelVideos.jsx
@@ -2,15 +2,15 @@ import React, { useState, useEffect } from "react";
 import Masonry from "react-masonry-css";
 import { useChannelState } from "../../context/ChannelState";
 import { useStateContext } from "../../context/StateContext";
+import {supabase} from '../../SupabaseClient';
 import Video from "../Video";
 
 const ChannelVideos = () => {
   const {
-    videos,
     setVideos,
     activeChannel: { channelName, uid },
   } = useStateContext();
-  const { channelSearch, setChannelSearch } = useChannelState();
+  const { channelSearch, setChannelSearch, fetchChannelVideos } = useChannelState();
   const [videoFilter, setVideoFilter] = useState("Recently Uploaded");
   const videoFilters = [
     {
@@ -31,20 +31,22 @@ const ChannelVideos = () => {
   };
 
   const [channelVideos, setChannelVideos] = useState([]);
+  const {fetchChannelDetails} = useChannelState();
 
-  const handlePopularVideos = () => {
-    const channelVideos = videos.filter((video) => video?.channelRef === uid);
+  const handlePopularVideos =async () => {
+    const {data: videos} = await supabase.from('videos').select().eq('channelRef', uid);
     setChannelVideos(
-      channelVideos.sort(
+      videos.sort(
         (video1, video2) => parseFloat(video2.views) - parseFloat(video1.views)
       )
     );
+    console.log( videos.sort(
+      (video1, video2) => parseFloat(video2.views?.length) - parseFloat(video1.views?.length)
+    ))
   };
 
-  const handleRecentlyPosted = () => {
-    const channelVideos = videos.filter(
-      (video) => video?.channelName === channelName
-    );
+  const handleRecentlyPosted = async () => {
+    const {data: channelVideos} = await supabase.from('videos').select().eq('channelRef', uid);
     channelVideos.length > 1 &&
     setChannelVideos(
       channelVideos.sort(
@@ -54,22 +56,26 @@ const ChannelVideos = () => {
     );
   };
 
-  const searchChannelVideos = () => {
-    if (channelSearch?.trim() === "") return;
-    const channelVideos = videos.filter((video) => video?.channelRef === uid);
-    setChannelVideos(
-      channelVideos.filter((video) =>
-        video.title.toLowerCase().includes(channelSearch.toLowerCase())
-      )
+  const searchChannelVideos =  async() => {
+    if(channelSearch?.trim() === '') return;
+    const myFunction = async () => {
+      const channelVideos = await fetchChannelVideos(uid);
+await    setChannelVideos(
+      channelVideos?.filter((video) => video.title.toLowerCase().includes(channelSearch.toLowerCase()))
     );
+    }
+    myFunction();
   };
 
-  const fetchChannelVideos = () => {
-    setChannelVideos(videos.filter((video) => video?.channelRef === uid));
-  };
   useEffect(() => {
-    channelSearch.trim() === "" ? fetchChannelVideos() : searchChannelVideos();
-  }, [videos, channelSearch]);
+    console.log(channelSearch, channelSearch?.trim()?.length)
+    const fetchVideos = async () => {
+      const channelVideos =await fetchChannelVideos(uid);
+      console.log(channelVideos)
+      await setChannelVideos(channelVideos);
+    }
+    channelSearch.trim()?.length ===0 ? fetchVideos(): searchChannelVideos();
+  }, [channelSearch]);
 
   return (
     <div className="w-full flex items-start flex-col p-4 mt-4 dark:text-white h-screen">
diff --git a/components/Watch/VideoScreen.jsx b/components/Watch/VideoScreen.jsx
