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

refactor(frontend): move slider blocks from home page into reusable component

Browse Source
This commit is contained in:
sct
2020-09-16 06:51:50 +00:00
parent 371e43356d
commit 16e74e3298
2 changed files with 89 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/Discover/index.tsx
View File

@@ -4,6 +4,7 @@ import type { MovieResult, TvResult } from '../../../server/models/Search';
import TitleCard from '../TitleCard'; import TitleCard from '../TitleCard';
import { MediaRequest } from '../../../server/entity/MediaRequest'; import { MediaRequest } from '../../../server/entity/MediaRequest';
import RequestCard from '../TitleCard/RequestCard'; import RequestCard from '../TitleCard/RequestCard';
import Slider from '../Slider';
interface MovieDiscoverResult { interface MovieDiscoverResult {
page: number; page: number;
@@ -40,34 +41,18 @@ const Discover: React.FC = () => {
</h2> </h2>
</div> </div>
</div> </div>
<div <Slider
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4" key="requests"
style={{ height: 295 }} isLoading={!requests && !requestError}
> isEmpty={!!requests && !requestError && requests.length === 0}
{requests?.map((request) => ( items={requests?.map((request) => (
<div <RequestCard
key={request.id} key={`request-slider-item-${request.id}`}
className="first:px-4 last:px-4 px-2 inline-block" tmdbId={request.mediaId}
> type={request.mediaType}
<RequestCard tmdbId={request.mediaId} type={request.mediaType} /> />
</div>
))} ))}
{!requests && />
!requestError &&
[...Array(10)].map((_item, i) => (
<div
key={`placeholder-${i}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
<TitleCard.Placeholder />
</div>
))}
{requests && !requestError && requests.length === 0 && (
<div className="text-center text-white mt-32">
No Requests found :(
</div>
)}
</div>
<div className="md:flex md:items-center md:justify-between mb-4 mt-6"> <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate"> <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
@@ -75,39 +60,25 @@ const Discover: React.FC = () => {
</h2> </h2>
</div> </div>
</div> </div>
<div <Slider
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4" key="movies"
style={{ height: 295 }} isLoading={!movieData && !movieError}
> isEmpty={false}
{movieData?.results.map((title) => ( items={movieData?.results.map((title) => (
<div <TitleCard
key={title.id} key={`popular-movie-slider-${title.id}`}
className="first:px-4 last:px-4 px-2 inline-block" id={title.id}
> image={title.posterPath}
<TitleCard status={title.request?.status}
id={title.id} summary={title.overview}
image={title.posterPath} title={title.title}
status={title.request?.status} userScore={title.voteAverage}
summary={title.overview} year={title.releaseDate}
title={title.title} mediaType={title.mediaType}
userScore={title.voteAverage} requestId={title.request?.id}
year={title.releaseDate} />
mediaType={title.mediaType}
requestId={title.request?.id}
/>
</div>
))} ))}
{!movieData && />
!movieError &&
[...Array(10)].map((_item, i) => (
<div
key={`placeholder-${i}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
<TitleCard.Placeholder />
</div>
))}
</div>
<div className="md:flex md:items-center md:justify-between mb-4 mt-4"> <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate"> <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
@@ -115,39 +86,25 @@ const Discover: React.FC = () => {
</h2> </h2>
</div> </div>
</div> </div>
<div <Slider
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4" key="tv"
style={{ height: 295 }} isLoading={!tvData && !tvError}
> isEmpty={false}
{tvData?.results.map((title) => ( items={tvData?.results.map((title) => (
<div <TitleCard
key={title.id} key={`popular-tv-slider-${title.id}`}
className="first:px-4 last:px-4 px-2 inline-block" id={title.id}
> image={title.posterPath}
<TitleCard status={title.request?.status}
id={title.id} summary={title.overview}
image={title.posterPath} title={title.name}
status={title.request?.status} userScore={title.voteAverage}
summary={title.overview} year={title.firstAirDate}
title={title.name} mediaType={title.mediaType}
userScore={title.voteAverage} requestId={title.request?.id}
year={title.firstAirDate} />
mediaType={title.mediaType}
requestId={title.request?.id}
/>
</div>
))} ))}
{!tvData && />
!tvError &&
[...Array(10)].map((_item, i) => (
<div
key={`placeholder-${i}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
<TitleCard.Placeholder />
</div>
))}
</div>
</> </>
); );
}; };

41
src/components/Slider/index.tsx Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import TitleCard from '../TitleCard';
interface SliderProps {
key: string;
items?: JSX.Element[];
isLoading: boolean;
isEmpty: boolean;
}
const Slider: React.FC<SliderProps> = ({ key, items, isLoading, isEmpty }) => {
return (
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
style={{ height: 295 }}
>
{items?.map((item, index) => (
<div
key={`${key}-${index}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
{item}
</div>
))}
{isLoading &&
[...Array(10)].map((_item, i) => (
<div
key={`placeholder-${i}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
<TitleCard.Placeholder />
</div>
))}
{isEmpty && (
<div className="text-center text-white mt-32">No Results</div>
)}
</div>
);
};
export default Slider;