64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import api from 'shared/utils/api';
|
|
import useApi from 'shared/hooks/api';
|
|
import toast from 'shared/utils/toast';
|
|
|
|
import BodyForm from '../BodyForm';
|
|
import ProTip from './ProTip';
|
|
import { Create, UserAvatar, Right, FakeTextarea } from './Styles';
|
|
|
|
const propTypes = {
|
|
issueId: PropTypes.number.isRequired,
|
|
fetchIssue: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {
|
|
const [isFormOpen, setFormOpen] = useState(false);
|
|
const [isCreating, setCreating] = useState(false);
|
|
const [body, setBody] = useState('');
|
|
|
|
const [{ data: currentUserData }] = useApi.get('/currentUser');
|
|
const currentUser = currentUserData && currentUserData.currentUser;
|
|
|
|
const handleCommentCreate = async () => {
|
|
try {
|
|
setCreating(true);
|
|
await api.post(`/comments`, { body, issueId, userId: currentUser.id });
|
|
await fetchIssue();
|
|
setFormOpen(false);
|
|
setCreating(false);
|
|
setBody('');
|
|
} catch (error) {
|
|
toast.error(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Create>
|
|
{currentUser && <UserAvatar name={currentUser.name} avatarUrl={currentUser.avatarUrl} />}
|
|
<Right>
|
|
{isFormOpen ? (
|
|
<BodyForm
|
|
value={body}
|
|
onChange={setBody}
|
|
isWorking={isCreating}
|
|
onSubmit={handleCommentCreate}
|
|
onCancel={() => setFormOpen(false)}
|
|
/>
|
|
) : (
|
|
<>
|
|
<FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea>
|
|
<ProTip setFormOpen={setFormOpen} />
|
|
</>
|
|
)}
|
|
</Right>
|
|
</Create>
|
|
);
|
|
};
|
|
|
|
ProjectBoardIssueDetailsCommentsCreate.propTypes = propTypes;
|
|
|
|
export default ProjectBoardIssueDetailsCommentsCreate;
|