export function AddComment()

in webviews/components/comment.tsx [234:354]
115 lines of code
18 McCabe index (conditional complexity)

export function AddComment({
	pendingCommentText,
	state,
	hasWritePermission,
	isIssue,
	isAuthor,
	continueOnGitHub,
	currentUserReviewState
}: PullRequest) {
	const { updatePR, comment, requestChanges, approve, close, openOnGitHub } = useContext(PullRequestContext);
	const [isBusy, setBusy] = useState(false);
	const form = useRef<HTMLFormElement>();
	const textareaRef = useRef<HTMLTextAreaElement>();

	emitter.addListener('quoteReply', (message: string) => {
		const quoted = message.replace(/\n\n/g, '\n\n> ');
		updatePR({ pendingCommentText: `> ${quoted} \n\n` });
		textareaRef.current.scrollIntoView();
		textareaRef.current.focus();
	});

	const submit = useCallback(
		async (command: (body: string) => Promise<any> = comment) => {
			try {
				setBusy(true);
				const { body }: FormInputSet = form.current;
				if (continueOnGitHub && command !== comment) {
					await openOnGitHub();
				} else {
					await command(body.value);
					updatePR({ pendingCommentText: '' });
				}
			} finally {
				setBusy(false);
			}
		},
		[comment, updatePR, setBusy],
	);

	const onSubmit = useCallback(
		e => {
			e.preventDefault();
			submit();
		},
		[submit],
	);

	const onKeyDown = useCallback(
		e => {
			if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
				submit();
			}
		},
		[submit],
	);

	const onClick = useCallback(
		e => {
			e.preventDefault();
			const { command } = e.target.dataset;
			submit({ approve, requestChanges, close }[command]);
		},
		[submit, approve, requestChanges, close],
	);

	return (
		<form id="comment-form" ref={form} className="comment-form main-comment-form" onSubmit={onSubmit}>
			<textarea
				id="comment-textarea"
				name="body"
				ref={textareaRef}
				onInput={({ target }) => updatePR({ pendingCommentText: (target as any).value })}
				onKeyDown={onKeyDown}
				value={pendingCommentText}
				placeholder="Leave a comment"
			/>
			<div className="form-actions">
				{hasWritePermission && !isIssue ? (
					<button
						id="close"
						className="secondary"
						disabled={isBusy || state !== GithubItemStateEnum.Open}
						onClick={onClick}
						data-command="close"
					>
						Close Pull Request
					</button>
				) : null}
				{!isIssue && !isAuthor ? (
					<button
						id="request-changes"
						disabled={isBusy || !pendingCommentText}
						className="secondary"
						onClick={onClick}
						data-command="requestChanges"
					>
						{continueOnGitHub ? 'Request changes on github.com' : 'Request Changes'}
					</button>
				) : null}
				{!isIssue && !isAuthor ? (
					<button
						id="approve"
						className="secondary"
						disabled={isBusy || currentUserReviewState === 'APPROVED'}
						onClick={onClick}
						data-command="approve"
					>
						{continueOnGitHub ? 'Approve on github.com' : 'Approve'}
					</button>
				) : null}
				<input
					id="reply"
					value="Comment"
					type="submit"
					className="secondary"
					disabled={isBusy || !pendingCommentText}
				/>
			</div>
		</form>
	);
}