fix: disable buttons on post

fixes #76
drodil · Jul 31, 2023 · 8dce2f4 · 8dce2f4
1 parent 585fc1c
commit 8dce2f4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/plugins/qeta/src/components/AskForm/AskForm.tsx b/plugins/qeta/src/components/AskForm/AskForm.tsx
@@ -80,6 +80,7 @@ export const AskForm = (props: {
   const navigate = useNavigate();
   const analytics = useAnalytics();
   const [entityRef, setEntityRef] = React.useState(entity);
+  const [posting, setPosting] = React.useState(false);
   const [values, setValues] = React.useState(getDefaultValues());
   const [error, setError] = React.useState(false);
 
@@ -102,6 +103,7 @@ export const AskForm = (props: {
   });
 
   const postQuestion = (data: QuestionForm) => {
+    setPosting(true);
     if (id) {
       qetaApi
         .updateQuestion(id, formToRequest(data, images))
@@ -120,7 +122,10 @@ export const AskForm = (props: {
             navigate(`${base_path}/qeta/questions/${q.id}`);
           }
         })
-        .catch(_e => setError(true));
+        .catch(_e => {
+          setError(true);
+          setPosting(false);
+        });
       return;
     }
     qetaApi
@@ -138,7 +143,10 @@ export const AskForm = (props: {
           navigate(`${base_path}/qeta/questions/${q.id}`);
         }
       })
-      .catch(_e => setError(true));
+      .catch(_e => {
+        setError(true);
+        setPosting(false);
+      });
   };
 
   useEffect(() => {
@@ -217,6 +225,7 @@ export const AskForm = (props: {
         color="primary"
         type="submit"
         variant="contained"
+        disabled={posting}
         className={`qetaAskFormSubmitBtn ${styles.postButton}`}
       >
         {id ? 'Save' : 'Post'}

diff --git a/plugins/qeta/src/components/CommentSection/CommentSection.tsx b/plugins/qeta/src/components/CommentSection/CommentSection.tsx
@@ -18,6 +18,7 @@ export const CommentSection = (props: {
   const { answer, question, onCommentPost, onCommentDelete } = props;
   const analytics = useAnalytics();
   const qetaApi = useApi(qetaApiRef);
+  const [posting, setPosting] = React.useState(false);
   const [formVisible, setFormVisible] = useState(false);
   const {
     handleSubmit,
@@ -27,11 +28,13 @@ export const CommentSection = (props: {
   } = useForm<{ content: string }>({});
 
   const postComment = (data: { content: string }) => {
+    setPosting(true);
     if (answer) {
       qetaApi.commentAnswer(question.id, answer.id, data.content).then(a => {
         setFormVisible(false);
         analytics.captureEvent('comment', 'answer');
         reset();
+        setPosting(false);
         onCommentPost(question, a);
       });
       return;
@@ -41,6 +44,7 @@ export const CommentSection = (props: {
       setFormVisible(false);
       analytics.captureEvent('comment', 'question');
       reset();
+      setPosting(false);
       onCommentPost(q);
     });
   };
@@ -96,6 +100,7 @@ export const CommentSection = (props: {
                 className="qetaCommentBtn"
                 type="submit"
                 color="primary"
+                disabled={posting}
               >
                 Post
               </Button>