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,6 +110,12 @@ export default function Index (props) {
   }
 
   const SendDataToServer = async () => {
+    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: {
@@ -125,6 +132,7 @@ export default function Index (props) {
       })
       rawResponse.json()
         .then((resp) => {
+          setSending(false)
           if (resp.status === 'ok') {
           alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line
             console.log('OK')
@@ -138,9 +146,15 @@ export default function Index (props) {
           }
         })
         .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)
         })
+    } 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;