import React, { useContext, useState } from 'react'; import { useInView } from 'react-intersection-observer'; import type { MediaRequest } from '../../../../server/entity/MediaRequest'; import { useIntl, FormattedDate, FormattedRelativeTime, defineMessages, } from 'react-intl'; import { useUser, Permission } from '../../../hooks/useUser'; import { LanguageContext } from '../../../context/LanguageContext'; import type { MovieDetails } from '../../../../server/models/Movie'; import type { TvDetails } from '../../../../server/models/Tv'; import useSWR from 'swr'; import Badge from '../../Common/Badge'; import StatusBadge from '../../StatusBadge'; import Table from '../../Common/Table'; import { MediaRequestStatus, MediaStatus, } from '../../../../server/constants/media'; import Button from '../../Common/Button'; import axios from 'axios'; import globalMessages from '../../../i18n/globalMessages'; import Link from 'next/link'; import { useToasts } from 'react-toast-notifications'; import RequestModal from '../../RequestModal'; const messages = defineMessages({ seasons: 'Seasons', notavailable: 'N/A', failedretry: 'Something went wrong while retrying the request.', }); const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { return (movie as MovieDetails).title !== undefined; }; interface RequestItemProps { request: MediaRequest; revalidateList: () => void; } const RequestItem: React.FC = ({ request, revalidateList, }) => { const { ref, inView } = useInView({ triggerOnce: true, }); const { addToast } = useToasts(); const intl = useIntl(); const { hasPermission } = useUser(); const [showEditModal, setShowEditModal] = useState(false); 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, revalidate, mutate } = useSWR( `/api/v1/request/${request.id}`, { initialData: request, } ); const [isRetrying, setRetrying] = useState(false); const modifyRequest = async (type: 'approve' | 'decline') => { const response = await axios.post(`/api/v1/request/${request.id}/${type}`); if (response) { revalidate(); } }; const deleteRequest = async () => { await axios.delete(`/api/v1/request/${request.id}`); revalidateList(); }; const retryRequest = async () => { setRetrying(true); try { const result = await axios.post(`/api/v1/request/${request.id}/retry`); mutate(result.data); } catch (e) { addToast(intl.formatMessage(messages.failedretry), { autoDismiss: true, appearance: 'error', }); } finally { setRetrying(false); } }; if (!title && !error) { return ( ); } if (!title || !requestData) { return ( ); } return ( setShowEditModal(false)} onComplete={() => { revalidateList(); setShowEditModal(false); }} />
{isMovie(title) ? title.title : title.name}
{requestData.requestedBy.displayName}
{requestData.seasons.length > 0 && (
{intl.formatMessage(messages.seasons)} {requestData.seasons.map((season) => ( {season.seasonNumber} ))}
)}
{requestData.media.status === MediaStatus.UNKNOWN || requestData.status === MediaRequestStatus.DECLINED ? ( {requestData.status === MediaRequestStatus.DECLINED ? intl.formatMessage(globalMessages.declined) : intl.formatMessage(globalMessages.failed)} ) : ( 0 } is4k={requestData.is4k} /> )}
{requestData.modifiedBy ? (
{requestData.modifiedBy.displayName} ( )
) : ( N/A )}
{requestData.media.status === MediaStatus.UNKNOWN && requestData.status !== MediaRequestStatus.DECLINED && hasPermission(Permission.MANAGE_REQUESTS) && ( )} {requestData.status !== MediaRequestStatus.PENDING && hasPermission(Permission.MANAGE_REQUESTS) && ( )} {requestData.status === MediaRequestStatus.PENDING && hasPermission(Permission.MANAGE_REQUESTS) && ( <> )} ); }; export default RequestItem;