BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

api error handling and avatar fix

Browse source
This commit is contained in:
3zachm 2023-01-20 15:20:40 -08:00
parent 53cc78a43a
commit 0a9287ab4f
2 changed files with 46 additions and 30 deletions
pages
api
fakeUsers.ts
user/[username]
index.tsx

12
pages/api/fakeUsers.ts
View file

@ -60,7 +60,17 @@ export default async function handler(
return; return;
} }
// get twitch data for user // get twitch data for user
const twitchData = await getUserByName(redis, username); let twitchData: { data: { [key: string]: any }[] };
try {
twitchData = await getUserByName(redis, username);
} catch (e) {
res
.status(500)
.json({
error: { message: "Twitch or internal API is down", code: 10100 },
});
return;
}
// if data is empty, user does not exist // if data is empty, user does not exist
if (twitchData.data.length === 0) { if (twitchData.data.length === 0) {
// temp who cares // temp who cares

64
pages/user/[username]/index.tsx
View file

@ -48,15 +48,12 @@ function UserPage() {
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.isReady]); }, [router.isReady]);
// if json is empty
if (Object.keys(channelEmotes).length === 0 && errorCode !== 10000) { if (errorCode !== null) {
return ( // 20000 = user not found
<div className="flex h-screen w-full items-center justify-center text-3xl"> // 10000 = 7tv api error
<Loading /> // 10100 = Twitch api error
</div> const errorMsg = errorCode === 20000 ? "User not found" : "API error";
);
}
if (errorCode === 20000) {
return ( return (
<m.div <m.div
className="flex h-screen w-full items-center justify-center text-3xl" className="flex h-screen w-full items-center justify-center text-3xl"
@ -64,17 +61,24 @@ function UserPage() {
animate={{ opacity: 1, y: 0, transition: { duration: 1.0 } }} animate={{ opacity: 1, y: 0, transition: { duration: 1.0 } }}
exit={{ opacity: 0, y: -25 }} exit={{ opacity: 0, y: -25 }}
> >
<p>User not found :c</p> <p>{errorMsg}</p>
</m.div> </m.div>
); );
} }
if (!userData || Object.keys(userData).length === 0) {
// if json is empty
if (
Object.keys(channelEmotes).length === 0 ||
!userData ||
Object.keys(userData).length === 0
) {
return ( return (
<div className="flex h-screen w-full items-center justify-center text-3xl"> <div className="flex h-screen w-full items-center justify-center text-3xl">
<Loading /> <Loading />
</div> </div>
); );
} }
return ( return (
<> <>
<Head> <Head>
@ -90,25 +94,27 @@ function UserPage() {
<div className="col-span-10 mb-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3"> <div className="col-span-10 mb-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3">
<div className="flex items-center justify-between p-4"> <div className="flex items-center justify-between p-4">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<Image <div className="relative bottom-[70px] w-[169px]">
src={userData.avatar_url} <Image
alt="User avatar" src={userData.avatar_url}
width={140} alt="User avatar"
height={140} width={140}
className="fixed rounded-lg border-4" height={140}
style={{ className="absolute rounded-lg border-4"
borderColor: userData.badges[0] style={{
? userData.badges[0].color borderColor: userData.badges[0]
: "grey",
// "glow" effect
boxShadow: `0px 0px 20px 1px ${
userData.badges[0]
? userData.badges[0].color ? userData.badges[0].color
: "transparent" : "grey",
}`, // "glow" effect
}} boxShadow: `0px 0px 20px 1px ${
/> userData.badges[0]
<div className="ml-[154px] flex-col"> ? userData.badges[0].color
: "transparent"
}`,
}}
/>
</div>
<div className="flex-col">
<h1 className="text-4xl font-semibold text-white"> <h1 className="text-4xl font-semibold text-white">
{userData.name} {userData.name}
</h1> </h1>