quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement favorites functionality across playlists components

Browse Source
This commit is contained in:
JSC
2025-08-16 21:41:57 +02:00
parent 1027a67e37
commit ad466e2f91
6 changed files with 108 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/playlists/PlaylistRow.tsx
View File

@@ -4,15 +4,22 @@ import { TableCell, TableRow } from '@/components/ui/table'
import type { Playlist } from '@/lib/api/services/playlists'
import { formatDateDistanceToNow } from '@/utils/format-date'
import { formatDuration } from '@/utils/format-duration'
import { Calendar, Clock, Edit, Music, Play, User } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Calendar, Clock, Edit, Heart, Music, Play, User } from 'lucide-react'
interface PlaylistRowProps {
playlist: Playlist
onEdit: (playlist: Playlist) => void
onSetCurrent: (playlist: Playlist) => void
onFavoriteToggle?: (playlistId: number, isFavorited: boolean) => void
}
export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps) {
export function PlaylistRow({ playlist, onEdit, onSetCurrent, onFavoriteToggle }: PlaylistRowProps) {
const handleFavoriteToggle = () => {
if (onFavoriteToggle) {
onFavoriteToggle(playlist.id, !playlist.is_favorited)
}
}
return (
<TableRow className="hover:bg-muted/50">
<TableCell>
@@ -76,6 +83,24 @@ export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps
</TableCell>
<TableCell className="text-center">
<div className="flex items-center justify-center gap-1">
{onFavoriteToggle && (
<Button
size="sm"
variant="ghost"
onClick={handleFavoriteToggle}
className="h-8 w-8 p-0"
title={playlist.is_favorited ? "Remove from favorites" : "Add to favorites"}
>
<Heart
className={cn(
'h-4 w-4 transition-all duration-200',
playlist.is_favorited
? 'fill-current text-red-500 hover:text-red-600'
: 'text-muted-foreground hover:text-foreground'
)}
/>
</Button>
)}
<Button
size="sm"
variant="ghost"

4
src/components/playlists/PlaylistTable.tsx
View File

@@ -12,9 +12,10 @@ interface PlaylistTableProps {
playlists: Playlist[]
onEdit: (playlist: Playlist) => void
onSetCurrent: (playlist: Playlist) => void
onFavoriteToggle?: (playlistId: number, isFavorited: boolean) => void
}
export function PlaylistTable({ playlists, onEdit, onSetCurrent }: PlaylistTableProps) {
export function PlaylistTable({ playlists, onEdit, onSetCurrent, onFavoriteToggle }: PlaylistTableProps) {
return (
<div className="rounded-md border">
<Table>
@@ -37,6 +38,7 @@ export function PlaylistTable({ playlists, onEdit, onSetCurrent }: PlaylistTable
playlist={playlist}
onEdit={onEdit}
onSetCurrent={onSetCurrent}
onFavoriteToggle={onFavoriteToggle}
/>
))}
</TableBody>

20
src/components/playlists/PlaylistsHeader.tsx
View File

@@ -8,7 +8,7 @@ import {
SelectValue,
} from '@/components/ui/select'
import type { PlaylistSortField, SortOrder } from '@/lib/api/services/playlists'
import { Plus, RefreshCw, Search, SortAsc, SortDesc, X } from 'lucide-react'
import { Heart, Plus, RefreshCw, Search, SortAsc, SortDesc, X } from 'lucide-react'
interface PlaylistsHeaderProps {
searchQuery: string
@@ -22,6 +22,8 @@ interface PlaylistsHeaderProps {
loading: boolean
error: string | null
playlistCount: number
showFavoritesOnly: boolean
onFavoritesToggle: (show: boolean) => void
}
export function PlaylistsHeader({
@@ -36,6 +38,8 @@ export function PlaylistsHeader({
loading,
error,
playlistCount,
showFavoritesOnly,
onFavoritesToggle,
}: PlaylistsHeaderProps) {
return (
<>
@@ -50,7 +54,10 @@ export function PlaylistsHeader({
<div className="flex items-center gap-4">
{!loading && !error && (
<div className="text-sm text-muted-foreground">
{playlistCount} playlist{playlistCount !== 1 ? 's' : ''}
{showFavoritesOnly
? `${playlistCount} favorite playlist${playlistCount !== 1 ? 's' : ''}`
: `${playlistCount} playlist${playlistCount !== 1 ? 's' : ''}`
}
</div>
)}
<Button onClick={onCreateClick}>
@@ -116,6 +123,15 @@ export function PlaylistsHeader({
)}
</Button>
<Button
variant={showFavoritesOnly ? "default" : "outline"}
size="icon"
onClick={() => onFavoritesToggle(!showFavoritesOnly)}
title={showFavoritesOnly ? "Show all playlists" : "Show only favorites"}
>
<Heart className={`h-4 w-4 ${showFavoritesOnly ? 'fill-current' : ''}`} />
</Button>
<Button
variant="outline"
size="icon"

18
src/components/playlists/PlaylistsLoadingStates.tsx
View File

@@ -1,5 +1,5 @@
import { Skeleton } from '@/components/ui/skeleton'
import { AlertCircle, Music } from 'lucide-react'
import { AlertCircle } from 'lucide-react'
interface PlaylistsLoadingProps {
count?: number
@@ -39,19 +39,25 @@ export function PlaylistsError({ error, onRetry }: PlaylistsErrorProps) {
interface PlaylistsEmptyProps {
searchQuery: string
showFavoritesOnly?: boolean
}
export function PlaylistsEmpty({ searchQuery }: PlaylistsEmptyProps) {
export function PlaylistsEmpty({ searchQuery, showFavoritesOnly = false }: PlaylistsEmptyProps) {
return (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
<Music className="h-6 w-6 text-muted-foreground" />
<span className="text-2xl">{showFavoritesOnly ? '💝' : '🎵'}</span>
</div>
<h3 className="text-lg font-semibold mb-2">No playlists found</h3>
<h3 className="text-lg font-semibold mb-2">
{showFavoritesOnly ? 'No favorite playlists found' : 'No playlists found'}
</h3>
<p className="text-muted-foreground">
{searchQuery
{showFavoritesOnly
? 'You haven\'t favorited any playlists yet. Click the heart icon on playlists to add them to your favorites.'
: searchQuery
? 'No playlists match your search criteria.'
: 'No playlists are available.'}
: 'No playlists are available.'
}
</p>
</div>
)

6
src/lib/api/services/playlists.ts
View File

@@ -19,6 +19,8 @@ export interface Playlist {
is_main: boolean
is_current: boolean
is_deletable: boolean
is_favorited: boolean
favorite_count: number
created_at: string
updated_at: string | null
sound_count: number
@@ -45,6 +47,7 @@ export interface GetPlaylistsParams {
sort_order?: SortOrder
limit?: number
offset?: number
favorites_only?: boolean
}
export class PlaylistsService {
@@ -70,6 +73,9 @@ export class PlaylistsService {
if (params?.offset) {
searchParams.append('offset', params.offset.toString())
}
if (params?.favorites_only) {
searchParams.append('favorites_only', 'true')
}
const url = searchParams.toString()
? `/api/v1/playlists/?${searchParams.toString()}`

43
src/pages/PlaylistsPage.tsx
View File

@@ -13,6 +13,7 @@ import {
type SortOrder,
playlistsService,
} from '@/lib/api/services/playlists'
import { favoritesService } from '@/lib/api/services/favorites'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router'
import { toast } from 'sonner'
@@ -27,6 +28,7 @@ export function PlaylistsPage() {
const [searchQuery, setSearchQuery] = useState('')
const [sortBy, setSortBy] = useState<PlaylistSortField>('name')
const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
const [showFavoritesOnly, setShowFavoritesOnly] = useState(false)
// Create playlist dialog state
const [showCreateDialog, setShowCreateDialog] = useState(false)
@@ -56,6 +58,7 @@ export function PlaylistsPage() {
search: debouncedSearchQuery.trim() || undefined,
sort_by: sortBy,
sort_order: sortOrder,
favorites_only: showFavoritesOnly,
})
setPlaylists(playlistData)
} catch (err) {
@@ -70,7 +73,7 @@ export function PlaylistsPage() {
useEffect(() => {
fetchPlaylists()
}, [debouncedSearchQuery, sortBy, sortOrder])
}, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly])
const handleCreatePlaylist = async () => {
if (!newPlaylist.name.trim()) {
@@ -126,6 +129,39 @@ export function PlaylistsPage() {
navigate(`/playlists/${playlist.id}/edit`)
}
const handleFavoriteToggle = async (playlistId: number, shouldFavorite: boolean) => {
try {
if (shouldFavorite) {
await favoritesService.addPlaylistFavorite(playlistId)
toast.success('Added to favorites')
} else {
await favoritesService.removePlaylistFavorite(playlistId)
toast.success('Removed from favorites')
}
// Update the playlist in the local state
setPlaylists(prevPlaylists =>
prevPlaylists.map(playlist =>
playlist.id === playlistId
? {
...playlist,
is_favorited: shouldFavorite,
favorite_count: shouldFavorite
? playlist.favorite_count + 1
: Math.max(0, playlist.favorite_count - 1),
}
: playlist,
),
)
} catch (error) {
toast.error(
`Failed to ${shouldFavorite ? 'add to' : 'remove from'} favorites: ${
error instanceof Error ? error.message : 'Unknown error'
}`,
)
}
}
const renderContent = () => {
if (loading) {
return <PlaylistsLoading />
@@ -136,7 +172,7 @@ export function PlaylistsPage() {
}
if (playlists.length === 0) {
return <PlaylistsEmpty searchQuery={searchQuery} />
return <PlaylistsEmpty searchQuery={searchQuery} showFavoritesOnly={showFavoritesOnly} />
}
return (
@@ -144,6 +180,7 @@ export function PlaylistsPage() {
playlists={playlists}
onEdit={handleEditPlaylist}
onSetCurrent={handleSetCurrent}
onFavoriteToggle={handleFavoriteToggle}
/>
)
}
@@ -167,6 +204,8 @@ export function PlaylistsPage() {
loading={loading}
error={error}
playlistCount={playlists.length}
showFavoritesOnly={showFavoritesOnly}
onFavoritesToggle={setShowFavoritesOnly}
/>
<CreatePlaylistDialog