From f959bcc7a9ca52cb17f1e300a4d28612b02bd26d Mon Sep 17 00:00:00 2001
From: zigamacele <19758116+zigamacele@users.noreply.github.com>
Date: Fri, 28 Apr 2023 21:08:45 +0200
Subject: [PATCH] added failsafes, ui changes, readme update

---
 README.md                             |  4 ++--
 src/Components/DisplayMyLivers.tsx    |  4 +---
 src/Components/DisplayedLiver.tsx     | 13 +++++++++----
 src/Components/SelectLiver.tsx        |  1 -
 src/Components/Settings/Selectors.tsx |  4 ++--
 src/pages/Custom.tsx                  | 18 ++++++++++--------
 src/pages/Settings.tsx                |  2 +-
 src/pages/_app.tsx                    |  1 -
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 74a111b..ec4b731 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Liver ![version](https://img.shields.io/badge/Version-v0.0.3-pink?style=for-the-badge&logo)
+# Liver ![version](https://img.shields.io/badge/Version-v0.1-pink?style=for-the-badge&logo)
 
 <a><img align="right" src="https://i.imgur.com/F9qenDY.png"></a>
 
@@ -11,7 +11,7 @@ Get it for [Chrome](https://chrome.google.com/webstore/detail/liver/pjnhlmepkmji
 
 ## Images
 
-<img src="https://i.imgur.com/YHybind.png" width="700">
+<img src="https://i.imgur.com/YHybind.png" width="800">
 
 <br />
 
diff --git a/src/Components/DisplayMyLivers.tsx b/src/Components/DisplayMyLivers.tsx
index e3bb49a..0b9d838 100644
--- a/src/Components/DisplayMyLivers.tsx
+++ b/src/Components/DisplayMyLivers.tsx
@@ -39,8 +39,6 @@ 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) => {
@@ -48,7 +46,7 @@ export default function DisplayMyLivers() {
         });
         chrome.storage.local.set({ myLivers: tempMyLivers });
         window.location.reload();
-      }
+      } else setDisplayLivers({ ...data.myLivers, ...data.customList });
     });
   }
 
diff --git a/src/Components/DisplayedLiver.tsx b/src/Components/DisplayedLiver.tsx
index 1a69c64..1519ff3 100644
--- a/src/Components/DisplayedLiver.tsx
+++ b/src/Components/DisplayedLiver.tsx
@@ -22,7 +22,11 @@ export function DisplayedLiver({
 
   function checkMyLivers() {
     chrome.storage.local.get('customList', function (data) {
-      setCustomList(data.customList);
+      if (data.customList) setCustomList(data.customList);
+      else {
+        chrome.storage.local.set({ customList: {} });
+        setCustomList({});
+      }
     });
   }
 
@@ -56,12 +60,13 @@ export function DisplayedLiver({
     try {
       const { data } = await axios.request(config);
       const twitter = data.twitter;
+      const name = data.name;
       chrome.storage.local.get('customList', function (data) {
         let tempCustomList = data.customList;
         tempCustomList = {
           ...tempCustomList,
           [channelID]: {
-            name: member.channel.english_name,
+            name: member.channel.english_name || name,
             imageURL: member.channel.photo,
             channelID: member.channel.id,
             twitter: twitter,
@@ -105,7 +110,7 @@ export function DisplayedLiver({
       >
         <img
           src={member.imageURL || member.channel.photo}
-          alt={member.name || member.channel.english_name}
+          alt={member.name}
           className={`rounded-full h-20 liver border-4 shadow-md ${
             isLive
               ? 'border-red-500'
@@ -142,7 +147,7 @@ export function DisplayedLiver({
             ) : (
               <BookmarkIcon
                 onClick={() => addToMyLivers(member.channel.id)}
-                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"
+                className="h-5 w-5 p-0.5 text-slate-700 hover:text-neutral-500 bg-white border-2 border-red-500 rounded-full cursor-pointer"
               />
             )}
           </div>
diff --git a/src/Components/SelectLiver.tsx b/src/Components/SelectLiver.tsx
index 18aba08..7705a4f 100644
--- a/src/Components/SelectLiver.tsx
+++ b/src/Components/SelectLiver.tsx
@@ -30,7 +30,6 @@ export default function SelectLiver({
   function databaseSearch(memberID: string) {
     for (const member of flattenedDatabase) {
       if (member.channelID === memberID) {
-        console.log('MEMBEr', member);
         return member;
       }
     }
diff --git a/src/Components/Settings/Selectors.tsx b/src/Components/Settings/Selectors.tsx
index b77b232..0fd529b 100644
--- a/src/Components/Settings/Selectors.tsx
+++ b/src/Components/Settings/Selectors.tsx
@@ -33,8 +33,8 @@ export default function Selectors({
             controlOutline: 'none',
             colorTextDisabled: '#94a3b8',
             colorTextPlaceholder: '#94a3b8',
-            colorBgContainer: darkMode ? '#334155' : 'white',
-            colorBgElevated: darkMode ? '#334155' : 'white',
+            colorBgContainer: darkMode ? '#334155' : '#f8fafc',
+            colorBgElevated: darkMode ? '#334155' : '#f8fafc',
             colorBorder: darkMode ? '#0f172a' : '#e2e8f0',
             controlItemBgActive: darkMode ? '#1e293b' : '#e2e8f0',
             controlItemBgHover: darkMode ? '#2D3A4B' : '#f1f5f9',
diff --git a/src/pages/Custom.tsx b/src/pages/Custom.tsx
index e98b360..1d8b5c4 100644
--- a/src/pages/Custom.tsx
+++ b/src/pages/Custom.tsx
@@ -53,7 +53,7 @@ export default function Custom() {
         chrome.storage.local.set({
           customList: {
             [userInput]: {
-              name: APIData.english_name,
+              name: APIData.english_name || APIData.name,
               channelID: APIData.id,
               imageURL: APIData.photo,
               twitter: APIData.twitter,
@@ -62,7 +62,7 @@ export default function Custom() {
         });
         setCustomList({
           [userInput]: {
-            name: APIData.english_name,
+            name: APIData.english_name || APIData.name,
             channelID: APIData.id,
             imageURL: APIData.photo,
             twitter: APIData.twitter,
@@ -76,7 +76,7 @@ export default function Custom() {
         liversArray = {
           ...liversArray,
           [userInput]: {
-            name: APIData.english_name,
+            name: APIData.english_name || APIData.name,
             channelID: APIData.id,
             imageURL: APIData.photo,
             twitter: APIData.twitter,
@@ -90,7 +90,7 @@ export default function Custom() {
         liversArray = {
           ...liversArray,
           [userInput]: {
-            name: APIData.english_name,
+            name: APIData.english_name || APIData.name,
             channelID: APIData.id,
             imageURL: APIData.photo,
             twitter: APIData.twitter,
@@ -107,7 +107,9 @@ export default function Custom() {
 
   useEffect(() => {
     chrome.storage.local.get('customList', function (data) {
-      setCustomList(data.customList);
+      if (data.customList) {
+        setCustomList(data.customList);
+      }
     });
     chrome.storage.onChanged.addListener(function (changes) {
       if ('customList' in changes) {
@@ -129,7 +131,7 @@ export default function Custom() {
         <input
           value={userInput}
           className="w-full outline-none rounded-lg h-10 border placeholder:text-slate-400 dark:placeholder:text-slate-400 border-slate-300 dark:border-slate-600 px-4 py-1 bg-slate-200 dark:bg-slate-700 pr-6"
-          placeholder="Enter VTuber's Youtube ID"
+          placeholder="VTuber's Channel ID"
           onChange={(e) => setUserInput(e.target.value)}
         />
         <PlusCircleIcon
@@ -148,9 +150,9 @@ export default function Custom() {
           <span>Need help?</span>
         </div>
       ) : (
-        <div className="flex gap-1 bg-slate-200 dark:bg-slate-700 px-3 py-2 rounded-lg shadow-sm">
+        <div className="flex gap-1 bg-slate-200 dark:bg-slate-700 px-3 py-2 rounded-lg shadow-sm border border-slate-300 dark:border-slate-600">
           <div>
-            <div>Youtube ID needs to be in this format:</div>
+            <div>Channel ID needs to be in this format:</div>
             <div className="flex items-center">
               <div className="text-[10px]">youtube.com/channel/ </div>
               <span className="bg-slate-300 dark:bg-slate-600 text-[14px] font-bold ">
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 196a8c8..c8b5f4d 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -32,7 +32,7 @@ export default function Settings({
         <Tooltip title="Remove All">
           <div
             onClick={handleReset}
-            className="h-[30px] w-[30px] shadow-sm flex justify-center items-center cursor-pointer hover:text-rose-500 bg-white dark:bg-slate-700 rounded py-0.5 px-1"
+            className="h-[30px] w-[30px] shadow-sm flex justify-center border border-slate-200 dark:border-slate-700 items-center cursor-pointer hover:text-rose-500 bg-white dark:bg-slate-700 rounded py-0.5 px-1"
           >
             <TrashIcon className="h-5 w-5" />
           </div>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4f969ce..d585067 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,6 @@ import { useState } from 'react';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [showStreamTitle, setShowStreamTitle] = useState('');
-
   return (
     <div className="flex flex-col gap-2">
       <Navigation