Skip to content

Commit f068821

Browse files
zigamacelezigamacele
committed
fixed adding to custom bug, converter for old users
1 parent 19645a0 commit f068821

File tree

13 files changed

+89
-114
lines changed

13 files changed

+89
-114
lines changed

‎src/Components/Custom/DisplayCustomList.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ export interface customVTuber {
1010
import { XCircleIcon } from '@heroicons/react/24/solid';
1111

1212
export default function DisplayCustomList({ customList }: { customList: any }) {
13-
useEffect(() => {
14-
console.log('updated display', customList);
15-
}, [customList]);
16-
1713
const removeFromCustom = (id: string) => {
1814
let tempCustomList = customList;
1915
delete tempCustomList[id];
@@ -27,7 +23,7 @@ export default function DisplayCustomList({ customList }: { customList: any }) {
2723
<div className="flex flex-col gap-1.5">
2824
{Object.values(customList).flatMap((element: any) => {
2925
return (
30-
<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">
26+
<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">
3127
<div className="flex items-center gap-2">
3228
<img
3329
src={element.imageURL}

‎src/Components/DisplayMyLivers.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { database } from '@/database';
22
import axios from 'axios';
33
import React, { useEffect, useState } from 'react';
44
import { DisplayedLiver } from './DisplayedLiver';
5-
import { databaseSearch, flattenedDatabase } from './SelectLiver';
6-
//TODO convert all format -> new format of myLivers
5+
import { databaseSearch } from './SelectLiver';
76

87
export interface vtuberInfo {
98
name: string;
@@ -24,13 +23,7 @@ interface vtubersFromDB {
2423
[key: string]: vtuberInfo;
2524
}
2625

27-
export default function DisplayMyLivers({
28-
showStreamTitle,
29-
setShowStreamTitle,
30-
}: {
31-
showStreamTitle: string;
32-
setShowStreamTitle: Function;
33-
}) {
26+
export default function DisplayMyLivers() {
3427
const [displayLivers, setDisplayLivers] = useState<vtubersFromDB>({});
3528
const [loading, setLoading] = useState(true);
3629
const [APIResponse, setAPIResponse] = useState<any>([]);
@@ -47,6 +40,15 @@ export default function DisplayMyLivers({
4740
function getMyLivers() {
4841
chrome.storage.local.get(['myLivers', 'customList'], function (data) {
4942
setDisplayLivers({ ...data.myLivers, ...data.customList });
43+
44+
if (Array.isArray(data.myLivers)) {
45+
let tempMyLivers: any = {};
46+
data.myLivers.forEach((channelID) => {
47+
tempMyLivers[channelID] = databaseSearch(channelID);
48+
});
49+
chrome.storage.local.set({ myLivers: tempMyLivers });
50+
window.location.reload();
51+
}
5052
});
5153
}
5254

@@ -60,7 +62,6 @@ export default function DisplayMyLivers({
6062
};
6163
try {
6264
const response = await axios.get(url, config);
63-
console.log(response);
6465
setAPIResponse(response.data);
6566
} catch (error) {
6667
console.log(error);
@@ -98,7 +99,6 @@ export default function DisplayMyLivers({
9899
if (
99100
Object.keys(tempLiveStatus).length === Object.keys(displayLivers).length
100101
) {
101-
console.log('temp', tempLiveStatus);
102102
setDisplayLivers(tempLiveStatus);
103103
setLoading(false);
104104
}
@@ -107,19 +107,25 @@ export default function DisplayMyLivers({
107107

108108
return (
109109
<div className="my-2">
110-
<div className="flex flex-wrap justify-center gap-3">
111-
{Object.keys(displayLivers).map((channelID) => {
112-
return (
113-
<div key={channelID}>
114-
<DisplayedLiver
115-
member={displayLivers[channelID]}
116-
loading={loading}
117-
path="Home"
118-
/>
119-
</div>
120-
);
121-
})}
122-
</div>
110+
{Object.keys(displayLivers).length !== 0 ? (
111+
<div className="flex flex-wrap justify-center gap-3">
112+
{Object.keys(displayLivers).map((channelID) => {
113+
return (
114+
<div key={channelID}>
115+
<DisplayedLiver
116+
member={displayLivers[channelID]}
117+
loading={loading}
118+
path="Home"
119+
/>
120+
</div>
121+
);
122+
})}
123+
</div>
124+
) : (
125+
<div className="flex justify-center opacity-40 mt-2">
126+
<span>Looks like your list is empty..</span>
127+
</div>
128+
)}
123129
</div>
124130
);
125131
}

‎src/Components/DisplayedLiver.tsx‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import axios from 'axios';
22
import React, { useEffect, useState } from 'react';
33
import ClipLoader from 'react-spinners/ClipLoader';
4-
import { vtuberInfo } from './DisplayMyLivers';
54
import LiveStatus from './DisplayedLiver/LiveStatus';
65

76
import { BookmarkIcon, BookmarkSlashIcon } from '@heroicons/react/24/solid';
@@ -19,9 +18,10 @@ export function DisplayedLiver({
1918
const [showLiveStatus, setShowLiveStatus] = useState(false);
2019
const [customList, setCustomList] = useState<any>({});
2120
const [fetchingVTuber, setFetchingVTuber] = useState(false);
21+
let test: any;
2222

2323
function checkMyLivers() {
24-
chrome.storage.local.get(['myLivers', 'customList'], function (data) {
24+
chrome.storage.local.get('customList', function (data) {
2525
setCustomList(data.customList);
2626
});
2727
}
@@ -30,15 +30,21 @@ export function DisplayedLiver({
3030
if (path === 'viewAll') checkMyLivers();
3131
}, []);
3232

33+
useEffect(() => {
34+
chrome.storage.local.get('customList', function (data) {});
35+
}, [customList]);
36+
3337
const deleteFromMyLivers = (channelID: string) => {
34-
let tempCustomList = customList;
35-
delete tempCustomList[channelID];
36-
chrome.storage.local.set({ customList: tempCustomList });
37-
setCustomList(tempCustomList);
38+
chrome.storage.local.get('customList', function (data) {
39+
let tempCustomList: any;
40+
tempCustomList = data.customList;
41+
delete tempCustomList[channelID];
42+
chrome.storage.local.set({ customList: tempCustomList });
43+
setCustomList(tempCustomList);
44+
});
3845
};
3946

4047
const addToMyLivers = async (channelID: string) => {
41-
let vtuberTwitter = '';
4248
setFetchingVTuber(true);
4349
const config = {
4450
url: `https://holodex.net/api/v2/channels/${channelID}`,
@@ -49,30 +55,30 @@ export function DisplayedLiver({
4955
};
5056
try {
5157
const { data } = await axios.request(config);
52-
vtuberTwitter = data.twitter;
58+
const twitter = data.twitter;
59+
chrome.storage.local.get('customList', function (data) {
60+
let tempCustomList = data.customList;
61+
tempCustomList = {
62+
...tempCustomList,
63+
[channelID]: {
64+
name: member.channel.english_name,
65+
imageURL: member.channel.photo,
66+
channelID: member.channel.id,
67+
twitter: twitter,
68+
status: member.status,
69+
title: member.title,
70+
started: member.start_actual,
71+
org: member.channel.org,
72+
viewers: member.live_viewers,
73+
},
74+
};
75+
chrome.storage.local.set({ customList: tempCustomList });
76+
setCustomList(tempCustomList);
77+
});
5378
setFetchingVTuber(false);
5479
} catch (error) {
5580
console.log(error);
5681
}
57-
58-
let tempCustomList = customList;
59-
60-
tempCustomList = {
61-
...tempCustomList,
62-
[channelID]: {
63-
name: member.channel.english_name,
64-
imageURL: member.channel.photo,
65-
channelID: member.channel.id,
66-
twitter: vtuberTwitter,
67-
status: member.status,
68-
title: member.title,
69-
started: member.start_actual,
70-
org: member.channel.org,
71-
viewers: member.live_viewers,
72-
},
73-
};
74-
chrome.storage.local.set({ customList: tempCustomList });
75-
setCustomList(tempCustomList);
7682
};
7783

7884
function handleTwitter(twitterID: string) {
@@ -86,7 +92,7 @@ export function DisplayedLiver({
8692
const isLive = member.status === 'live';
8793

8894
return (
89-
<div className="fade-in">
95+
<div className="fade-in ">
9096
{showLiveStatus && isLive && <LiveStatus member={member} />}
9197
<div
9298
className="relative bg-green-"
@@ -100,7 +106,7 @@ export function DisplayedLiver({
100106
<img
101107
src={member.imageURL || member.channel.photo}
102108
alt={member.name || member.channel.english_name}
103-
className={`rounded-full h-20 liver border-4 ${
109+
className={`rounded-full h-20 liver border-4 shadow-md ${
104110
isLive
105111
? 'border-red-500'
106112
: 'border-white dark:border-slate-700 bg-slate-200 dark:bg-slate-800'
@@ -136,7 +142,7 @@ export function DisplayedLiver({
136142
) : (
137143
<BookmarkIcon
138144
onClick={() => addToMyLivers(member.channel.id)}
139-
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"
145+
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"
140146
/>
141147
)}
142148
</div>

‎src/Components/DisplayedLiver/LiveStatus.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ export default function LiveStatus({ member }: { member: any }) {
1111
return diffDuration;
1212
}
1313
return (
14-
<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">
14+
<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">
1515
<div className="flex flex-col gap-0.5">
16-
<div className="flex items-center justify-between">
16+
<div className="flex items-center justify-between px-3">
1717
<div>
1818
<div className="flex flex-col">
1919
<span className="text-[10px] font-light">
@@ -27,7 +27,7 @@ export default function LiveStatus({ member }: { member: any }) {
2727
<div className="bg-red-500 h-2 w-2 rounded-full">
2828
<div className=" bg-red-500 h-2 w-2 rounded-full animate-ping"></div>
2929
</div>
30-
<span>{member.viewers || member.live_viewers}</span>
30+
<span>{member.viewers || member.live_viewers || 0}</span>
3131
</div>
3232
<div className="flex gap-1 items-center">
3333
<ClockIcon className="h-4 w-4" />

‎src/Components/SelectLiver.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export default function SelectLiver({
3030
function databaseSearch(memberID: string) {
3131
for (const member of flattenedDatabase) {
3232
if (member.channelID === memberID) {
33+
console.log('MEMBEr', member);
3334
return member;
3435
}
3536
}
@@ -49,7 +50,6 @@ export default function SelectLiver({
4950
function handleARLiver(memberID: string) {
5051
let liversArray: AnyArray = {};
5152
chrome.storage.local.get('myLivers', function (data) {
52-
console.log(data);
5353
if (data.myLivers === undefined || data.myLivers.length === 0) {
5454
chrome.storage.local.set({
5555
myLivers: { [memberID]: databaseSearch(memberID) },
@@ -107,11 +107,11 @@ export default function SelectLiver({
107107
<img
108108
src={member.imageURL}
109109
alt={member.name}
110-
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"
110+
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"
111111
/>
112112
) : (
113113
<div className="relative cursor-pointer">
114-
<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" />
114+
<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 " />
115115
<img
116116
src={member.imageURL}
117117
alt={member.name}

‎src/Components/Settings/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ export default function Footer() {
1919
</span>
2020
</div>
2121
<div className="flex items-center gap-3">
22-
<SiKofi
22+
{/* <SiKofi
2323
className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500 rounded"
2424
onClick={() =>
2525
chrome.tabs.create({
2626
url: 'https://ko-fi.com/macele',
2727
})
2828
}
29-
/>
29+
/> */}
3030
<BsGithub
3131
className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500 rounded"
3232
onClick={() =>

‎src/Components/Settings/Selectors.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export default function Selectors({
1616

1717
useEffect(() => {
1818
chrome.storage.local.get('darkMode', function (data) {
19-
console.log(data);
2019
setDarkMode(data.darkMode);
2120
});
2221
chrome.storage.onChanged.addListener(function (changes) {
@@ -44,6 +43,7 @@ export default function Selectors({
4443
}}
4544
>
4645
<Select
46+
className="shadow-sm"
4747
value={selectedCorpo}
4848
style={{ width: 120 }}
4949
onChange={(newCorpo: string) => setSelectedCorpo(newCorpo)}
@@ -62,6 +62,7 @@ export default function Selectors({
6262
]}
6363
/>
6464
<Select
65+
className="shadow-sm"
6566
value={selectedLanguage}
6667
style={{ width: 120 }}
6768
onChange={(newLanguage: string) => setSelectedLanguage(newLanguage)}

‎src/layouts/Navigation.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,7 @@ export default function Navigation({
6565
return (
6666
<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">
6767
{showStreamTitle === '' ? (
68-
<Link
69-
component={Home}
70-
onClick={() => setShowStreamTitle('')}
71-
props={{
72-
showStreamTitle: showStreamTitle,
73-
setShowStreamTitle: setShowStreamTitle,
74-
}}
75-
>
68+
<Link component={Home} onClick={() => setShowStreamTitle('')}>
7669
<div className="text-xl font-medium cursor-pointer hover:opacity-60">
7770
Liver
7871
</div>
@@ -85,14 +78,14 @@ export default function Navigation({
8578
</div>
8679
)}
8780
<div className="flex items-center gap-2 dark:text-blue-500 text-slate-700">
88-
<div className="bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2">
81+
<div className="bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2 shadow-sm">
8982
<ArrowPathIcon
9083
className="h-5 w-5 cursor-pointer hover:dark:text-blue-400 hover:text-slate-500 hover:animate-spin"
9184
onClick={handleReload}
9285
/>
9386
</div>
9487

95-
<div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2">
88+
<div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2 shadow-sm">
9689
<Tooltip title="Add New VTuber">
9790
<Link
9891
component={Custom}
@@ -112,7 +105,7 @@ export default function Navigation({
112105
</Tooltip>
113106
</div>
114107

115-
<div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2">
108+
<div className="flex items-center gap-2 bg-slate-200 dark:bg-slate-700 rounded py-1.5 px-2 shadow-sm">
116109
<Tooltip title={`${darkMode ? 'Light' : 'Dark'} Mode`}>
117110
{darkMode ? (
118111
<SunIconOutline

0 commit comments

Comments
 (0)