Gabriel Kaszewski
0ee2e04fe5
- merge lib/api/* + hooks/use-* → features/* domain modules - log-sheet + edit-review-sheet → review-sheet with mode discriminant - index.tsx → feed-tab, watchlist-tab, queue-tab - social actor-list pattern → ActorList component - movie detail inline sections → community-reviews, viewing-history
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { useCallback, useState } from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
import { Clapperboard, Plus } from "lucide-react"
|
|
import { MovieCard } from "@/components/movie-card"
|
|
import { EmptyState } from "@/components/empty-state"
|
|
import { SwipeToDelete } from "@/components/swipe-to-delete"
|
|
import { VirtualList } from "@/components/virtual-list"
|
|
import { Button } from "@/components/ui/button"
|
|
import { SearchOverlay } from "@/components/search-overlay"
|
|
import type { MovieSelection } from "@/components/search-overlay"
|
|
import { useInfiniteWatchlist, useAddToWatchlist, useRemoveFromWatchlist } from "@/features/watchlist"
|
|
import { FeedSkeleton } from "@/components/feed-tab"
|
|
|
|
export function WatchlistTab() {
|
|
const { t } = useTranslation()
|
|
const { data, isPending, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
|
useInfiniteWatchlist()
|
|
const items = data?.pages.flatMap((p) => p.items) ?? []
|
|
const addMutation = useAddToWatchlist()
|
|
const removeMutation = useRemoveFromWatchlist()
|
|
const loadMore = useCallback(() => fetchNextPage(), [fetchNextPage])
|
|
const [searchOpen, setSearchOpen] = useState(false)
|
|
|
|
function handleAdd(movie: MovieSelection) {
|
|
setSearchOpen(false)
|
|
addMutation.mutate(
|
|
movie.id
|
|
? { movie_id: movie.id }
|
|
: {
|
|
external_metadata_id: movie.external_metadata_id,
|
|
manual_title: movie.title,
|
|
manual_release_year: movie.release_year,
|
|
},
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<Button variant="outline" size="sm" className="w-full" onClick={() => setSearchOpen(true)}>
|
|
<Plus className="mr-1 size-4" />
|
|
{t("feed.addToWatchlist")}
|
|
</Button>
|
|
|
|
{searchOpen && (
|
|
<SearchOverlay open onClose={() => setSearchOpen(false)} onSelect={handleAdd} />
|
|
)}
|
|
|
|
{isPending && <FeedSkeleton />}
|
|
|
|
{!isPending && !items.length && (
|
|
<EmptyState icon={Clapperboard} title={t("feed.watchlistEmpty")} description={t("feed.watchlistEmptyDesc")} />
|
|
)}
|
|
|
|
{items.length > 0 && (
|
|
<VirtualList
|
|
items={items}
|
|
estimateSize={110}
|
|
hasMore={!!hasNextPage}
|
|
isFetching={isFetchingNextPage}
|
|
onLoadMore={loadMore}
|
|
renderItem={(entry) => (
|
|
<SwipeToDelete
|
|
onDelete={() => removeMutation.mutate(entry.movie.id)}
|
|
confirmTitle={t("feed.removeFromWatchlist")}
|
|
confirmDescription={entry.movie.title}
|
|
>
|
|
<MovieCard movie={entry.movie} variant="full" />
|
|
</SwipeToDelete>
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|