gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-08 23:18:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: better error handling on client

Browse source
This commit is contained in:
Gabe Farrell 2025-11-24 20:05:46 -05:00
parent fed2c5b956
commit fdaea6284e
7 changed files with 136 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/app/components/ActivityGrid.tsx
View file

@ -73,8 +73,14 @@ export default function ActivityGrid({
<p>Loading...</p>
</div>
);
} else if (isError) {
return (
<div className="w-[500px]">
<h2>Activity</h2>
<p className="error">Error: {error.message}</p>
</div>
);
}
if (isError) return <p className="error">Error:{error.message}</p>;
// from https://css-tricks.com/snippets/javascript/lighten-darken-color/
function LightenDarkenColor(hex: string, lum: number) {

89
client/app/components/AllTimeStats.tsx
View file

@ -1,45 +1,56 @@
import { useQuery } from "@tanstack/react-query"
import { getStats } from "api/api"
import { useQuery } from "@tanstack/react-query";
import { getStats, type Stats, type ApiError } from "api/api";
export default function AllTimeStats() {
const { isPending, isError, data, error } = useQuery({
queryKey: ["stats", "all_time"],
queryFn: ({ queryKey }) => getStats(queryKey[1]),
});
const { isPending, isError, data, error } = useQuery({
queryKey: ['stats', 'all_time'],
queryFn: ({ queryKey }) => getStats(queryKey[1]),
})
if (isPending) {
return (
<div className="w-[200px]">
<h2>All Time Stats</h2>
<p>Loading...</p>
</div>
)
}
if (isError) {
return <p className="error">Error:{error.message}</p>
}
const numberClasses = 'header-font font-bold text-xl'
if (isPending) {
return (
<div className="w-[200px]">
<h2>All Time Stats</h2>
<p>Loading...</p>
</div>
);
} else if (isError) {
return (
<>
<div>
<h2>All Time Stats</h2>
<div>
<span className={numberClasses} title={data.minutes_listened + " minutes"}>{Math.floor(data.minutes_listened / 60)}</span> Hours Listened
</div>
<div>
<span className={numberClasses}>{data.listen_count}</span> Plays
</div>
<div>
<span className={numberClasses}>{data.artist_count}</span> Artists
</div>
<div>
<span className={numberClasses}>{data.album_count}</span> Albums
</div>
<div>
<span className={numberClasses}>{data.track_count}</span> Tracks
</div>
<h2>All Time Stats</h2>
<p className="error">Error: {error.message}</p>
</div>
)
}
</>
);
}
const numberClasses = "header-font font-bold text-xl";
return (
<div>
<h2>All Time Stats</h2>
<div>
<span
className={numberClasses}
title={data.minutes_listened + " minutes"}
>
{Math.floor(data.minutes_listened / 60)}
</span>{" "}
Hours Listened
</div>
<div>
<span className={numberClasses}>{data.listen_count}</span> Plays
</div>
<div>
<span className={numberClasses}>{data.artist_count}</span> Artists
</div>
<div>
<span className={numberClasses}>{data.album_count}</span> Albums
</div>
<div>
<span className={numberClasses}>{data.track_count}</span> Tracks
</div>
</div>
);
}

12
client/app/components/LastPlays.tsx
View file

@ -67,12 +67,14 @@ export default function LastPlays(props: Props) {
<p>Loading...</p>
</div>
);
} else if (isError) {
return (
<div className="w-[300px] sm:w-[500px]">
<h2>Last Played</h2>
<p className="error">Error: {error.message}</p>
</div>
);
}
if (isError) {
return <p className="error">Error: {error.message}</p>;
}
if (!data.items) return;
const listens = items ?? data.items;

11
client/app/components/TopAlbums.tsx
View file

@ -37,11 +37,14 @@ export default function TopAlbums(props: Props) {
<p>Loading...</p>
</div>
);
} else if (isError) {
return (
<div className="w-[300px]">
<h2>Top Albums</h2>
<p className="error">Error: {error.message}</p>
</div>
);
}
if (isError) {
return <p className="error">Error:{error.message}</p>;
}
if (!data.items) return;
return (
<div>

11
client/app/components/TopArtists.tsx
View file

@ -28,11 +28,14 @@ export default function TopArtists(props: Props) {
<p>Loading...</p>
</div>
);
} else if (isError) {
return (
<div className="w-[300px]">
<h2>Top Artists</h2>
<p className="error">Error: {error.message}</p>
</div>
);
}
if (isError) {
return <p className="error">Error:{error.message}</p>;
}
if (!data.items) return;
return (
<div>

10
client/app/components/TopTracks.tsx
View file

@ -35,9 +35,13 @@ const TopTracks = (props: Props) => {
<p>Loading...</p>
</div>
);
}
if (isError) {
return <p className="error">Error:{error.message}</p>;
} else if (isError) {
return (
<div className="w-[300px]">
<h2>Top Tracks</h2>
<p className="error">Error: {error.message}</p>
</div>
);
}
if (!data.items) return;