Button styling, better informing user about upload process

src/pages/index.js

@@ -22,6 +22,7 @@ const views = {
 export default function Index (props) {
   const [data, setData] = useState(null)
   const [view, setView] = useState(views.welcome)
+  const [sending, setSending] = useState(false)
   const [error, setError] = useState(null)
   const [password, setPassword] = useState('')
   const [editedQuestions, setEditedQuestions] = useState({})
@@ -109,38 +110,51 @@ export default function Index (props) {
   }
 
   const SendDataToServer = async () => {
-    const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        newData: data,
-        count: getCount(data),
-        initialCount: initialCount,
-        password: password,
-        editedQuestions: editedQuestions
+    if (sending) {
+      alert('Adatok már feltöltés alatt, várd meg míg feltölti') // eslint-disable-line
+      return
+    }
+    setSending(true)
+    try {
+      const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          newData: data,
+          count: getCount(data),
+          initialCount: initialCount,
+          password: password,
+          editedQuestions: editedQuestions
+        })
       })
-    })
-    rawResponse.json()
-      .then((resp) => {
-        if (resp.status === 'ok') {
+      rawResponse.json()
+        .then((resp) => {
+          setSending(false)
+          if (resp.status === 'ok') {
           alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line
-          console.log('OK')
-        } else if (resp.status === 'invalidPass') {
+            console.log('OK')
+          } else if (resp.status === 'invalidPass') {
           alert('Hibás jelszó!') // eslint-disable-line
-          console.log('invalidPass')
-        } else {
+            console.log('invalidPass')
+          } else {
           alert('Hiba feltöltés közben! (szerver oldalon)! Több adat konzolban') // eslint-disable-line
-          console.error('RESPONSE', resp)
-          console.error(resp.message)
-        }
-      })
-      .catch((e) => {
+            console.error('RESPONSE', resp)
+            console.error(resp.message)
+          }
+        })
+        .catch((e) => {
+          setSending(false)
         alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
-        console.error('Error posting data', e)
-      })
+          console.error('Error posting data', e)
+        })
+    } catch (e) {
+      setSending(false)
+        alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
+      console.error('Error posting data', e)
+    }
   }
 
   const renderView = () => {
@@ -219,7 +233,7 @@ export default function Index (props) {
             }
           }}
         >
-          Feltöltés
+          {sending ? 'Feltöltés ...' : 'Mentés'}
         </span>
       </div>
       <div className={styles.viewButtonContainer}>

src/pages/index.module.css

@@ -1,4 +1,5 @@
 .viewButtonContainer span {
+  cursor: pointer;
   display: inline-block;
   margin: 5px;
   padding: 5px;
@@ -11,6 +12,7 @@
 }
 
 .optionsButtonContainer span {
+  cursor: pointer;
   display: inline-block;
   margin: 3px;
   padding: 3px;