|
|
|
@ -1,18 +1,24 @@
|
|
|
|
|
import { Transition } from '@headlessui/react';
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import Modal from '@app/components/Common/Modal';
|
|
|
|
|
import useSWR from 'swr';
|
|
|
|
|
import globalMessages from '@app/i18n/globalMessages';
|
|
|
|
|
import { Transition } from '@headlessui/react';
|
|
|
|
|
import type { MovieDetails } from '@server/models/Movie';
|
|
|
|
|
import { Field, Form, Formik } from 'formik';
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { useIntl } from 'react-intl';
|
|
|
|
|
import globalMessages from '@app/i18n/globalMessages';
|
|
|
|
|
import useSWR from 'swr';
|
|
|
|
|
import * as Yup from 'yup';
|
|
|
|
|
|
|
|
|
|
interface DeclineRequestModalProps {
|
|
|
|
|
show: boolean;
|
|
|
|
|
tmdbId: number;
|
|
|
|
|
onDecline?: (declineMessage: string) => void;
|
|
|
|
|
onDecline: (declineMessage: string) => void;
|
|
|
|
|
onCancel?: () => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
|
|
|
declineMessage: Yup.string().max(140, 'Message is too long'),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const DeclineRequestModal = ({
|
|
|
|
|
show,
|
|
|
|
|
tmdbId,
|
|
|
|
@ -20,14 +26,14 @@ const DeclineRequestModal = ({
|
|
|
|
|
onCancel,
|
|
|
|
|
}: DeclineRequestModalProps) => {
|
|
|
|
|
const intl = useIntl();
|
|
|
|
|
const [declineMessage, setDeclineMessage] = useState('');
|
|
|
|
|
const { data, error } = useSWR<MovieDetails>(`/api/v1/movie/${tmdbId}`, {
|
|
|
|
|
revalidateOnMount: true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleDecline = () => {
|
|
|
|
|
if (onDecline) {
|
|
|
|
|
onDecline(declineMessage);
|
|
|
|
|
const [characterCount, setCharacterCount] = React.useState(0);
|
|
|
|
|
const handleCancel = () => {
|
|
|
|
|
setCharacterCount(0);
|
|
|
|
|
if (onCancel) {
|
|
|
|
|
onCancel();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
@ -42,23 +48,62 @@ const DeclineRequestModal = ({
|
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
|
show={show}
|
|
|
|
|
>
|
|
|
|
|
<Modal
|
|
|
|
|
loading={!data && !error}
|
|
|
|
|
title="Decline Request"
|
|
|
|
|
subTitle={data?.title}
|
|
|
|
|
onCancel={onCancel}
|
|
|
|
|
onOk={handleDecline}
|
|
|
|
|
okText={intl.formatMessage(globalMessages.decline)}
|
|
|
|
|
okButtonType="danger"
|
|
|
|
|
cancelText={intl.formatMessage(globalMessages.cancel)}
|
|
|
|
|
backdrop={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data?.backdropPath}`}
|
|
|
|
|
>
|
|
|
|
|
<textarea
|
|
|
|
|
value={declineMessage}
|
|
|
|
|
onChange={(e) => setDeclineMessage(e.target.value)}
|
|
|
|
|
placeholder="Optional decline message"
|
|
|
|
|
/>
|
|
|
|
|
</Modal>
|
|
|
|
|
<Formik
|
|
|
|
|
initialValues={{ declineMessage: '' }}
|
|
|
|
|
validationSchema={validationSchema}
|
|
|
|
|
onSubmit={(values, { setSubmitting }) => {
|
|
|
|
|
setSubmitting(true);
|
|
|
|
|
onDecline(values.declineMessage);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{({ errors, touched, handleSubmit, setFieldValue, values }) => {
|
|
|
|
|
const handleInputChange = (
|
|
|
|
|
event: React.ChangeEvent<HTMLTextAreaElement>
|
|
|
|
|
) => {
|
|
|
|
|
const { value } = event.target;
|
|
|
|
|
setFieldValue('declineMessage', value);
|
|
|
|
|
setCharacterCount(value.length);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Modal
|
|
|
|
|
loading={!data && !error}
|
|
|
|
|
title="Decline Request"
|
|
|
|
|
subTitle={data?.title}
|
|
|
|
|
onCancel={handleCancel}
|
|
|
|
|
onOk={() => {
|
|
|
|
|
handleSubmit();
|
|
|
|
|
}}
|
|
|
|
|
okText={intl.formatMessage(globalMessages.decline)}
|
|
|
|
|
okButtonType="danger"
|
|
|
|
|
cancelText={intl.formatMessage(globalMessages.cancel)}
|
|
|
|
|
backdrop={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data?.backdropPath}`}
|
|
|
|
|
>
|
|
|
|
|
<Form>
|
|
|
|
|
<Field
|
|
|
|
|
name="declineMessage"
|
|
|
|
|
as="textarea"
|
|
|
|
|
placeholder="Optional decline message"
|
|
|
|
|
onChange={handleInputChange}
|
|
|
|
|
value={values.declineMessage}
|
|
|
|
|
/>
|
|
|
|
|
{errors.declineMessage && touched.declineMessage ? (
|
|
|
|
|
<div className="pt-2 text-red-500">
|
|
|
|
|
{errors.declineMessage}
|
|
|
|
|
</div>
|
|
|
|
|
) : null}
|
|
|
|
|
<div
|
|
|
|
|
className={`pt-2 text-xs font-light ${
|
|
|
|
|
characterCount > 140 ? 'text-red-500' : 'text-gray-300'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{characterCount}/140
|
|
|
|
|
</div>
|
|
|
|
|
</Form>
|
|
|
|
|
</Modal>
|
|
|
|
|
);
|
|
|
|
|
}}
|
|
|
|
|
</Formik>
|
|
|
|
|
</Transition>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|