import React, { useContext, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import type { MediaRequest } from '../../../server/entity/MediaRequest';
import type { TvDetails } from '../../../server/models/Tv';
import type { MovieDetails } from '../../../server/models/Movie';
import useSWR from 'swr';
import { LanguageContext } from '../../context/LanguageContext';
import {
MediaRequestStatus,
MediaStatus,
} from '../../../server/constants/media';
import Badge from '../Common/Badge';
import { useUser, Permission } from '../../hooks/useUser';
import axios from 'axios';
import Button from '../Common/Button';
import { withProperties } from '../../utils/typeHelpers';
import Link from 'next/link';
import { defineMessages, useIntl } from 'react-intl';
import globalMessages from '../../i18n/globalMessages';
import StatusBadge from '../StatusBadge';
const messages = defineMessages({
status: 'Status',
seasons: 'Seasons',
all: 'All',
});
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
return (movie as MovieDetails).title !== undefined;
};
const RequestCardPlaceholder: React.FC = () => {
return (
);
};
interface RequestCardProps {
request: MediaRequest;
onTitleData?: (requestId: number, title: MovieDetails | TvDetails) => void;
}
const RequestCard: React.FC = ({ request, onTitleData }) => {
const { ref, inView } = useInView({
triggerOnce: true,
});
const intl = useIntl();
const { hasPermission } = useUser();
const { locale } = useContext(LanguageContext);
const url =
request.type === 'movie'
? `/api/v1/movie/${request.media.tmdbId}`
: `/api/v1/tv/${request.media.tmdbId}`;
const { data: title, error } = useSWR(
inView ? `${url}?language=${locale}` : null
);
const {
data: requestData,
error: requestError,
revalidate,
} = useSWR(`/api/v1/request/${request.id}`, {
initialData: request,
});
const modifyRequest = async (type: 'approve' | 'decline') => {
const response = await axios.post(`/api/v1/request/${request.id}/${type}`);
if (response) {
revalidate();
}
};
useEffect(() => {
if (title && onTitleData) {
onTitleData(request.id, title);
}
}, [title, onTitleData, request]);
if (!title && !error) {
return (
);
}
if (!requestData && !requestError) {
return ;
}
if (!title || !requestData) {
return ;
}
return (
{isMovie(title) ? title.title : title.name}
{request.seasons.length > 0 && (
{intl.formatMessage(messages.seasons)}
{!isMovie(title) &&
title.seasons.filter((season) => season.seasonNumber !== 0)
.length === request.seasons.length ? (
{intl.formatMessage(messages.all)}
) : (
{request.seasons.map((season) => (
{season.seasonNumber}
))}
)}
)}
{intl.formatMessage(messages.status)}
{requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN ||
requestData.status === MediaRequestStatus.DECLINED ? (
{requestData.status === MediaRequestStatus.DECLINED
? intl.formatMessage(globalMessages.declined)
: intl.formatMessage(globalMessages.failed)}
) : (
0
}
is4k={requestData.is4k}
/>
)}
{requestData.status === MediaRequestStatus.PENDING &&
hasPermission(Permission.MANAGE_REQUESTS) && (
)}
);
};
export default withProperties(RequestCard, {
Placeholder: RequestCardPlaceholder,
});