mirror of
https://github.com/gabehf/Koito.git
synced 2026-03-13 01:20:26 -07:00
fix: useQuery instead of useEffect for now playing
This commit is contained in:
parent
d0c4d078d5
commit
164a9dc56f
2 changed files with 471 additions and 402 deletions
|
|
@ -1,147 +1,150 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { timeSince } from "~/utils/utils"
|
||||
import ArtistLinks from "./ArtistLinks"
|
||||
import { deleteListen, getLastListens, type getItemsArgs, type Listen, type Track } from "api/api"
|
||||
import { Link } from "react-router"
|
||||
import { useAppContext } from "~/providers/AppProvider"
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { timeSince } from "~/utils/utils";
|
||||
import ArtistLinks from "./ArtistLinks";
|
||||
import {
|
||||
deleteListen,
|
||||
getLastListens,
|
||||
getNowPlaying,
|
||||
type getItemsArgs,
|
||||
type Listen,
|
||||
type Track,
|
||||
} from "api/api";
|
||||
import { Link } from "react-router";
|
||||
import { useAppContext } from "~/providers/AppProvider";
|
||||
|
||||
interface Props {
|
||||
limit: number
|
||||
artistId?: Number
|
||||
albumId?: Number
|
||||
trackId?: number
|
||||
hideArtists?: boolean
|
||||
showNowPlaying?: boolean
|
||||
limit: number;
|
||||
artistId?: Number;
|
||||
albumId?: Number;
|
||||
trackId?: number;
|
||||
hideArtists?: boolean;
|
||||
showNowPlaying?: boolean;
|
||||
}
|
||||
|
||||
export default function LastPlays(props: Props) {
|
||||
const { user } = useAppContext()
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: ['last-listens', {
|
||||
limit: props.limit,
|
||||
period: 'all_time',
|
||||
artist_id: props.artistId,
|
||||
album_id: props.albumId,
|
||||
track_id: props.trackId
|
||||
}],
|
||||
queryFn: ({ queryKey }) => getLastListens(queryKey[1] as getItemsArgs),
|
||||
})
|
||||
const { user } = useAppContext();
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
"last-listens",
|
||||
{
|
||||
limit: props.limit,
|
||||
period: "all_time",
|
||||
artist_id: props.artistId,
|
||||
album_id: props.albumId,
|
||||
track_id: props.trackId,
|
||||
},
|
||||
],
|
||||
queryFn: ({ queryKey }) => getLastListens(queryKey[1] as getItemsArgs),
|
||||
});
|
||||
const { data: npData } = useQuery({
|
||||
queryKey: ["now-playing"],
|
||||
queryFn: () => getNowPlaying(),
|
||||
});
|
||||
|
||||
const [items, setItems] = useState<Listen[] | null>(null);
|
||||
|
||||
const [items, setItems] = useState<Listen[] | null>(null)
|
||||
const [nowPlaying, setNowPlaying] = useState<Track | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/apis/web/v1/now-playing')
|
||||
.then(r => r.json())
|
||||
.then(r => {
|
||||
console.log(r)
|
||||
if (r.currently_playing) {
|
||||
setNowPlaying(r.track)
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handleDelete = async (listen: Listen) => {
|
||||
if (!data) return
|
||||
try {
|
||||
const res = await deleteListen(listen)
|
||||
if (res.ok || (res.status >= 200 && res.status < 300)) {
|
||||
setItems((prev) => (prev ?? data.items).filter((i) => i.time !== listen.time))
|
||||
} else {
|
||||
console.error("Failed to delete listen:", res.status)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error deleting listen:", err)
|
||||
}
|
||||
const handleDelete = async (listen: Listen) => {
|
||||
if (!data) return;
|
||||
try {
|
||||
const res = await deleteListen(listen);
|
||||
if (res.ok || (res.status >= 200 && res.status < 300)) {
|
||||
setItems((prev) =>
|
||||
(prev ?? data.items).filter((i) => i.time !== listen.time)
|
||||
);
|
||||
} else {
|
||||
console.error("Failed to delete listen:", res.status);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error deleting listen:", err);
|
||||
}
|
||||
};
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[300px] sm:w-[500px]">
|
||||
<h2>Last Played</h2>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (isError) {
|
||||
return <p className="error">Error: {error.message}</p>
|
||||
}
|
||||
|
||||
const listens = items ?? data.items
|
||||
|
||||
let params = ''
|
||||
params += props.artistId ? `&artist_id=${props.artistId}` : ''
|
||||
params += props.albumId ? `&album_id=${props.albumId}` : ''
|
||||
params += props.trackId ? `&track_id=${props.trackId}` : ''
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="text-sm sm:text-[16px]">
|
||||
<h2 className="hover:underline">
|
||||
<Link to={`/listens?period=all_time${params}`}>Last Played</Link>
|
||||
</h2>
|
||||
<table className="-ml-4">
|
||||
<tbody>
|
||||
{props.showNowPlaying && nowPlaying &&
|
||||
<tr className="group hover:bg-[--color-bg-secondary]">
|
||||
<td className="w-[18px] pr-2 align-middle" >
|
||||
</td>
|
||||
<td
|
||||
className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0"
|
||||
>
|
||||
Now Playing
|
||||
</td>
|
||||
<td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
|
||||
{props.hideArtists ? null : (
|
||||
<>
|
||||
<ArtistLinks artists={nowPlaying.artists} /> –{' '}
|
||||
</>
|
||||
)}
|
||||
<Link
|
||||
className="hover:text-[--color-fg-secondary]"
|
||||
to={`/track/${nowPlaying.id}`}
|
||||
>
|
||||
{nowPlaying.title}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
{listens.map((item) => (
|
||||
<tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]">
|
||||
<td className="w-[18px] pr-2 align-middle" >
|
||||
<button
|
||||
onClick={() => handleDelete(item)}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)"
|
||||
aria-label="Delete"
|
||||
hidden={user === null || user === undefined}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</td>
|
||||
<td
|
||||
className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0"
|
||||
title={new Date(item.time).toString()}
|
||||
>
|
||||
{timeSince(new Date(item.time))}
|
||||
</td>
|
||||
<td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
|
||||
{props.hideArtists ? null : (
|
||||
<>
|
||||
<ArtistLinks artists={item.track.artists} /> –{' '}
|
||||
</>
|
||||
)}
|
||||
<Link
|
||||
className="hover:text-[--color-fg-secondary]"
|
||||
to={`/track/${item.track.id}`}
|
||||
>
|
||||
{item.track.title}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
<div className="w-[300px] sm:w-[500px]">
|
||||
<h2>Last Played</h2>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isError) {
|
||||
return <p className="error">Error: {error.message}</p>;
|
||||
}
|
||||
|
||||
const listens = items ?? data.items;
|
||||
|
||||
let params = "";
|
||||
params += props.artistId ? `&artist_id=${props.artistId}` : "";
|
||||
params += props.albumId ? `&album_id=${props.albumId}` : "";
|
||||
params += props.trackId ? `&track_id=${props.trackId}` : "";
|
||||
|
||||
return (
|
||||
<div className="text-sm sm:text-[16px]">
|
||||
<h2 className="hover:underline">
|
||||
<Link to={`/listens?period=all_time${params}`}>Last Played</Link>
|
||||
</h2>
|
||||
<table className="-ml-4">
|
||||
<tbody>
|
||||
{props.showNowPlaying && npData && npData.currently_playing && (
|
||||
<tr className="group hover:bg-[--color-bg-secondary]">
|
||||
<td className="w-[18px] pr-2 align-middle"></td>
|
||||
<td className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0">
|
||||
Now Playing
|
||||
</td>
|
||||
<td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
|
||||
{props.hideArtists ? null : (
|
||||
<>
|
||||
<ArtistLinks artists={npData.track.artists} /> –{" "}
|
||||
</>
|
||||
)}
|
||||
<Link
|
||||
className="hover:text-[--color-fg-secondary]"
|
||||
to={`/track/${npData.track.id}`}
|
||||
>
|
||||
{npData.track.title}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{listens.map((item) => (
|
||||
<tr
|
||||
key={`last_listen_${item.time}`}
|
||||
className="group hover:bg-[--color-bg-secondary]"
|
||||
>
|
||||
<td className="w-[18px] pr-2 align-middle">
|
||||
<button
|
||||
onClick={() => handleDelete(item)}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)"
|
||||
aria-label="Delete"
|
||||
hidden={user === null || user === undefined}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</td>
|
||||
<td
|
||||
className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0"
|
||||
title={new Date(item.time).toString()}
|
||||
>
|
||||
{timeSince(new Date(item.time))}
|
||||
</td>
|
||||
<td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
|
||||
{props.hideArtists ? null : (
|
||||
<>
|
||||
<ArtistLinks artists={item.track.artists} /> –{" "}
|
||||
</>
|
||||
)}
|
||||
<Link
|
||||
className="hover:text-[--color-fg-secondary]"
|
||||
to={`/track/${item.track.id}`}
|
||||
>
|
||||
{item.track.title}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue