You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.2 KiB
109 lines
3.2 KiB
import React, { useState } from 'react';
|
|
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
|
|
import Button from '../Common/Button';
|
|
import { MediaRequest } from '../../../server/entity/MediaRequest';
|
|
import axios from 'axios';
|
|
|
|
const messages = defineMessages({
|
|
pendingtitle: 'Pending Request',
|
|
pendingdescription:
|
|
'This title was requested by {username} ({email}) on {date}',
|
|
approve: 'Approve',
|
|
decline: 'Decline',
|
|
});
|
|
|
|
interface PendingRequestProps {
|
|
request: MediaRequest;
|
|
onUpdate: () => void;
|
|
}
|
|
|
|
const PendingRequest: React.FC<PendingRequestProps> = ({
|
|
request,
|
|
onUpdate,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const [isLoading, setLoading] = useState(false);
|
|
|
|
const updateStatus = async (status: 'approve' | 'decline') => {
|
|
setLoading(true);
|
|
const response = await axios.get(`/api/v1/request/${request.id}/${status}`);
|
|
|
|
if (response.data) {
|
|
onUpdate();
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-900 border border-gray-800 sm:rounded-lg mb-6 shadow rounded-lg">
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<h3 className="text-lg leading-6 font-medium text-gray-100">
|
|
<FormattedMessage {...messages.pendingtitle} />
|
|
</h3>
|
|
<div className="mt-2 max-w-xl text-sm leading-5 text-gray-400">
|
|
<p>
|
|
<FormattedMessage
|
|
{...messages.pendingdescription}
|
|
values={{
|
|
username: request.requestedBy.username,
|
|
email: request.requestedBy.email,
|
|
date: intl.formatDate(request.updatedAt),
|
|
}}
|
|
/>
|
|
</p>
|
|
</div>
|
|
<div className="mt-5">
|
|
<span className="inline-flex rounded-md shadow-sm mr-2">
|
|
<Button
|
|
buttonType="success"
|
|
disabled={isLoading}
|
|
onClick={() => updateStatus('approve')}
|
|
>
|
|
<svg
|
|
className="w-5 mr-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
<FormattedMessage {...messages.approve} />
|
|
</Button>
|
|
</span>
|
|
<span className="inline-flex rounded-md shadow-sm">
|
|
<Button
|
|
buttonType="danger"
|
|
disabled={isLoading}
|
|
onClick={() => updateStatus('decline')}
|
|
>
|
|
<svg
|
|
className="w-5 mr-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
<FormattedMessage {...messages.decline} />
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PendingRequest;
|