Add error handling and extraFields support in vote creation and editing

JohanGrims · Dec 7, 2024 · 9f9b046 · 9f9b046
1 parent d26c0e2
commit 9f9b046
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 63 deletions.
diff --git a/src/admin/NewVote.jsx b/src/admin/NewVote.jsx
@@ -54,34 +54,43 @@ export default function NewVote() {
     const berlinStartTime = moment.tz(startTime, "Europe/Berlin").toDate();
     const berlinEndTime = moment.tz(endTime, "Europe/Berlin").toDate();
 
-    const vote = await setDoc(doc(db, "/votes", id), {
-      title: title,
-      description: description,
-      selectCount: selectCount,
-      startTime: Timestamp.fromDate(berlinStartTime),
-      endTime: Timestamp.fromDate(berlinEndTime),
-      active: true,
-      version: 3,
-    });
-    const option = options.map(async (e, index) => {
-      return addDoc(collection(db, `/votes/${id}/options`), {
-        title: e.title,
-        max: e.max,
-        teacher: e.teacher,
-        description: e.description,
+    try {
+      await setDoc(doc(db, "/votes", id), {
+        title: title,
+        description: description,
+        selectCount: selectCount,
+        startTime: Timestamp.fromDate(berlinStartTime),
+        endTime: Timestamp.fromDate(berlinEndTime),
+        active: true,
+        version: 3,
+        extraFields: extraFields,
+      });
+      const option = options.map(async (e) => {
+        return addDoc(collection(db, `/votes/${id}/options`), {
+          title: e.title,
+          max: e.max,
+          teacher: e.teacher,
+          description: e.description,
+        });
       });
-    });
 
-    await Promise.all(option);
+      await Promise.all(option);
 
-    console.log("Vote created successfully.");
+      console.log("Vote created successfully.");
 
-    snackbar({
-      message: "Wahl erfolgreich erstellt.",
-      timeout: 5000,
-    });
+      snackbar({
+        message: "Wahl erfolgreich erstellt.",
+        timeout: 5000,
+      });
 
-    navigate(`/admin/${id}`);
+      navigate(`/admin/${id}`);
+    } catch (e) {
+      console.error(e);
+      snackbar({
+        message: "Fehler beim Erstellen der Wahl.",
+        timeout: 5000,
+      });
+    }
   }
 
   const submitDisabled = () => {
@@ -268,6 +277,7 @@ export default function NewVote() {
           )}
           {options.map((e, i) => (
             <mdui-card
+              key={i}
               class="option-preview"
               clickable
               style={{

diff --git a/src/admin/vote/Edit.jsx b/src/admin/vote/Edit.jsx
@@ -14,7 +14,7 @@ export default function Edit() {
 
   const [title, setTitle] = React.useState(vote.title);
   const [description, setDescription] = React.useState(vote.description);
-  const [selectCount, setSelectCount] = React.useState(vote.selectCount);
+  const [selectCount] = React.useState(vote.selectCount);
 
   const [extraFields, setExtraFields] = React.useState(vote.extraFields || []);
 
@@ -59,23 +59,23 @@ export default function Edit() {
     try {
       console.log("Publishing vote with id: " + vote.id);
 
-    await setDoc(
-      doc(db, "/votes", vote.id),
-      {
-        title,
-        description: description || "",
-        extraFields: extraFields.length > 0 ? extraFields : [],
-      },
-      { merge: true }
-    );
-    const optionsPromises = options.map(async (e) => {
-      return setDoc(doc(db, `/votes/${vote.id}/options/${e.id}`), {
-        title: e.title,
-        max: e.max,
-        teacher: e.teacher,
-        description: e.description,
+      await setDoc(
+        doc(db, "/votes", vote.id),
+        {
+          title,
+          description: description || "",
+          extraFields: extraFields.length > 0 ? extraFields : [],
+        },
+        { merge: true }
+      );
+      const optionsPromises = options.map(async (e) => {
+        return setDoc(doc(db, `/votes/${vote.id}/options/${e.id}`), {
+          title: e.title,
+          max: e.max,
+          teacher: e.teacher,
+          description: e.description,
+        });
       });
-    });
 
       await Promise.all(optionsPromises);
 
@@ -244,25 +244,24 @@ export default function Edit() {
       ></mdui-text-field>
       <p />
       {extraFields.map((e, i) => (
-        {extraFields.map((e, i) => (
-          <React.Fragment key={i}>
-            <div className="fields-row">
-              <mdui-text-field
-                label={"Extrafeld #" + (i + 1)}
-                placeholder={"Musikinstrument"}
-                value={e}
-                onInput={(e) => editExtraField(i, e.target.value)}
-              >
-                <mdui-button-icon
-                  slot="end-icon"
-                  icon="delete"
-                  onClick={() => removeExtraField(i)}
-                />
-              </mdui-text-field>
-            </div>
-            <p />
-          </React.Fragment>
-        ))}
+        <React.Fragment key={i}>
+          <div className="fields-row">
+            <mdui-text-field
+              label={"Extrafeld #" + (i + 1)}
+              placeholder={"Musikinstrument"}
+              value={e}
+              onInput={(e) => editExtraField(i, e.target.value)}
+            >
+              <mdui-button-icon
+                slot="end-icon"
+                icon="delete"
+                onClick={() => removeExtraField(i)}
+              />
+            </mdui-text-field>
+          </div>
+          <p />
+        </React.Fragment>
+      ))}
       <div
         style={{
           display: "flex",
@@ -403,15 +402,19 @@ Edit.loader = async function loader({ params }) {
   try {
     const { id } = params;
     const vote = await getDoc(doc(db, `/votes/${id}`));
-    
+
     if (!vote.exists()) {
       throw new Error(`Vote with id ${id} not found`);
     }
-    
+
     const voteData = { id, ...vote.data() };
+    console.log("Loaded vote:", voteData);
     const options = await getDocs(collection(db, `/votes/${id}/options`));
-    const optionData = options.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
-
+    const optionData = options.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    }));
+
     return {
       vote: voteData,
       options: optionData,