import { DownloadIcon } from '@heroicons/react/outline'; import { BellIcon, CheckIcon, ClockIcon } from '@heroicons/react/solid'; import Link from 'next/link'; import { useCallback, useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; import { MediaStatus } from '../../../server/constants/media'; import type { MediaType } from '../../../server/models/Search'; import Spinner from '../../assets/spinner.svg'; import { useIsTouch } from '../../hooks/useIsTouch'; import { Permission, useUser } from '../../hooks/useUser'; import globalMessages from '../../i18n/globalMessages'; import { withProperties } from '../../utils/typeHelpers'; import Button from '../Common/Button'; import CachedImage from '../Common/CachedImage'; import RequestModal from '../RequestModal'; import Transition from '../Transition'; import ErrorCard from './ErrorCard'; import Placeholder from './Placeholder'; interface TitleCardProps { id: number; image?: string; summary?: string; year?: string; title: string; userScore: number; mediaType: MediaType; status?: MediaStatus; canExpand?: boolean; inProgress?: boolean; } const TitleCard = ({ id, image, summary, year, title, status, mediaType, inProgress = false, canExpand = false, }: TitleCardProps) => { const isTouch = useIsTouch(); const intl = useIntl(); const { hasPermission } = useUser(); const [isUpdating, setIsUpdating] = useState(false); const [currentStatus, setCurrentStatus] = useState(status); const [showDetail, setShowDetail] = useState(false); const [showRequestModal, setShowRequestModal] = useState(false); // Just to get the year from the date if (year) { year = year.slice(0, 4); } useEffect(() => { setCurrentStatus(status); }, [status]); const requestComplete = useCallback((newStatus: MediaStatus) => { setCurrentStatus(newStatus); setShowRequestModal(false); }, []); const requestUpdating = useCallback( (status: boolean) => setIsUpdating(status), [] ); const closeModal = useCallback(() => setShowRequestModal(false), []); const showRequestButton = hasPermission( [ Permission.REQUEST, mediaType === 'movie' ? Permission.REQUEST_MOVIE : Permission.REQUEST_TV, ], { type: 'or' } ); return (