sct
4 years ago
parent
514714071d
commit
8f21358f79
@ -0,0 +1,108 @@
|
||||
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-cool-gray-900 border border-cool-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-cool-gray-100">
|
||||
<FormattedMessage {...messages.pendingtitle} />
|
||||
</h3>
|
||||
<div className="mt-2 max-w-xl text-sm leading-5 text-cool-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;
|
||||
Loading…
Reference in new issue