From e5f8cb79535466652b6d69bf1e47d2acaab190b8 Mon Sep 17 00:00:00 2001
From: Johan Grimsehl <johan.grimsehl@gmail.com>
Date: Thu, 24 Oct 2024 19:47:32 +0200
Subject: [PATCH] fix loading state

---
 src/Vote.jsx | 48 ++++++++++++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/Vote.jsx b/src/Vote.jsx
index b606292..9916d83 100644
--- a/src/Vote.jsx
+++ b/src/Vote.jsx
@@ -34,8 +34,7 @@ export default function Vote() {
 
   const [confirmDialog, setConfirmDialog] = React.useState(false);
 
-
-  const [sending, setSending] = React.useState(false)
+  const [sending, setSending] = React.useState(false);
 
   React.useEffect(() => {
     document.title = title;
@@ -87,7 +86,7 @@ export default function Vote() {
   }
 
   function submit() {
-    setSending(true)
+    setSending(true);
     addDoc(collection(db, `/votes/${id}/choices`), {
       name: `${firstName} ${lastName.charAt(0)}.`,
       grade,
@@ -98,7 +97,7 @@ export default function Vote() {
       timestamp: serverTimestamp(),
     })
       .then((e) => {
-        setSending(false)
+        setSending(false);
         localStorage.setItem(
           id,
           JSON.stringify({ choiceId: e.id, timestamp: Date.now() })
@@ -110,7 +109,7 @@ export default function Vote() {
         navigate(`/x/${id}`);
       })
       .catch((error) => {
-        setSending(false)
+        setSending(false);
         console.log(JSON.stringify(error));
         if (error.code === "permission-denied") {
           alert(
@@ -196,19 +195,32 @@ export default function Vote() {
             )
             .join(", ")}
           <p />
-          {
-            sending?(
-              <div/>
-            ):(<div/>)
-          }
-          <div className="button-container">
-            <mdui-button onClick={() => setConfirmDialog(false)} variant="text">
-              Abbrechen
-            </mdui-button>
-            <mdui-button onClick={submit} end-icon="send">
-              Absenden
-            </mdui-button>
-          </div>
+          {!sending ? (
+            <div className="button-container">
+              <mdui-button
+                onClick={() => setConfirmDialog(false)}
+                variant="text"
+              >
+                Abbrechen
+              </mdui-button>
+              <mdui-button onClick={submit} end-icon="send">
+                Absenden
+              </mdui-button>
+            </div>
+          ) : (
+            <div className="button-container">
+              <mdui-button
+                onClick={() => setConfirmDialog(false)}
+                variant="text"
+                disabled
+              >
+                Abbrechen
+              </mdui-button>
+              <mdui-button onClick={submit} end-icon="send" disabled loading>
+                Absenden
+              </mdui-button>
+            </div>
+          )}
         </div>
       </mdui-dialog>
       <mdui-card variant="outlined" class="card">