feat(frontend): request card / recent requests

pull/92/head
sct 4 years ago
parent a3beeede7e
commit 371e43356d

@ -11,9 +11,18 @@ requestRoutes.get('/', async (req, res, next) => {
const requestRepository = getRepository(MediaRequest); const requestRepository = getRepository(MediaRequest);
try { try {
const requests = req.user?.hasPermission(Permission.MANAGE_REQUESTS) const requests = req.user?.hasPermission(Permission.MANAGE_REQUESTS)
? await requestRepository.find() ? await requestRepository.find({
order: {
id: 'DESC',
},
take: 20,
})
: await requestRepository.find({ : await requestRepository.find({
where: { requestedBy: { id: req.user?.id } }, where: { requestedBy: { id: req.user?.id } },
order: {
id: 'DESC',
},
take: 20,
}); });
return res.status(200).json(requests); return res.status(200).json(requests);

@ -2,6 +2,8 @@ import React from 'react';
import useSWR from 'swr'; import useSWR from 'swr';
import type { MovieResult, TvResult } from '../../../server/models/Search'; import type { MovieResult, TvResult } from '../../../server/models/Search';
import TitleCard from '../TitleCard'; import TitleCard from '../TitleCard';
import { MediaRequest } from '../../../server/entity/MediaRequest';
import RequestCard from '../TitleCard/RequestCard';
interface MovieDiscoverResult { interface MovieDiscoverResult {
page: number; page: number;
@ -25,8 +27,47 @@ const Discover: React.FC = () => {
'/api/v1/discover/tv' '/api/v1/discover/tv'
); );
const { data: requests, error: requestError } = useSWR<MediaRequest[]>(
'/api/v1/request'
);
return ( return (
<> <>
<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">
Recent Requests
</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>
))}
{!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="md:flex md:items-center md:justify-between mb-4 mt-6">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate"> <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">

@ -0,0 +1,56 @@
import React from 'react';
import useSWR from 'swr';
import type { MovieDetails } from '../../../server/models/Movie';
import type { TvDetails } from '../../../server/models/Tv';
import TitleCard from '.';
interface TmdbTitleCardProps {
tmdbId: number;
type: 'movie' | 'tv';
}
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
return (movie as MovieDetails).title !== undefined;
};
const RequestCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
const url =
type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
const { data: title, error } = useSWR<MovieDetails | TvDetails>(url);
if (!title && !error) {
return <TitleCard.Placeholder />;
}
if (!title) {
return <TitleCard.Placeholder />;
}
return isMovie(title) ? (
<TitleCard
id={title.id}
image={title.posterPath}
status={title.request?.status}
summary={title.overview}
title={title.title}
userScore={title.voteAverage}
year={title.releaseDate}
mediaType={'movie'}
requestId={title.request?.id}
/>
) : (
<TitleCard
id={title.id}
image={title.posterPath}
status={title.request?.status}
summary={title.overview}
title={title.name}
userScore={title.voteAverage}
year={title.firstAirDate}
mediaType={'tv'}
requestId={title.request?.id}
/>
);
};
export default RequestCard;

@ -13,7 +13,7 @@ import MovieRequestModal from '../RequestModal/MovieRequestModal';
interface TitleCardProps { interface TitleCardProps {
id: number; id: number;
image?: string; image?: string;
summary: string; summary?: string;
year: string; year: string;
title: string; title: string;
userScore: number; userScore: number;

Loading…
Cancel
Save