fixed adding to custom bug, converter for old users

zigamacele · Apr 27, 2023 · f068821 · f068821
1 parent 19645a0
commit f068821
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 114 deletions.
diff --git a/src/Components/Custom/DisplayCustomList.tsx b/src/Components/Custom/DisplayCustomList.tsx
@@ -10,10 +10,6 @@ export interface customVTuber {
 import { XCircleIcon } from '@heroicons/react/24/solid';
 
 export default function DisplayCustomList({ customList }: { customList: any }) {
-  useEffect(() => {
-    console.log('updated display', customList);
-  }, [customList]);
-
   const removeFromCustom = (id: string) => {
     let tempCustomList = customList;
     delete tempCustomList[id];
@@ -27,7 +23,7 @@ export default function DisplayCustomList({ customList }: { customList: any }) {
       <div className="flex flex-col gap-1.5">
         {Object.values(customList).flatMap((element: any) => {
           return (
-            <div className="flex justify-between items-center px-1 py-1 bg fade-in bg-slate-300/30 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-700 rounded-full">
+            <div className="flex justify-between items-center px-1 py-1 bg fade-in bg-slate-300/30 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-700 rounded-full shadow-sm">
               <div className="flex items-center gap-2">
                 <img
                   src={element.imageURL}

diff --git a/src/Components/DisplayMyLivers.tsx b/src/Components/DisplayMyLivers.tsx
@@ -2,8 +2,7 @@ import { database } from '@/database';
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { DisplayedLiver } from './DisplayedLiver';
-import { databaseSearch, flattenedDatabase } from './SelectLiver';
-//TODO convert all format -> new format of myLivers
+import { databaseSearch } from './SelectLiver';
 
 export interface vtuberInfo {
   name: string;
@@ -24,13 +23,7 @@ interface vtubersFromDB {
   [key: string]: vtuberInfo;
 }
 
-export default function DisplayMyLivers({
-  showStreamTitle,
-  setShowStreamTitle,
-}: {
-  showStreamTitle: string;
-  setShowStreamTitle: Function;
-}) {
+export default function DisplayMyLivers() {
   const [displayLivers, setDisplayLivers] = useState<vtubersFromDB>({});
   const [loading, setLoading] = useState(true);
   const [APIResponse, setAPIResponse] = useState<any>([]);
@@ -47,6 +40,15 @@ export default function DisplayMyLivers({
   function getMyLivers() {
     chrome.storage.local.get(['myLivers', 'customList'], function (data) {
       setDisplayLivers({ ...data.myLivers, ...data.customList });
+
+      if (Array.isArray(data.myLivers)) {
+        let tempMyLivers: any = {};
+        data.myLivers.forEach((channelID) => {
+          tempMyLivers[channelID] = databaseSearch(channelID);
+        });
+        chrome.storage.local.set({ myLivers: tempMyLivers });
+        window.location.reload();
+      }
     });
   }
 
@@ -60,7 +62,6 @@ export default function DisplayMyLivers({
     };
     try {
       const response = await axios.get(url, config);
-      console.log(response);
       setAPIResponse(response.data);
     } catch (error) {
       console.log(error);
@@ -98,7 +99,6 @@ export default function DisplayMyLivers({
       if (
         Object.keys(tempLiveStatus).length === Object.keys(displayLivers).length
       ) {
-        console.log('temp', tempLiveStatus);
         setDisplayLivers(tempLiveStatus);
         setLoading(false);
       }
@@ -107,19 +107,25 @@ export default function DisplayMyLivers({
 
   return (
     <div className="my-2">
-      <div className="flex flex-wrap justify-center gap-3">
-        {Object.keys(displayLivers).map((channelID) => {
-          return (
-            <div key={channelID}>
-              <DisplayedLiver
-                member={displayLivers[channelID]}
-                loading={loading}
-                path="Home"
-              />
-            </div>
-          );
-        })}
-      </div>
+      {Object.keys(displayLivers).length !== 0 ? (
+        <div className="flex flex-wrap justify-center gap-3">
+          {Object.keys(displayLivers).map((channelID) => {
+            return (
+              <div key={channelID}>
+                <DisplayedLiver
+                  member={displayLivers[channelID]}
+                  loading={loading}
+                  path="Home"
+                />
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="flex justify-center opacity-40 mt-2">
+          <span>Looks like your list is empty..</span>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/Components/DisplayedLiver.tsx b/src/Components/DisplayedLiver.tsx
@@ -1,7 +1,6 @@
 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';
@@ -19,9 +18,10 @@ export function DisplayedLiver({
   const [showLiveStatus, setShowLiveStatus] = useState(false);
   const [customList, setCustomList] = useState<any>({});
   const [fetchingVTuber, setFetchingVTuber] = useState(false);
+  let test: any;
 
   function checkMyLivers() {
-    chrome.storage.local.get(['myLivers', 'customList'], function (data) {
+    chrome.storage.local.get('customList', function (data) {
       setCustomList(data.customList);
     });
   }
@@ -30,15 +30,21 @@ export function DisplayedLiver({
     if (path === 'viewAll') checkMyLivers();
   }, []);
 
+  useEffect(() => {
+    chrome.storage.local.get('customList', function (data) {});
+  }, [customList]);
+
   const deleteFromMyLivers = (channelID: string) => {
-    let tempCustomList = customList;
-    delete tempCustomList[channelID];
-    chrome.storage.local.set({ customList: tempCustomList });
-    setCustomList(tempCustomList);
+    chrome.storage.local.get('customList', function (data) {
+      let tempCustomList: any;
+      tempCustomList = data.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}`,
@@ -49,30 +55,30 @@ export function DisplayedLiver({
     };
     try {
       const { data } = await axios.request(config);
-      vtuberTwitter = data.twitter;
+      const twitter = data.twitter;
+      chrome.storage.local.get('customList', function (data) {
+        let tempCustomList = data.customList;
+        tempCustomList = {
+          ...tempCustomList,
+          [channelID]: {
+            name: member.channel.english_name,
+            imageURL: member.channel.photo,
+            channelID: member.channel.id,
+            twitter: twitter,
+            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);
+      });
       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) {
@@ -86,7 +92,7 @@ export function DisplayedLiver({
   const isLive = member.status === 'live';
 
   return (
-    <div className="fade-in">
+    <div className="fade-in ">
       {showLiveStatus && isLive && <LiveStatus member={member} />}
       <div
         className="relative bg-green-"
@@ -100,7 +106,7 @@ export function DisplayedLiver({
         <img
           src={member.imageURL || member.channel.photo}
           alt={member.name || member.channel.english_name}
-          className={`rounded-full h-20 liver border-4 ${
+          className={`rounded-full h-20 liver border-4 shadow-md ${
             isLive
               ? 'border-red-500'
               : 'border-white dark:border-slate-700 bg-slate-200 dark:bg-slate-800'
@@ -136,7 +142,7 @@ export function DisplayedLiver({
             ) : (
               <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"
+                className="h-5 w-5 p-0.5 text-black hover:text-neutral-500 bg-white border-2 border-red-500 rounded-full cursor-pointer"
               />
             )}
           </div>

diff --git a/src/Components/DisplayedLiver/LiveStatus.tsx b/src/Components/DisplayedLiver/LiveStatus.tsx
@@ -11,9 +11,9 @@ export default function LiveStatus({ member }: { member: any }) {
     return diffDuration;
   }
   return (
-    <div className="fixed text-xs top-0 left-0 w-screen h-16 dark:bg-slate-800/80 bg-slate-100/80 px-3 py-2 backdrop-blur-sm z-50 fade-in">
+    <div className="fixed text-xs top-0 left-0 w-screen h-16 dark:bg-slate-800/80 bg-slate-100/80 py-2 backdrop-blur-sm z-50 fade-in">
       <div className="flex flex-col gap-0.5">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between px-3">
           <div>
             <div className="flex flex-col">
               <span className="text-[10px] font-light">
@@ -27,7 +27,7 @@ export default function LiveStatus({ member }: { member: any }) {
               <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 || member.live_viewers}</span>
+              <span>{member.viewers || member.live_viewers || 0}</span>
             </div>
             <div className="flex gap-1 items-center">
               <ClockIcon className="h-4 w-4" />

diff --git a/src/Components/SelectLiver.tsx b/src/Components/SelectLiver.tsx
@@ -30,6 +30,7 @@ export default function SelectLiver({
   function databaseSearch(memberID: string) {
     for (const member of flattenedDatabase) {
       if (member.channelID === memberID) {
+        console.log('MEMBEr', member);
         return member;
       }
     }
@@ -49,7 +50,6 @@ export default function SelectLiver({
   function handleARLiver(memberID: string) {
     let liversArray: AnyArray = {};
     chrome.storage.local.get('myLivers', function (data) {
-      console.log(data);
       if (data.myLivers === undefined || data.myLivers.length === 0) {
         chrome.storage.local.set({
           myLivers: { [memberID]: databaseSearch(memberID) },
@@ -107,11 +107,11 @@ export default function SelectLiver({
                             <img
                               src={member.imageURL}
                               alt={member.name}
-                              className="h-14 w-14 rounded-full border-2 border-white dark:border-slate-700 bg-slate-200 dark:bg-slate-800 cursor-pointer hover:opacity-80"
+                              className="h-14 w-14 rounded-full border-2 border-white dark:border-slate-700 bg-slate-200 dark:bg-slate-800 cursor-pointer hover:opacity-80 shadow-sm"
                             />
                           ) : (
                             <div className="relative cursor-pointer">
-                              <CheckCircleIcon className="dark:text-slate-200 text-slate-700 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10" />
+                              <CheckCircleIcon className="dark:text-slate-200 text-slate-700 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 " />
                               <img
                                 src={member.imageURL}
                                 alt={member.name}

diff --git a/src/Components/Settings/Footer.tsx b/src/Components/Settings/Footer.tsx
@@ -19,14 +19,14 @@ export default function Footer() {
         </span>
       </div>
       <div className="flex items-center gap-3">
-        <SiKofi
+        {/* <SiKofi
           className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500 rounded"
           onClick={() =>
             chrome.tabs.create({
               url: 'https://ko-fi.com/macele',
             })
           }
-        />
+        /> */}
         <BsGithub
           className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500 rounded"
           onClick={() =>

diff --git a/src/Components/Settings/Selectors.tsx b/src/Components/Settings/Selectors.tsx
@@ -16,7 +16,6 @@ export default function Selectors({
 
   useEffect(() => {
     chrome.storage.local.get('darkMode', function (data) {
-      console.log(data);
       setDarkMode(data.darkMode);
     });
     chrome.storage.onChanged.addListener(function (changes) {
@@ -44,6 +43,7 @@ export default function Selectors({
         }}
       >
         <Select
+          className="shadow-sm"
           value={selectedCorpo}
           style={{ width: 120 }}
           onChange={(newCorpo: string) => setSelectedCorpo(newCorpo)}
@@ -62,6 +62,7 @@ export default function Selectors({
           ]}
         />
         <Select
+          className="shadow-sm"
           value={selectedLanguage}
           style={{ width: 120 }}
           onChange={(newLanguage: string) => setSelectedLanguage(newLanguage)}

diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
@@ -65,14 +65,7 @@ export default function Navigation({
   return (
     <nav className="flex justify-between items-center fixed w-96 z-50 dark:bg-slate-800/80 bg-slate-100/80 px-3 py-2 backdrop-blur-md">
       {showStreamTitle === '' ? (
-        <Link
-          component={Home}
-          onClick={() => setShowStreamTitle('')}
-          props={{
-            showStreamTitle: showStreamTitle,
-            setShowStreamTitle: setShowStreamTitle,
-          }}
-        >
+        <Link component={Home} onClick={() => setShowStreamTitle('')}>
           <div className="text-xl font-medium cursor-pointer hover:opacity-60">
             Liver
           </div>
@@ -85,14 +78,14 @@ export default function Navigation({
         </div>
       )}
       <div className="flex items-center gap-2 dark:text-blue-500 text-slate-700">
-        <div className="bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2">
+        <div className="bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2 shadow-sm">
           <ArrowPathIcon
             className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500 hover:animate-spin"
             onClick={handleReload}
           />
         </div>
 
-        <div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2">
+        <div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2 shadow-sm">
           <Tooltip title="Add New VTuber">
             <Link
               component={Custom}
@@ -112,7 +105,7 @@ export default function Navigation({
           </Tooltip>
         </div>
 
-        <div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2">
+        <div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2 shadow-sm">
           <Tooltip title={`${darkMode ? 'Light' : 'Dark'} Mode`}>
             {darkMode ? (
               <SunIconOutline