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

feat(frontend): new dashboard concept (#82)

Browse Source
This commit is contained in:
sct
2020-09-15 00:09:11 +09:00
committed by GitHub
parent b5e8428a39
commit eae38bb9ec
9 changed files with 100 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,27 @@
import React, { useRef } from 'react';
import { useSWRInfinite } from 'swr';
import type { MovieResult } from '../../../server/models/Search';
import useSWR, { useSWRInfinite } from 'swr';
import type { MovieResult, TvResult } from '../../../server/models/Search';
import TitleCard from '../TitleCard';
import useVerticalScroll from '../../hooks/useVerticalScroll';
interface SearchResult {
interface MovieDiscoverResult {
page: number;
totalResults: number;
totalPages: number;
results: MovieResult[];
}
const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
interface TvDiscoverResult {
page: number;
totalResults: number;
totalPages: number;
results: TvResult[];
}
const getKey = (
pageIndex: number,
previousPageData: MovieDiscoverResult | null
) => {
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
return null;
}
@@ -20,61 +30,30 @@ const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
};
const Discover: React.FC = () => {
const { data, error, size, setSize } = useSWRInfinite<SearchResult>(getKey, {
initialSize: 3,
});
const isLoadingInitialData = !data && !error;
const isLoadingMore =
isLoadingInitialData ||
(size > 0 && data && typeof data[size - 1] === 'undefined');
useVerticalScroll(() => {
setSize(size + 1);
}, !isLoadingMore && !isLoadingInitialData);
if (error) {
return <div>{error}</div>;
}
const titles = data?.reduce(
(a, v) => [...a, ...v.results],
[] as MovieResult[]
const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
'/api/v1/discover/movies'
);
const { data: tvData, error: tvError } = useSWR<TvDiscoverResult>(
'/api/v1/discover/tv'
);
return (
<>
<div className="md:flex md:items-center md:justify-between mb-8 mt-8">
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold leading-7 text-white sm:text-3xl sm:leading-9 sm:truncate">
Discover
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
Popular Movies
</h2>
</div>
<div className="mt-4 flex md:mt-0 md:ml-4">
<span className="relative z-0 inline-flex shadow-sm rounded-md">
<button
type="button"
className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
>
Movies
</button>
<button
type="button"
className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
>
TV Shows
</button>
</span>
</div>
</div>
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{titles?.map((title) => (
<li
key={title.id}
className="col-span-1 flex flex-col text-center items-center"
>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
style={{ height: 295 }}
>
{movieData?.results.map((title) => (
<div key={title.id} className="px-2 inline-block">
<TitleCard
image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
image={title.posterPath}
status={title.request?.status}
summary={title.overview}
title={title.title}
@@ -82,19 +61,48 @@ const Discover: React.FC = () => {
year={title.releaseDate}
mediaType={title.mediaType}
/>
</li>
</div>
))}
{(isLoadingInitialData ||
(isLoadingMore && (titles?.length ?? 0) > 0)) &&
[...Array(8)].map((_item, i) => (
<li
key={`placeholder-${i}`}
className="col-span-1 flex flex-col text-center items-center"
>
{!movieData &&
!movieError &&
[...Array(10)].map((_item, i) => (
<div key={`placeholder-${i}`} className="px-2 inline-block">
<TitleCard.Placeholder />
</li>
</div>
))}
</ul>
</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">
Popular TV Shows
</h2>
</div>
</div>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
style={{ height: 295 }}
>
{tvData?.results.map((title) => (
<div key={title.id} className="px-2 inline-block">
<TitleCard
image={title.posterPath}
status={title.request?.status}
summary={title.overview}
title={title.name}
userScore={title.voteAverage}
year={title.firstAirDate}
mediaType={title.mediaType}
/>
</div>
))}
{!tvData &&
!tvError &&
[...Array(10)].map((_item, i) => (
<div key={`placeholder-${i}`} className="px-2 inline-block">
<TitleCard.Placeholder />
</div>
))}
</div>
</>
);
};