shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-29 13:33:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): discover tv/movies full page

Browse Source 
Also adds ListView component for infinite scrolling pages
This commit is contained in:
sct
2020-09-17 03:10:00 +00:00
parent 31809d952c
commit be0003a85d
10 changed files with 260 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/Search/index.tsx
View File

@@ -6,8 +6,7 @@ import {
PersonResult,
} from '../../../server/models/Search';
import { useSWRInfinite } from 'swr';
import useVerticalScroll from '../../hooks/useVerticalScroll';
import TitleCard from '../TitleCard';
import ListView from '../Common/ListView';
interface SearchResult {
page: number;
@@ -38,9 +37,9 @@ const Search: React.FC = () => {
isLoadingInitialData ||
(size > 0 && data && typeof data[size - 1] === 'undefined');
useVerticalScroll(() => {
const fetchMore = () => {
setSize(size + 1);
}, !isLoadingMore && !isLoadingInitialData);
};
if (error) {
return <div>{error}</div>;
@@ -76,71 +75,14 @@ const Search: React.FC = () => {
</span>
</div>
</div>
{!isLoadingInitialData && titles?.length === 0 && (
<div className="w-full mt-64 text-2xl text-center text-cool-gray-400">
No Results
</div>
)}
<ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{titles?.map((title) => {
let titleCard: React.ReactNode;
switch (title.mediaType) {
case 'movie':
titleCard = (
<TitleCard
id={title.id}
image={title.posterPath}
status={title.request?.status}
summary={title.overview}
title={title.title}
userScore={title.voteAverage}
year={title.releaseDate}
mediaType={title.mediaType}
requestId={title.request?.id}
/>
);
break;
case 'tv':
titleCard = (
<TitleCard
id={title.id}
image={title.posterPath}
status={title.request?.status}
summary={title.overview}
title={title.name}
userScore={title.voteAverage}
year={title.firstAirDate}
mediaType={title.mediaType}
requestId={title.request?.id}
/>
);
break;
case 'person':
titleCard = <div>{title.name}</div>;
break;
}
return (
<li
key={title.id}
className="col-span-1 flex flex-col text-center items-center"
>
{titleCard}
</li>
);
})}
{(isLoadingInitialData ||
(isLoadingMore && (titles?.length ?? 0) > 0)) &&
[...Array(10)].map((_item, i) => (
<li
key={`placeholder-${i}`}
className="col-span-1 flex flex-col text-center items-center"
>
<TitleCard.Placeholder />
</li>
))}
</ul>
<ListView
items={titles}
isEmpty={!isLoadingInitialData && titles?.length === 0}
isLoading={
isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
}
onScrollBottom={fetchMore}
/>
</>
);
};