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 { MediaRequest } from '../../../server/entity/MediaRequest';
import RequestCard from '../TitleCard/RequestCard';
import Slider from '../Slider';
interface MovieDiscoverResult {
page: number;
@@ -40,34 +41,18 @@ const Discover: React.FC = () => {
</h2>
</div>
</div>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
style={{ height: 295 }}
>
{requests?.map((request) => (
<div
key={request.id}
className="first:px-4 last:px-4 px-2 inline-block"
>
<RequestCard tmdbId={request.mediaId} type={request.mediaType} />
</div>
<Slider
key="requests"
isLoading={!requests && !requestError}
isEmpty={!!requests && !requestError && requests.length === 0}
items={requests?.map((request) => (
<RequestCard
key={`request-slider-item-${request.id}`}
tmdbId={request.mediaId}
type={request.mediaType}
/>
))}
{!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="flex-1 min-w-0">
<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>
</div>
</div>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
style={{ height: 295 }}
>
{movieData?.results.map((title) => (
<div
key={title.id}
className="first:px-4 last:px-4 px-2 inline-block"
>
<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}
/>
</div>
<Slider
key="movies"
isLoading={!movieData && !movieError}
isEmpty={false}
items={movieData?.results.map((title) => (
<TitleCard
key={`popular-movie-slider-${title.id}`}
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}
/>
))}
{!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="flex-1 min-w-0">
<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>
</div>
</div>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
style={{ height: 295 }}
>
{tvData?.results.map((title) => (
<div
key={title.id}
className="first:px-4 last:px-4 px-2 inline-block"
>
<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}
/>
</div>
<Slider
key="tv"
isLoading={!tvData && !tvError}
isEmpty={false}
items={tvData?.results.map((title) => (
<TitleCard
key={`popular-tv-slider-${title.id}`}
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}
/>
))}
{!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>
/>
</>
);
};