Hiding submit button while uploading questions on addQuestion page

src/pages/addQuestion.js

@@ -17,6 +17,7 @@ const getDefaultQuestion = () => {
 export default function AddQuestion (props) {
   const [form, setForm] = useState({ quiz: [getDefaultQuestion()] })
   const [subjects, setSubjects] = useState(undefined)
+  const [isSubmitting, setIsSubmitting] = useState(false)
   const [isNewSubj, setIsNewSubj] = useState(false)
 
   useEffect(() => {
@@ -136,6 +137,8 @@ export default function AddQuestion (props) {
       version = t.split('|')[1]
     }
 
+    setIsSubmitting(true)
+
     const rawResponse = await fetch(constants.apiUrl + 'isAdding', {
       method: 'POST',
       credentials: 'include',
@@ -154,20 +157,23 @@ export default function AddQuestion (props) {
       .then((resp) => {
         if (resp.success) {
           alert('Sikeres beküldés, ' + resp.newQuestions + ' új kérdés') // eslint-disable-line
+          setIsSubmitting(false)
         } else {
           console.log(resp)
           alert('Hiba beküldés közben :/') // eslint-disable-line
+          setIsSubmitting(false)
         }
       })
       .catch((e) => {
         alert('Hiba beküldés közben :/') // eslint-disable-line
         console.log(e)
+        setIsSubmitting(false)
       })
   }
 
   const renderStuff = (props) => {
     return (
-      <div className={styles.feedback} >
+      <div>
         {form.quiz.map((q, i) => {
           return (
             <div key={i}>
@@ -193,7 +199,11 @@ export default function AddQuestion (props) {
             Új kérdés hozzáadása
           </button>
         </div>
-        <div className={styles.buttonContainer} >
+        {isSubmitting
+          ? <div className={styles.issubmitting}>
+              Kérdések feldolgozása folyamatban, ha sokat küldtél, akkor több perc is lehet
+          </div>
+          : <div className={styles.buttonContainer} >
             <button
               className={styles.button}
               onClick={handleSubmit}
@@ -201,6 +211,7 @@ export default function AddQuestion (props) {
             Kérdések beküldése
             </button>
           </div>
+        }
         <input
           type='text'
           id='cid'
@@ -274,6 +285,9 @@ export default function AddQuestion (props) {
           kérdéseket lehet beküldeni, amik sima kérdés-válaszok, szóval pl nincs benne kép. Ez
           később bővül majd
         </li>
+        <li>
+          Ha sok új kérdést küldsze be, akkor akár több percig is eltarthat a dolog
+        </li>
         <li>
           Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználókkal és magatokkal szúrtok
           ki, ty!

src/pages/addQuestion.module.css

@@ -22,7 +22,7 @@
 }
 
 .buttonContainer {
-  text-align: "center";
+  text-align: center;
   width: 200px;
   margin: 0 auto;
   padding: 10px;
@@ -83,3 +83,8 @@
   font-size: 18px;
   color: white;
 }
+
+.issubmitting {
+  text-align: center;
+  color: white;
+}