viewAll page & logic for adding any live VT to customList

zigamacele · zigamacele · commit 19645a00839e · 2023-04-26T20:24:16.000+02:00
diff --git a/src/Components/DisplayMyLivers.tsx b/src/Components/DisplayMyLivers.tsx
@@ -1,8 +1,9 @@
 import { database } from '@/database';
 import axios from 'axios';
-import moment from 'moment';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { DisplayedLiver } from './DisplayedLiver';
+import { databaseSearch, flattenedDatabase } from './SelectLiver';
+//TODO convert all format -> new format of myLivers
 
 export interface vtuberInfo {
   name: string;
@@ -23,20 +24,6 @@ interface vtubersFromDB {
   [key: string]: vtuberInfo;
 }
 
-interface Members {
-  name: string;
-  imageURL: string;
-  channelID: string;
-  retired: boolean;
-  twitter: string;
-}
-
-interface Branch {
-  branchID: string;
-  debut: string;
-  members: Members[];
-}
-
 export default function DisplayMyLivers({
   showStreamTitle,
   setShowStreamTitle,
@@ -48,10 +35,6 @@ export default function DisplayMyLivers({
   const [loading, setLoading] = useState(true);
   const [APIResponse, setAPIResponse] = useState<any>([]);
 
-  const flattenedDatabase = Object.values(database).flatMap((group: any) =>
-    group.flatMap((branch: any) => branch.members)
-  );
-
   useEffect(() => {
     getMyLivers();
     getAPIData();
@@ -77,6 +60,7 @@ export default function DisplayMyLivers({
     };
     try {
       const response = await axios.get(url, config);
+      console.log(response);
       setAPIResponse(response.data);
     } catch (error) {
       console.log(error);
@@ -130,6 +114,7 @@ export default function DisplayMyLivers({
               <DisplayedLiver
                 member={displayLivers[channelID]}
                 loading={loading}
+                path="Home"
               />
             </div>
           );
diff --git a/src/Components/DisplayedLiver.tsx b/src/Components/DisplayedLiver.tsx
@@ -1,25 +1,88 @@
+import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import ClipLoader from 'react-spinners/ClipLoader';
 import { vtuberInfo } from './DisplayMyLivers';
 import LiveStatus from './DisplayedLiver/LiveStatus';
 
+import { BookmarkIcon, BookmarkSlashIcon } from '@heroicons/react/24/solid';
 import { AiFillTwitterCircle } from 'react-icons/ai';
 
 export function DisplayedLiver({
   member,
   loading,
+  path,
 }: {
-  member: vtuberInfo;
+  member: any;
   loading: boolean;
+  path: string;
 }) {
   const [showLiveStatus, setShowLiveStatus] = useState(false);
+  const [customList, setCustomList] = useState<any>({});
+  const [fetchingVTuber, setFetchingVTuber] = useState(false);
+
+  function checkMyLivers() {
+    chrome.storage.local.get(['myLivers', 'customList'], function (data) {
+      setCustomList(data.customList);
+    });
+  }
+
+  useEffect(() => {
+    if (path === 'viewAll') checkMyLivers();
+  }, []);
+
+  const deleteFromMyLivers = (channelID: string) => {
+    let tempCustomList = customList;
+    delete tempCustomList[channelID];
+    chrome.storage.local.set({ customList: tempCustomList });
+    setCustomList(tempCustomList);
+  };
+
+  const addToMyLivers = async (channelID: string) => {
+    let vtuberTwitter = '';
+    setFetchingVTuber(true);
+    const config = {
+      url: `https://holodex.net/api/v2/channels/${channelID}`,
+      headers: {
+        'X-APIKEY': process.env.NEXT_PUBLIC_HOLODEX,
+        'Content-Type': 'application/json',
+      },
+    };
+    try {
+      const { data } = await axios.request(config);
+      vtuberTwitter = data.twitter;
+      setFetchingVTuber(false);
+    } catch (error) {
+      console.log(error);
+    }
+
+    let tempCustomList = customList;
+
+    tempCustomList = {
+      ...tempCustomList,
+      [channelID]: {
+        name: member.channel.english_name,
+        imageURL: member.channel.photo,
+        channelID: member.channel.id,
+        twitter: vtuberTwitter,
+        status: member.status,
+        title: member.title,
+        started: member.start_actual,
+        org: member.channel.org,
+        viewers: member.live_viewers,
+      },
+    };
+    chrome.storage.local.set({ customList: tempCustomList });
+    setCustomList(tempCustomList);
+  };
 
   function handleTwitter(twitterID: string) {
     const url = 'https://twitter.com/';
     chrome.tabs.create({ url: url + twitterID });
   }
 
-  const url = `https://youtube.com/channel/${member.channelID}/live`;
+  const url = `https://youtube.com/channel/${
+    member.channelID || member.channel.id
+  }/live`;
   const isLive = member.status === 'live';
 
   return (
@@ -35,8 +98,8 @@ export function DisplayedLiver({
         }}
       >
         <img
-          src={member.imageURL}
-          alt={member.name}
+          src={member.imageURL || member.channel.photo}
+          alt={member.name || member.channel.english_name}
           className={`rounded-full h-20 liver border-4 ${
             isLive
               ? 'border-red-500'
@@ -46,7 +109,7 @@ export function DisplayedLiver({
             chrome.tabs.create({ url: url });
           }}
         />
-        {!loading && (
+        {!loading && member.twitter && (
           <div
             className={`${
               isLive
@@ -63,7 +126,26 @@ export function DisplayedLiver({
             ></span>
           </div>
         )}
-
+        {path === 'viewAll' && !fetchingVTuber && (
+          <div className="absolute left-[4.8em] bottom-[4.8em] rounded-full  fade-in text-red-500">
+            {Object.keys(customList).includes(member.channel.id) ? (
+              <BookmarkSlashIcon
+                onClick={() => deleteFromMyLivers(member.channel.id)}
+                className="h-5 w-5 p-0.5  bg-white border-2 hover:text-red-300 border-red-500 rounded-full cursor-pointer"
+              />
+            ) : (
+              <BookmarkIcon
+                onClick={() => addToMyLivers(member.channel.id)}
+                className="h-5 w-5 p-0.5 text-black hover:text-neutral-800 bg-white border-2 border-red-500 rounded-full cursor-pointer"
+              />
+            )}
+          </div>
+        )}
+        {fetchingVTuber && (
+          <div className="absolute left-[4.7em] bottom-[4.6em] bg-red-500 p-1 pb-0 rounded-full fade-in">
+            <ClipLoader size={15} color="white" />
+          </div>
+        )}
         {loading && (
           <div>
             <div className="absolute left-[4.5em] bottom-[4.5em] bg-white p-1 pb-0 rounded-full dark:bg-slate-700 fade-in">
diff --git a/src/Components/DisplayedLiver/LiveStatus.tsx b/src/Components/DisplayedLiver/LiveStatus.tsx
@@ -16,20 +16,24 @@ export default function LiveStatus({ member }: { member: any }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="flex flex-col">
-              <span className="text-[10px] font-light">{member.org}</span>
-              <span>{member.name}</span>
+              <span className="text-[10px] font-light">
+                {member.org || member.channel.org}
+              </span>
+              <span>{member.name || member.channel.english_name}</span>
             </div>
           </div>
           <div className="flex flex-col justify-end items-end">
             <div className="flex items-center gap-1.5">
               <div className="bg-red-500 h-2 w-2 rounded-full">
                 <div className=" bg-red-500 h-2 w-2 rounded-full animate-ping"></div>
               </div>
-              <span>{member.viewers}</span>
+              <span>{member.viewers || member.live_viewers}</span>
             </div>
             <div className="flex gap-1 items-center">
               <ClockIcon className="h-4 w-4" />
-              <span>{startedStreaming(member.started)}</span>
+              <span>
+                {startedStreaming(member.started || member.start_actual)}
+              </span>
             </div>
           </div>
         </div>
diff --git a/src/Components/SelectLiver.tsx b/src/Components/SelectLiver.tsx
@@ -3,6 +3,19 @@ import React, { useEffect, useState } from 'react';
 
 import { CheckCircleIcon } from '@heroicons/react/24/solid';
 
+export const flattenedDatabase = Object.values(database).flatMap((group: any) =>
+  group.flatMap((branch: any) => branch.members)
+);
+
+export function databaseSearch(memberID: string) {
+  for (const member of flattenedDatabase) {
+    if (member.channelID === memberID) {
+      return member;
+    }
+  }
+  return {};
+}
+
 export default function SelectLiver({
   settingsQuery,
   showStreamTitle,
@@ -14,10 +27,6 @@ export default function SelectLiver({
 }) {
   const [selectedLivers, setSelectedLivers] = useState({});
 
-  const flattenedDatabase = Object.values(database).flatMap((group: any) =>
-    group.flatMap((branch: any) => branch.members)
-  );
-
   function databaseSearch(memberID: string) {
     for (const member of flattenedDatabase) {
       if (member.channelID === memberID) {
diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
@@ -2,6 +2,7 @@ import Tooltip from '@/Components/Navigation/Tooltip';
 import Custom from '@/pages/Custom';
 import Home from '@/pages/Home';
 import Settings from '@/pages/Settings';
+import ViewAll from '@/pages/ViewAll';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-chrome-extension-router';
 
@@ -105,7 +106,9 @@ export default function Navigation({
             </Link>
           </Tooltip>
           <Tooltip title="All Live VTubers">
-            <UserGroupIcon className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500" />
+            <Link component={ViewAll} onClick={() => setShowStreamTitle('')}>
+              <UserGroupIcon className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500" />
+            </Link>
           </Tooltip>
         </div>
 
diff --git a/src/pages/ViewAll.tsx b/src/pages/ViewAll.tsx
@@ -1,5 +1,61 @@
-import React from 'react';
+import { DisplayedLiver } from '@/Components/DisplayedLiver';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
 
 export default function ViewAll() {
-  return <div>ViewAll</div>;
+  const [APIResponse, setAPIResponse] = useState<any>([]);
+  const [loading, setLoading] = useState(true);
+
+  async function getAPIData() {
+    const url = 'https://holodex.net/api/v2/live';
+    const config = {
+      headers: {
+        'X-APIKEY': process.env.NEXT_PUBLIC_HOLODEX,
+        'Content-Type': 'application/json',
+      },
+    };
+    try {
+      const response = await axios.get(url, config);
+      setAPIResponse(response.data);
+      setLoading(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  useEffect(() => {
+    getAPIData();
+  }, []);
+
+  return (
+    <div className="mt-3 mb-1">
+      {loading && (
+        <div className="flex flex-wrap justify-center gap-3">
+          {[...Array(20)].map((x, index) => (
+            <div
+              key={index}
+              className="h-20 w-20 bg-slate-300/60 dark:bg-slate-700/80 animate-pulse rounded-full fade-in"
+            ></div>
+          ))}
+        </div>
+      )}
+      {!loading && (
+        <div className="flex flex-wrap justify-center gap-3">
+          {APIResponse.map((channelID: any, index: number) => {
+            if (channelID.status === 'live') {
+              return (
+                <div key={channelID}>
+                  <DisplayedLiver
+                    member={channelID}
+                    loading={loading}
+                    path="viewAll"
+                  />
+                </div>
+              );
+            }
+          })}
+        </div>
+      )}
+    </div>
+  );
 }
