diff --git a/components/DocsHelp.tsx b/components/DocsHelp.tsx index 2709bd2d3..aad1694e1 100644 --- a/components/DocsHelp.tsx +++ b/components/DocsHelp.tsx @@ -56,6 +56,8 @@ export function DocsHelp({ const [feedbackStatus, setFeedbackStatus] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const [error, setError] = useState(''); + const [commentValue, setCommentValue] = useState(''); + const [commentError, setCommentError] = useState(false); const feedbackFormRef = useRef(null); // Generate GitHub redirect URL @@ -85,11 +87,20 @@ export function DocsHelp({ async function createFeedbackHandler(event: FormEvent) { event.preventDefault(); - const formData = new FormData(feedbackFormRef.current!); - formData.append('feedback-page', router.asPath); + + // Validate comment is not empty + if (!commentValue.trim()) { + setCommentError(true); + return; + } + setIsSubmitting(true); try { + const selectedInput = feedbackFormRef.current?.querySelector( + 'input[name="feedback-vote"]:checked', + ) as HTMLInputElement | null; + const response = await fetch( 'https://script.google.com/macros/s/AKfycbx9KA_BwTdsYgOfTLrHAxuhHs_wgYibB5_Msj9XP1rL5Ip4A20g1O609xAuTZmnbhRv/exec', { @@ -97,9 +108,9 @@ export function DocsHelp({ method: 'POST', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify({ - feedbackPage: formData.get('feedback-page'), - feedbackVote: formData.get('feedback-vote'), - feedbackComment: formData.get('feedback-comment'), + feedbackPage: router.asPath, + feedbackVote: selectedInput?.value, + feedbackComment: commentValue, }), }, ); @@ -117,11 +128,16 @@ export function DocsHelp({ } const createGitHubIssueHandler = () => { - const formData = new FormData(feedbackFormRef.current!); + // Validate comment is not empty + if (!commentValue.trim()) { + setCommentError(true); + return; + } + setIsSubmitting(true); try { const title = encodeURIComponent('Feedback on Documentation'); - const body = encodeURIComponent(`${formData.get('feedback-comment')}`); + const body = encodeURIComponent(`${commentValue}`); const url = `https://github.com/json-schema-org/website/issues/new?title=${title}&body=${body}`; window.open(url, '_blank'); submitFeedbackHandler('github_issue'); @@ -136,6 +152,8 @@ export function DocsHelp({ setIsFormOpen(false); setFeedbackStatus(status); setError(''); + setCommentValue(''); + setCommentError(false); feedbackFormRef.current!.reset(); }; @@ -237,16 +255,36 @@ export function DocsHelp({ Let us know your Feedback - Optional + Required