Refactor Vote component for improved navigation and error handling

JohanGrims · Dec 10, 2024 · b1cabbd · b1cabbd
1 parent 8513087
commit b1cabbd
Show file tree

Hide file tree

Showing 12 changed files with 267 additions and 524 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,6 @@
 import { collection, getDocs } from "firebase/firestore";
 import moment from "moment-timezone";
 import { useLoaderData } from "react-router-dom";
-import "./App.css";
 import { db } from "./firebase";
 function App() {
   const { activeVotes, expiredVotes, scheduledVotes } = useLoaderData();

diff --git a/src/Vote.jsx b/src/Vote.jsx
@@ -13,7 +13,7 @@ import { db } from "./firebase";
 import moment from "moment-timezone";
 
 import { breakpoint, confirm, snackbar } from "mdui";
-import "./vote.css";
+import { capitalizeWords } from "./admin/utils";
 export default function Vote() {
   const refs = useRef([]);
   const urlParams = new URLSearchParams(window.location.search);
@@ -33,7 +33,6 @@ export default function Vote() {
     description,
   } = vote;
 
-
   const [firstName, setFirstName] = React.useState();
   const [lastName, setLastName] = React.useState();
   const [grade, setGrade] = React.useState();
@@ -49,17 +48,30 @@ export default function Vote() {
 
   React.useEffect(() => {
     document.title = title;
+  }, [title]);
 
-    if (localStorage.getItem(id) && !urlParams.get("preview")) {
-      if (urlParams.get("allowResubmission")) {
-        navigate(`/x/${id}?allowResubmission=true`);
-        window.location.href = `/x/${id}?allowResubmission=true`;
-        return;
-      }
-      navigate(`/x/${id}`);
-      window.location.href = `/x/${id}`;
+  if (localStorage.getItem(id) && !urlParams.get("preview")) {
+    if (urlParams.get("allowResubmission")) {
+      navigate(`/x/${id}?allowResubmission=true`);
+      return;
     }
-  }, []);
+    navigate(`/x/${id}`);
+  }
+
+  if ((active === false || Date.now() > endTime.seconds * 1000) && !preview) {
+    snackbar({ message: "Die Wahl ist bereits beendet." });
+    navigate(`/r/${id}`);
+  }
+  if (Date.now() < startTime.seconds * 1000 && !preview) {
+    snackbar({
+      message:
+        "Die Wahl startet erst am " +
+        moment
+          .tz(startTime.seconds * 1000, "Europe/Berlin")
+          .format("dddd, D. MMMM YYYY, HH:mm"),
+    });
+    navigate("/");
+  }
 
   const preview = urlParams.get("preview");
 
@@ -122,39 +134,39 @@ export default function Vote() {
         setSending(false);
         if (error.code === "permission-denied") {
           snackbar({
-            message:
-              "Es ist ein Berechtigungsfehler aufgetreten.",
-              action:"Details",
-              onActionClick: () => {
-                console.error(error);
-                alert(
-                  "Es scheint, als sei die Wahl nicht mehr verfügbar. Bitte versuchen Sie es später erneut.\n"+error
-                )
-              }
+            message: "Es ist ein Berechtigungsfehler aufgetreten.",
+            action: "Details",
+            onActionClick: () => {
+              console.error(error);
+              alert(
+                "Es scheint, als sei die Wahl nicht mehr verfügbar. Bitte versuchen Sie es später erneut.\n" +
+                  error
+              );
+            },
           });
         } else if (error.message === "Network Error") {
-            snackbar({
-              message:
-                "Es ist ein Netzwerkfehler aufgetreten.",
-              action:"Details",
-              onActionClick: () => {
-                console.error(error);
-                alert(
-                  "Es scheint, als gäbe es ein Problem mit Ihrer Internetverbindung. Bitte überprüfen Sie diese und versuchen Sie es erneut.\n"+error
-                )
-              }
+          snackbar({
+            message: "Es ist ein Netzwerkfehler aufgetreten.",
+            action: "Details",
+            onActionClick: () => {
+              console.error(error);
+              alert(
+                "Es scheint, als gäbe es ein Problem mit Ihrer Internetverbindung. Bitte überprüfen Sie diese und versuchen Sie es erneut.\n" +
+                  error
+              );
+            },
           });
         } else {
           snackbar({
-            message:
-              "Es ist ein Fehler aufgetreten.",
-            action:"Details",
+            message: "Es ist ein Fehler aufgetreten.",
+            action: "Details",
             onActionClick: () => {
               console.error(error);
               alert(
-                "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.\n"+error
-              )
-            }
+                "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.\n" +
+                  error
+              );
+            },
           });
         }
       });
@@ -166,36 +178,6 @@ export default function Vote() {
     setExtraFieldsValues(newValues);
   };
 
-  React.useEffect(() => {
-    if ((active === false || Date.now() > endTime.seconds * 1000) && !preview) {
-      snackbar({ message: "Die Wahl ist bereits beendet." });
-      navigate(`/r/${id}`);
-    }
-    if (Date.now() < startTime.seconds * 1000 && !preview) {
-      snackbar({
-        message:
-          "Die Wahl startet erst am " +
-          moment
-            .tz(startTime.seconds * 1000, "Europe/Berlin")
-            .format("dddd, D. MMMM YYYY, HH:mm"),
-      });
-      navigate("/");
-    }
-  }, []);
-
-  const capitalizeWords = (str) => {
-    return str
-      .replace(/[^a-zA-ZäöüÄÖÜß\s-]/g, "") // Remove non-alphabetic characters except hyphens and umlauts
-      .replace(/\b\w/g, (char, index) => {
-        if (index === 0 || str[index - 1].match(/\s/)) {
-          return char.toUpperCase();
-        } else if (str[index - 1] === "-") {
-          return char.toUpperCase();
-        }
-        return char;
-      }); // Capitalize words correctly
-  };
-
   return (
     <div className="container">
       <mdui-dialog open={confirmDialog} headline="Bestätigen">
@@ -339,6 +321,7 @@ export default function Vote() {
             <div className="flex-wrap">
               {options.map((e) => (
                 <mdui-card
+                  key={e.id}
                   clickable={
                     selected[index] !== e.id && !selected.includes(e.id)
                   }

diff --git a/src/admin/index.css → src/admin/admin.css b/src/admin/index.css → src/admin/admin.css
diff --git a/src/admin/auth/Login.tsx b/src/admin/auth/Login.tsx
@@ -5,7 +5,6 @@ import {
 import { alert, prompt, snackbar } from "mdui";
 import React from "react";
 import { auth } from "../../firebase";
-import "../../vote.css";
 
 export default function Login() {
   const [loading, setLoading] = React.useState(false);

diff --git a/src/admin/index.jsx b/src/admin/index.jsx
@@ -3,14 +3,14 @@ import React from "react";
 import { Outlet } from "react-router-dom";
 import { auth } from "../firebase";
 
-import "./index.css";
+import "./admin.css";
 
 import { confirm, snackbar } from "mdui";
 import { useNavigate } from "react-router-dom";
 import Login from "./auth/Login";
 import DrawerList from "./navigation/DrawerList";
 
-export default function Admin(props) {
+export default function Admin() {
   const [authUser, setAuthUser] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
 

diff --git a/src/admin/utils.js b/src/admin/utils.js