feat: item detail with rip override, re-match and remove
This commit is contained in:
@@ -5,6 +5,7 @@ import Shell from './shell'
|
||||
import SetupPage from './pages/SetupPage'
|
||||
import LoginPage from './pages/LoginPage'
|
||||
import LibraryPage from './pages/LibraryPage'
|
||||
import ItemPage from './pages/ItemPage'
|
||||
import ScanPage from './pages/ScanPage'
|
||||
import AddPage from './pages/AddPage'
|
||||
import SettingsPage from './pages/SettingsPage'
|
||||
@@ -34,6 +35,7 @@ export default function App() {
|
||||
}
|
||||
>
|
||||
<Route path="/library" element={<LibraryPage />} />
|
||||
<Route path="/item/:id" element={<ItemPage />} />
|
||||
<Route path="/scan" element={<ScanPage />} />
|
||||
<Route path="/add" element={<AddPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
|
||||
206
web/src/pages/ItemPage.tsx
Normal file
206
web/src/pages/ItemPage.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { api } from '../api.js'
|
||||
import type { DigitalAlbum, Item } from '../types.js'
|
||||
import Cover from '../components/Cover.js'
|
||||
|
||||
export default function ItemPage() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const [item, setItem] = useState<Item | null>(null)
|
||||
const [error, setError] = useState(false)
|
||||
const [matching, setMatching] = useState(false)
|
||||
const [albumQuery, setAlbumQuery] = useState('')
|
||||
const [albums, setAlbums] = useState<DigitalAlbum[] | null>(null)
|
||||
const [pickedAlbum, setPickedAlbum] = useState<number | null>(null)
|
||||
const [confirmRemove, setConfirmRemove] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
void api
|
||||
.getItem(Number(id))
|
||||
.then(setItem)
|
||||
.catch(() => setError(true))
|
||||
}, [id])
|
||||
|
||||
function searchAlbums() {
|
||||
void api
|
||||
.searchAlbums(albumQuery)
|
||||
.then((res) => setAlbums(res.albums))
|
||||
.catch(() => setAlbums([]))
|
||||
}
|
||||
|
||||
function applyMatch(albumId: number | null) {
|
||||
if (!item) return
|
||||
void api.setMatch(item.id, albumId).then(setItem)
|
||||
}
|
||||
|
||||
function remove() {
|
||||
if (!item) return
|
||||
void api.deleteItem(item.id).then(() => navigate('/library'))
|
||||
}
|
||||
|
||||
if (error) return <p className="py-8 text-center text-sm text-red-400">Item not found.</p>
|
||||
if (!item) return <p className="py-8 text-center text-sm text-neutral-400">Loading…</p>
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Cover src={item.artworkUrl} alt="" className="size-32 shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-lg font-semibold leading-tight">{item.title}</h2>
|
||||
<p className="text-neutral-400">{item.artist}</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{[item.year, item.formats.join(', '), item.labels.join(', '), item.catno, item.country]
|
||||
.filter(Boolean)
|
||||
.join(' · ')}
|
||||
</p>
|
||||
{item.genres.length > 0 && <p className="mt-1 text-xs text-neutral-500">{item.genres.join(', ')}</p>}
|
||||
<a
|
||||
href={`https://www.discogs.com/release/${item.discogsReleaseId}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="mt-1 inline-block text-xs text-emerald-400"
|
||||
>
|
||||
View on Discogs ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{item.ripStatus === 'ripped' ? (
|
||||
<p className="rounded-xl bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">
|
||||
In your digital collection ✓
|
||||
{item.ripOverride !== null && ' (manually set)'}
|
||||
</p>
|
||||
) : (
|
||||
<p className="rounded-xl bg-amber-500/10 px-4 py-3 text-sm text-amber-400">Not ripped yet</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.ripStatus === 'ripped' ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void api.setRip(item.id, false).then(setItem)}
|
||||
className="rounded-xl border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
|
||||
>
|
||||
Mark not ripped
|
||||
</button>
|
||||
{item.ripOverride !== null && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void api.setRip(item.id, null).then(setItem)}
|
||||
className="rounded-xl border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
|
||||
>
|
||||
Reset to auto
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void api.setRip(item.id, true).then(setItem)}
|
||||
className="rounded-xl border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
|
||||
>
|
||||
Mark ripped
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="rounded-xl border border-neutral-800 bg-neutral-900 p-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMatching((m) => !m)}
|
||||
className="text-sm font-medium text-neutral-200"
|
||||
aria-expanded={matching}
|
||||
>
|
||||
Re-match
|
||||
</button>
|
||||
{matching && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={albumQuery}
|
||||
onChange={(e) => setAlbumQuery(e.target.value)}
|
||||
placeholder="Search your digital library"
|
||||
className="min-w-0 flex-1 rounded-lg border border-neutral-700 bg-neutral-950 px-3 py-1.5 text-sm"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={searchAlbums}
|
||||
className="rounded-lg border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
{albums && albums.length === 0 && <p className="text-sm text-neutral-500">No matches in your library.</p>}
|
||||
{albums && albums.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
{albums.map((a) => (
|
||||
<label key={a.id} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="radio"
|
||||
name="album"
|
||||
checked={pickedAlbum === a.id}
|
||||
onChange={() => setPickedAlbum(a.id)}
|
||||
/>
|
||||
{a.artist} — {a.title}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pickedAlbum === null}
|
||||
onClick={() => applyMatch(pickedAlbum)}
|
||||
className="rounded-lg bg-emerald-500 px-3 py-1.5 text-sm font-medium text-neutral-950 disabled:opacity-50"
|
||||
>
|
||||
Link
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyMatch(null)}
|
||||
className="rounded-lg border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
|
||||
>
|
||||
Unlink
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{item.tracklist.length > 0 && (
|
||||
<details className="rounded-xl border border-neutral-800 bg-neutral-900 p-3" open>
|
||||
<summary className="cursor-pointer text-sm text-neutral-300">Tracklist</summary>
|
||||
<ol className="mt-2 space-y-1 text-sm text-neutral-400">
|
||||
{item.tracklist.map((t, i) => (
|
||||
<li key={i} className="flex gap-2">
|
||||
<span className="w-8 shrink-0 text-neutral-600">{t.position}</span>
|
||||
<span>{t.title}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</details>
|
||||
)}
|
||||
|
||||
{item.barcodes.length > 0 && (
|
||||
<p className="text-xs text-neutral-500">Barcodes: {item.barcodes.join(', ')}</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between border-t border-neutral-800 pt-4">
|
||||
<Link to="/library" className="text-sm text-neutral-400">
|
||||
← Back
|
||||
</Link>
|
||||
{confirmRemove ? (
|
||||
<button type="button" onClick={remove} className="text-sm font-medium text-red-400">
|
||||
Confirm remove
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={() => setConfirmRemove(true)} className="text-sm text-red-400">
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
113
web/test/item.test.tsx
Normal file
113
web/test/item.test.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { MemoryRouter, Route, Routes } from 'react-router-dom'
|
||||
import ItemPage from '../src/pages/ItemPage.js'
|
||||
import type { Item } from '../src/types.js'
|
||||
|
||||
vi.mock('../src/api.js', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('../src/api.js')>()
|
||||
return {
|
||||
...actual,
|
||||
api: { ...actual.api, getItem: vi.fn(), setRip: vi.fn(), setMatch: vi.fn(), deleteItem: vi.fn(), searchAlbums: vi.fn() },
|
||||
}
|
||||
})
|
||||
|
||||
import { api } from '../src/api.js'
|
||||
|
||||
const item: Item = {
|
||||
id: 1,
|
||||
discogsReleaseId: 1001,
|
||||
title: 'Motion',
|
||||
artist: 'The Cinematic Orchestra',
|
||||
year: 1999,
|
||||
formats: ['CD'],
|
||||
genres: ['Electronic'],
|
||||
labels: ['Ninja Tune'],
|
||||
tracklist: [{ position: '1', title: 'Overture' }],
|
||||
catno: 'ZENCD012',
|
||||
country: 'UK',
|
||||
artworkUrl: '/artwork/abc.jpg',
|
||||
barcodes: ['5021592210629'],
|
||||
dateAdded: '2026-08-29',
|
||||
ripOverride: null,
|
||||
ripStatus: 'not_ripped',
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.mocked(api.getItem).mockReset()
|
||||
vi.mocked(api.getItem).mockResolvedValue(item as never)
|
||||
vi.mocked(api.setRip).mockReset()
|
||||
vi.mocked(api.setMatch).mockReset()
|
||||
vi.mocked(api.deleteItem).mockReset()
|
||||
vi.mocked(api.searchAlbums).mockReset()
|
||||
})
|
||||
|
||||
function renderItem() {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={['/item/1']}>
|
||||
<Routes>
|
||||
<Route path="/item/:id" element={<ItemPage />} />
|
||||
<Route path="/library" element={<p>library</p>} />
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
)
|
||||
}
|
||||
|
||||
describe('ItemPage', () => {
|
||||
it('renders metadata and the rip-status banner', async () => {
|
||||
renderItem()
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: 'Motion' })).toBeTruthy())
|
||||
expect(screen.getByText('The Cinematic Orchestra')).toBeTruthy()
|
||||
expect(screen.getByText(/not ripped yet/i)).toBeTruthy()
|
||||
expect(screen.getByText(/ZENCD012/)).toBeTruthy()
|
||||
expect(screen.getByText(/5021592210629/)).toBeTruthy()
|
||||
expect(screen.getByText('Overture')).toBeTruthy()
|
||||
expect(screen.getByRole('link', { name: /view on discogs/i }).getAttribute('href')).toBe(
|
||||
'https://www.discogs.com/release/1001'
|
||||
)
|
||||
})
|
||||
|
||||
it('rip override: mark ripped, then reset to auto', async () => {
|
||||
vi.mocked(api.setRip).mockResolvedValue({ ...item, ripOverride: true, ripStatus: 'ripped' } as never)
|
||||
renderItem()
|
||||
await userEvent.click(await screen.findByRole('button', { name: /mark ripped/i }))
|
||||
await waitFor(() => expect(api.setRip).toHaveBeenCalledWith(1, true))
|
||||
await waitFor(() => expect(screen.getByText(/in your digital collection/i)).toBeTruthy())
|
||||
|
||||
vi.mocked(api.setRip).mockResolvedValue(item as never)
|
||||
await userEvent.click(screen.getByRole('button', { name: /reset to auto/i }))
|
||||
await waitFor(() => expect(api.setRip).toHaveBeenCalledWith(1, null))
|
||||
})
|
||||
|
||||
it('re-match: search albums and link one', async () => {
|
||||
vi.mocked(api.searchAlbums).mockResolvedValue({
|
||||
albums: [{ id: 77, subsonicId: 'a1', title: 'Motion (Remaster)', artist: 'The Cinematic Orchestra' }],
|
||||
} as never)
|
||||
vi.mocked(api.setMatch).mockResolvedValue({ ...item, ripStatus: 'ripped' } as never)
|
||||
renderItem()
|
||||
await userEvent.click(await screen.findByRole('button', { name: /re-match/i }))
|
||||
await userEvent.click(screen.getByRole('button', { name: /^search$/i }))
|
||||
const albumRadio = await screen.findByRole('radio', { name: /motion \(remaster\)/i })
|
||||
await userEvent.click(albumRadio)
|
||||
await userEvent.click(screen.getByRole('button', { name: /^link$/i }))
|
||||
await waitFor(() => expect(api.setMatch).toHaveBeenCalledWith(1, 77))
|
||||
})
|
||||
|
||||
it('unlink clears the match', async () => {
|
||||
vi.mocked(api.setMatch).mockResolvedValue(item as never)
|
||||
renderItem()
|
||||
await userEvent.click(await screen.findByRole('button', { name: /re-match/i }))
|
||||
await userEvent.click(screen.getByRole('button', { name: /^unlink$/i }))
|
||||
await waitFor(() => expect(api.setMatch).toHaveBeenCalledWith(1, null))
|
||||
})
|
||||
|
||||
it('remove deletes the item and navigates back to the library', async () => {
|
||||
vi.mocked(api.deleteItem).mockResolvedValue({ ok: true } as never)
|
||||
renderItem()
|
||||
await userEvent.click(await screen.findByRole('button', { name: /^remove$/i }))
|
||||
await userEvent.click(await screen.findByRole('button', { name: /^confirm remove$/i }))
|
||||
await waitFor(() => expect(api.deleteItem).toHaveBeenCalledWith(1))
|
||||
await waitFor(() => expect(screen.getByText('library')).toBeTruthy())
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user