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

fix: hide delete listen button when not logged in

Browse source
This commit is contained in:
Gabe Farrell 2025-06-16 11:22:53 -04:00
parent ef064cd9bd
commit 5a8b999f73
2 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import { timeSince } from "~/utils/utils"
import ArtistLinks from "./ArtistLinks" import ArtistLinks from "./ArtistLinks"
import { deleteListen, getLastListens, type getItemsArgs, type Listen } from "api/api" import { deleteListen, getLastListens, type getItemsArgs, type Listen } from "api/api"
import { Link } from "react-router" import { Link } from "react-router"
import { useAppContext } from "~/providers/AppProvider"
interface Props { interface Props {
limit: number limit: number
@ -14,6 +15,8 @@ interface Props {
} }
export default function LastPlays(props: Props) { export default function LastPlays(props: Props) {
const { user } = useAppContext()
console.log(user)
const { isPending, isError, data, error } = useQuery({ const { isPending, isError, data, error } = useQuery({
queryKey: ['last-listens', { queryKey: ['last-listens', {
limit: props.limit, limit: props.limit,
@ -69,11 +72,12 @@ export default function LastPlays(props: Props) {
<tbody> <tbody>
{listens.map((item) => ( {listens.map((item) => (
<tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]"> <tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]">
<td className="w-[1px] pr-2 align-middle"> <td className="w-[18px] pr-2 align-middle" >
<button <button
onClick={() => handleDelete(item)} onClick={() => handleDelete(item)}
className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)" className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)"
aria-label="Delete" aria-label="Delete"
hidden={user === null || user === undefined}
> >
× ×
</button> </button>

5
client/app/routes/Charts/Listens.tsx
View file

@ -4,6 +4,7 @@ import { deleteListen, type Listen, type PaginatedResponse } from "api/api";
import { timeSince } from "~/utils/utils"; import { timeSince } from "~/utils/utils";
import ArtistLinks from "~/components/ArtistLinks"; import ArtistLinks from "~/components/ArtistLinks";
import { useState } from "react"; import { useState } from "react";
import { useAppContext } from "~/providers/AppProvider";
export async function clientLoader({ request }: LoaderFunctionArgs) { export async function clientLoader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url); const url = new URL(request.url);
@ -25,6 +26,7 @@ export default function Listens() {
const { listens: initialData } = useLoaderData<{ listens: PaginatedResponse<Listen> }>(); const { listens: initialData } = useLoaderData<{ listens: PaginatedResponse<Listen> }>();
const [items, setItems] = useState<Listen[] | null>(null) const [items, setItems] = useState<Listen[] | null>(null)
const { user } = useAppContext()
const handleDelete = async (listen: Listen) => { const handleDelete = async (listen: Listen) => {
if (!initialData) return if (!initialData) return
@ -61,11 +63,12 @@ export default function Listens() {
<tbody> <tbody>
{listens.map((item) => ( {listens.map((item) => (
<tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]"> <tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]">
<td className="w-[1px] pr-2 align-middle"> <td className="w-[17px] pr-2 align-middle">
<button <button
onClick={() => handleDelete(item)} onClick={() => handleDelete(item)}
className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)" className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)"
aria-label="Delete" aria-label="Delete"
hidden={user === null || user === undefined}
> >
× ×
</button> </button>