From f068821e4c5f7c3ee1be67a34b953c14334bacad Mon Sep 17 00:00:00 2001 From: zigamacele <19758116+zigamacele@users.noreply.github.com> Date: Thu, 27 Apr 2023 22:55:05 +0200 Subject: [PATCH] fixed adding to custom bug, converter for old users --- src/Components/Custom/DisplayCustomList.tsx | 6 +- src/Components/DisplayMyLivers.tsx | 54 +++++++++------- src/Components/DisplayedLiver.tsx | 66 +++++++++++--------- src/Components/DisplayedLiver/LiveStatus.tsx | 6 +- src/Components/SelectLiver.tsx | 6 +- src/Components/Settings/Footer.tsx | 4 +- src/Components/Settings/Selectors.tsx | 3 +- src/layouts/Navigation.tsx | 15 ++--- src/pages/Custom.tsx | 7 +-- src/pages/Home.tsx | 13 +--- src/pages/Settings.tsx | 2 +- src/pages/_app.tsx | 6 +- src/pages/index.tsx | 15 +---- 13 files changed, 89 insertions(+), 114 deletions(-) diff --git a/src/Components/Custom/DisplayCustomList.tsx b/src/Components/Custom/DisplayCustomList.tsx index a6ac798..aad8fbe 100644 --- 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 }) {
{Object.values(customList).flatMap((element: any) => { return ( -
+
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({}); const [loading, setLoading] = useState(true); const [APIResponse, setAPIResponse] = useState([]); @@ -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 (
-
- {Object.keys(displayLivers).map((channelID) => { - return ( -
- -
- ); - })} -
+ {Object.keys(displayLivers).length !== 0 ? ( +
+ {Object.keys(displayLivers).map((channelID) => { + return ( +
+ +
+ ); + })} +
+ ) : ( +
+ Looks like your list is empty.. +
+ )}
); } diff --git a/src/Components/DisplayedLiver.tsx b/src/Components/DisplayedLiver.tsx index 94884b0..1a69c64 100644 --- 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({}); 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 ( -
+
{showLiveStatus && isLive && }
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" /> )}
diff --git a/src/Components/DisplayedLiver/LiveStatus.tsx b/src/Components/DisplayedLiver/LiveStatus.tsx index 447e68a..b43a682 100644 --- 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 ( -
+
-
+
@@ -27,7 +27,7 @@ export default function LiveStatus({ member }: { member: any }) {
- {member.viewers || member.live_viewers} + {member.viewers || member.live_viewers || 0}
diff --git a/src/Components/SelectLiver.tsx b/src/Components/SelectLiver.tsx index d91cefe..18aba08 100644 --- 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({ {member.name} ) : (
- + {member.name}
- chrome.tabs.create({ url: 'https://ko-fi.com/macele', }) } - /> + /> */} diff --git a/src/Components/Settings/Selectors.tsx b/src/Components/Settings/Selectors.tsx index 641bce9..b77b232 100644 --- 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({ }} > setSelectedLanguage(newLanguage)} diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx index ba51154..0e19770 100644 --- a/src/layouts/Navigation.tsx +++ b/src/layouts/Navigation.tsx @@ -65,14 +65,7 @@ export default function Navigation({ return (
)}
-
+
-
+
-
+
{darkMode ? ( { chrome.storage.local.get('customList', function (data) { - console.log('data', data.customList); setCustomList(data.customList); }); chrome.storage.onChanged.addListener(function (changes) { @@ -126,7 +124,7 @@ export default function Custom() { }; return ( -
+
Need help?
) : ( -
+
Youtube ID needs to be in this format:
@@ -173,7 +171,6 @@ export default function Custom() {
)} - {Object.keys(customList).length > 0 && ( )} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ca0e642..6c9376b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,23 +1,14 @@ import DisplayMyLivers from '@/Components/DisplayMyLivers'; import React, { useEffect } from 'react'; -export default function Home({ - showStreamTitle, - setShowStreamTitle, -}: { - showStreamTitle: string; - setShowStreamTitle: Function; -}) { +export default function Home() { useEffect(() => { chrome.storage.local.set({ goToSettings: true }); }, []); return (
- +
); } diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 6793934..196a8c8 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -32,7 +32,7 @@ export default function Settings({
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 61b6142..4f969ce 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -14,11 +14,7 @@ export default function App({ Component, pageProps }: AppProps) { setShowStreamTitle={setShowStreamTitle} />
- +
); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 58432a3..0b785f9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,21 +1,10 @@ -import { useEffect, useState } from 'react'; import { Router } from 'react-chrome-extension-router'; import Home from './Home'; -import Settings from './Settings'; -export default function Index({ - showStreamTitle, - setShowStreamTitle, -}: { - showStreamTitle: string; - setShowStreamTitle: Function; -}) { +export default function Index() { return ( - + ); }