feat(frontend): basic discover page (only movies) (#74)
sct
4 years ago
committed by
GitHub
parent
258bb93be2
commit
bbfe349b52
@ -0,0 +1,92 @@
|
|||||||
|
import React, { useRef } from 'react';
|
||||||
|
import { useSWRInfinite } from 'swr';
|
||||||
|
import type { MovieResult } from '../../../server/models/Search';
|
||||||
|
import TitleCard from '../TitleCard';
|
||||||
|
import useVerticalScroll from '../../hooks/useVerticalScroll';
|
||||||
|
|
||||||
|
interface SearchResult {
|
||||||
|
page: number;
|
||||||
|
totalResults: number;
|
||||||
|
totalPages: number;
|
||||||
|
results: MovieResult[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
|
||||||
|
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `/api/v1/discover/movies?page=${pageIndex + 1}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
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>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data && !error) {
|
||||||
|
return <div>loading!</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const titles = data?.reduce(
|
||||||
|
(a, v) => [...a, ...v.results],
|
||||||
|
[] as MovieResult[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="md:flex md:items-center md:justify-between mb-8 mt-8">
|
||||||
|
<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>
|
||||||
|
</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-2 md:grid-cols-3 lg:grid-cols-4">
|
||||||
|
{titles?.map((title) => (
|
||||||
|
<li key={title.id} className="col-span-1 flex flex-col text-center">
|
||||||
|
<TitleCard
|
||||||
|
image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
|
||||||
|
status={'Not Requested'}
|
||||||
|
summary={title.overview}
|
||||||
|
title={title.title}
|
||||||
|
userScore={title.voteAverage}
|
||||||
|
year={title.releaseDate}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Discover;
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
import { useState, useEffect, useRef, MutableRefObject } from 'react';
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
|
const IS_SCROLLING_CHECK_THROTTLE = 200;
|
||||||
|
const BUFFER_HEIGHT = 200;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* useVerticalScroll is a custom hook to handle infinite scrolling
|
||||||
|
*
|
||||||
|
* @param callback Callback is executed when page reaches bottom
|
||||||
|
* @param shouldFetch Disables callback if true
|
||||||
|
*/
|
||||||
|
const useVerticalScroll = (
|
||||||
|
callback: () => void,
|
||||||
|
shouldFetch: boolean
|
||||||
|
): boolean => {
|
||||||
|
const [isScrolling, setScrolling] = useState(false);
|
||||||
|
|
||||||
|
type SetTimeoutReturnType = ReturnType<typeof setTimeout>;
|
||||||
|
const scrollingTimer: MutableRefObject<
|
||||||
|
SetTimeoutReturnType | undefined
|
||||||
|
> = useRef();
|
||||||
|
|
||||||
|
const runCallback = () => {
|
||||||
|
if (shouldFetch) {
|
||||||
|
const scrollTop = Math.max(
|
||||||
|
window.pageYOffset,
|
||||||
|
document.documentElement.scrollTop,
|
||||||
|
document.body.scrollTop
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
window.innerHeight + scrollTop >=
|
||||||
|
document.documentElement.offsetHeight - BUFFER_HEIGHT
|
||||||
|
) {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const debouncedCallback = debounce(runCallback, 50);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
runCallback();
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onScroll = () => {
|
||||||
|
if (scrollingTimer.current !== undefined) {
|
||||||
|
clearTimeout(scrollingTimer.current);
|
||||||
|
}
|
||||||
|
if (!isScrolling) {
|
||||||
|
setScrolling(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollingTimer.current = setTimeout(() => {
|
||||||
|
setScrolling(false);
|
||||||
|
}, IS_SCROLLING_CHECK_THROTTLE);
|
||||||
|
debouncedCallback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onResize = () => {
|
||||||
|
debouncedCallback();
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
window.addEventListener('resize', onResize, { passive: true });
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', onScroll);
|
||||||
|
window.removeEventListener('resize', onResize);
|
||||||
|
|
||||||
|
if (scrollingTimer.current !== undefined) {
|
||||||
|
clearTimeout(scrollingTimer.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return isScrolling;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useVerticalScroll;
|
||||||
@ -1,20 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import type { NextPage } from 'next';
|
import type { NextPage } from 'next';
|
||||||
import TitleCard from '../components/TitleCard';
|
import Discover from '../components/Discover';
|
||||||
|
|
||||||
const Index: NextPage = () => {
|
const Index: NextPage = () => {
|
||||||
return (
|
return <Discover />;
|
||||||
<>
|
|
||||||
<TitleCard
|
|
||||||
image="image.tmdb.org/t/p/w600_and_h900_bestv2/iZf0KyrE25z1sage4SYFLCCrMi9.jpg"
|
|
||||||
year="2019"
|
|
||||||
summary="Greatest movie ever"
|
|
||||||
title="1918"
|
|
||||||
userScore={98}
|
|
||||||
status="Not Requested"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|||||||
Loading…
Reference in new issue