feat(frontend): modal component and basic request hookup (#91)

This commit is contained in:
sct
2020-09-15 14:12:36 +09:00
committed by GitHub
parent 42cf45fa19
commit 626099a2c9
9 changed files with 298 additions and 29 deletions

View File

@@ -1,8 +1,7 @@
import React, { useRef } from 'react';
import useSWR, { useSWRInfinite } from 'swr';
import React from 'react';
import useSWR from 'swr';
import type { MovieResult, TvResult } from '../../../server/models/Search';
import TitleCard from '../TitleCard';
import useVerticalScroll from '../../hooks/useVerticalScroll';
interface MovieDiscoverResult {
page: number;
@@ -18,17 +17,6 @@ interface TvDiscoverResult {
results: TvResult[];
}
const getKey = (
pageIndex: number,
previousPageData: MovieDiscoverResult | null
) => {
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
return null;
}
return `/api/v1/discover/movies?page=${pageIndex + 1}`;
};
const Discover: React.FC = () => {
const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
'/api/v1/discover/movies'
@@ -47,12 +35,16 @@ const Discover: React.FC = () => {
</div>
</div>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
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="px-2 inline-block">
<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}
@@ -66,7 +58,10 @@ const Discover: React.FC = () => {
{!movieData &&
!movieError &&
[...Array(10)].map((_item, i) => (
<div key={`placeholder-${i}`} className="px-2 inline-block">
<div
key={`placeholder-${i}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
<TitleCard.Placeholder />
</div>
))}
@@ -79,12 +74,16 @@ const Discover: React.FC = () => {
</div>
</div>
<div
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
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="px-2 inline-block">
<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}
@@ -98,7 +97,10 @@ const Discover: React.FC = () => {
{!tvData &&
!tvError &&
[...Array(10)].map((_item, i) => (
<div key={`placeholder-${i}`} className="px-2 inline-block">
<div
key={`placeholder-${i}`}
className="first:px-4 last:px-4 px-2 inline-block"
>
<TitleCard.Placeholder />
</div>
))}