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