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 type { NextPage } from 'next';
|
||||
import TitleCard from '../components/TitleCard';
|
||||
import Discover from '../components/Discover';
|
||||
|
||||
const Index: NextPage = () => {
|
||||
return (
|
||||
<>
|
||||
<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"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
return <Discover />;
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
||||
Loading…
Reference in new issue