Refactor components for improved readability, add key props for list …

…items, and enhance CSS styles for better layout
JohanGrims · Dec 7, 2024 · c71ff7d · c71ff7d
1 parent 6cc622f
commit c71ff7d
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 50 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,5 @@
 import { collection, getDocs } from "firebase/firestore";
 import moment from "moment-timezone";
-import React from "react";
 import { useLoaderData } from "react-router-dom";
 import "./App.css";
 import { db } from "./firebase";
@@ -75,6 +74,7 @@ function App() {
                   })
                   .map((e) => (
                     <mdui-list-item
+                      key={e.id}
                       rounded
                       href={`/${e.id}`}
                       end-icon="arrow_forward"
@@ -106,6 +106,7 @@ function App() {
                   })
                   .map((e) => (
                     <mdui-list-item
+                      key={e.id}
                       rounded
                       href={`/${e.id}`}
                       end-icon="arrow_forward"

diff --git a/src/Gateway.jsx b/src/Gateway.jsx
@@ -32,7 +32,13 @@ export default function Gateway() {
       navigate(`/x/${voteData.id}`);
     }
     navigate(`/v/${voteData.id}`);
-  }, []);
+  }, [
+    navigate,
+    voteData.active,
+    voteData.endTime.seconds,
+    voteData.id,
+    voteData.startTime.seconds,
+  ]);
   return null;
 }
 

diff --git a/src/admin/CreateHelp.tsx b/src/admin/CreateHelp.tsx
@@ -48,7 +48,7 @@ export default function CreateHelp() {
         </mdui-tab-panel>
       </mdui-tabs>
 
-      <div style={{ position: "fixed", bottom: "1rem", right: "1rem" }}>
+      <div className="fixed-action">
         {publishing ? (
           <mdui-fab icon="public" loading extended>
             Veröffentlichen

diff --git a/src/admin/CreateReleaseNotes.tsx b/src/admin/CreateReleaseNotes.tsx
@@ -48,7 +48,7 @@ export default function CreateReleaseNotes() {
         </mdui-tab-panel>
       </mdui-tabs>
 
-      <div style={{ position: "fixed", bottom: "1rem", right: "1rem" }}>
+      <div className="fixed-action">
         {publishing ? (
           <mdui-fab icon="public" loading extended>
             Veröffentlichen

diff --git a/src/admin/Students.tsx b/src/admin/Students.tsx
@@ -10,7 +10,7 @@ import { confirm, prompt } from "mdui";
 import React, { useRef } from "react";
 import { useLoaderData, useNavigate, useParams } from "react-router-dom";
 import { db } from "../firebase";
-import { Class } from "../types";
+import { Class, Student } from "../types";
 
 import * as XLSX from "xlsx";
 
@@ -39,11 +39,12 @@ export default function Students() {
     const file = event.target.files[0];
     const reader = new FileReader();
     reader.onload = async (e) => {
+      if (!e.target) return;
       const data = new Uint8Array(e.target.result as ArrayBuffer);
       const workbook = XLSX.read(data, { type: "array" });
       const sheet = workbook.Sheets[workbook.SheetNames[0]];
       const students = XLSX.utils.sheet_to_json(sheet);
-      setNewClass((cl) => ({ ...cl, students }));
+      setNewClass((cl) => ({ ...cl, students: students as Student[] }));
     };
     reader.readAsArrayBuffer(file);
   }
@@ -53,13 +54,14 @@ export default function Students() {
     const file = event.target.files[0];
     const reader = new FileReader();
     reader.onload = async (e) => {
+      if (!e.target) return;
       const data = new Uint8Array(e.target.result as ArrayBuffer);
       const workbook = XLSX.read(data, { type: "array" });
       const sheet = workbook.Sheets[workbook.SheetNames[0]];
       const students = XLSX.utils.sheet_to_json(sheet);
       setUpdatedStudents(JSON.stringify(students, null, 2));
       if (classId) {
-        updateClass(classId, { students }, true);
+        updateClass(classId, { students: students as Student[] }, true);
       }
     };
     reader.readAsArrayBuffer(file);
@@ -177,10 +179,12 @@ export default function Students() {
               rows={15}
               label="JSON-Daten"
               value={updatedStudents}
-              onInput={(e) => setUpdatedStudents(e.target.value)}
+              onInput={(e) =>
+                setUpdatedStudents((e.target as HTMLTextAreaElement).value)
+              }
             />
             <p />
-            <div style={{ display: "flex", gap: "10px" }}>
+            <div className="flex-gap">
               <mdui-button
                 variant="tonal"
                 onClick={() => navigate(`/admin/students/${classId}`)}
@@ -194,11 +198,12 @@ export default function Students() {
         {updateMethod === "by-file" && (
           <div>
             <input
+              aria-label="Datei auswählen"
               type="file"
               ref={fileInputRef}
-              style={{ display: "none" }}
               onChange={updateStudents}
               accept=".xlsx"
+              className="no-display"
             />
             <mdui-tooltip
               content="Bitte stellen Sie sicher, dass die Datei im .xlsx-Format vorliegt und das Format wie folgt ist: 1. Zeile — name | listIndex als Überschrift, danach für jede Zeile die individuellen Daten. Die Reihenfolge der Spalten ist nicht relevant. Es wird immer nur das erste Tabellenblatt gelesen."
@@ -221,14 +226,7 @@ export default function Students() {
 
   return (
     <div className="mdui-prose">
-      <div
-        style={{
-          display: "flex",
-          gap: "10px",
-          justifyContent: "space-between",
-          alignItems: "start",
-        }}
-      >
+      <div className="flex-gap justify-between">
         <h2>SchülerInnen</h2>
         <mdui-tooltip
           content="Alle Klassen werden um ein Schuljahr erhöht. Diese Aktion kann nicht rückgängig gemacht werden. Ausgelaufene Klassen werden nicht gelöscht."
@@ -266,14 +264,7 @@ export default function Students() {
         >
           Hinzufügen
         </mdui-tab>
-        <div
-          style={{
-            flex: "1",
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-          }}
-        >
+        <div className="justify-end">
           {classId !== "add" ? (
             <mdui-segmented-button-group>
               <mdui-segmented-button
@@ -317,8 +308,8 @@ export default function Students() {
         </div>
         {sortedClasses.map((c) => (
           <mdui-tab-panel slot="panel" value={c.id}>
-            <div style={{ padding: "10px" }}>
-              <div className="mdui-table" style={{ width: "100%" }}>
+            <div className="p-10">
+              <div className="mdui-table w-100">
                 <table>
                   <thead>
                     <tr>
@@ -346,22 +337,26 @@ export default function Students() {
           </mdui-tab-panel>
         ))}
         <mdui-tab-panel slot="panel" value="add">
-          <div style={{ padding: "10px" }}>
-            <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+          <div className="p-10">
+            <div className="align-center">
               <mdui-text-field
                 label="Klasse"
                 placeholder="7"
                 value={newClass.grade.toString()}
                 onInput={(e) =>
-                  setNewClass((cl) => ({ ...cl, grade: e.target.value }))
+                  setNewClass((cl) => ({
+                    ...cl,
+                    grade: Number((e.target as HTMLInputElement).value),
+                  }))
                 }
               />
               <input
+                aria-label="Datei auswählen"
                 type="file"
                 ref={fileInputRef}
-                style={{ display: "none" }}
                 onChange={uploadStudents}
                 accept=".xlsx"
+                className="no-display"
               />
               <mdui-tooltip
                 content="Bitte stellen Sie sicher, dass die Datei im .xlsx-Format vorliegt und das Format wie folgt ist: 1. Zeile — name | listIndex als Überschrift, danach für jede Zeile die individuellen Daten. Die Reihenfolge der Spalten ist nicht relevant. Es wird immer nur das erste Tabellenblatt gelesen."
@@ -379,7 +374,7 @@ export default function Students() {
             </div>
             <p />
             {newClass.students.length > 0 && (
-              <div className="mdui-table" style={{ width: "100%" }}>
+              <div className="mdui-table w-100">
                 <table>
                   <thead>
                     <tr>

diff --git a/src/admin/vote/Answers.jsx b/src/admin/vote/Answers.jsx
@@ -58,7 +58,7 @@ export default function Answers() {
 
     // Cleanup subscription on unmount
     return () => unsubscribe();
-  }, [vote.id]);
+  }, [vote.id, navigate]);
 
   React.useEffect(() => {
     if (search && mode === "by-name") {

diff --git a/src/admin/vote/Assign.jsx b/src/admin/vote/Assign.jsx
@@ -1,7 +1,7 @@
 import { collection, doc, getDoc, getDocs, setDoc } from "firebase/firestore";
 import { confirm, snackbar } from "mdui";
 import React from "react";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
 import { auth, db } from "../../firebase";
 
 export default function Assign() {
@@ -19,8 +19,6 @@ export default function Assign() {
   ]);
   const [editRules, setEditRules] = React.useState(false);
 
-  const navigate = useNavigate();
-
   function assignToFirstChoice() {
     const results = {};
     choices.forEach((choice) => {
@@ -380,7 +378,7 @@ export default function Assign() {
 
   function saveResults() {
     sortedResults.forEach(([key, value]) => {
-      const document = setDoc(doc(db, `/votes/${vote.id}/results/${key}`), {
+      setDoc(doc(db, `/votes/${vote.id}/results/${key}`), {
         result: value,
         comments: [],
       });
@@ -458,14 +456,11 @@ export default function Assign() {
               value={option.id}
             >
               {option.max <
-                sortedResults.filter(([key, value]) => value === option.id)
+                sortedResults.filter(([, value]) => value === option.id)
                   .length && "! "}
               {option.title} (
-              {
-                sortedResults.filter(([key, value]) => value === option.id)
-                  .length
-              }
-              /{option.max})
+              {sortedResults.filter(([, value]) => value === option.id).length}/
+              {option.max})
             </mdui-tab>
           ))}
           {options.map((option, i) => (
@@ -494,7 +489,7 @@ export default function Assign() {
                     </thead>
                     <tbody>
                       {sortedResults
-                        .filter(([key, value]) => value === option.id)
+                        .filter(([, value]) => value === option.id)
                         .map(([key, value]) => (
                           <tr key={key}>
                             <td>
@@ -540,7 +535,7 @@ export default function Assign() {
                                         ).title
                                       } (${
                                         sortedResults.filter(
-                                          ([key, value]) => value === selected
+                                          ([, value]) => value === selected
                                         ).length
                                       }/${
                                         options.find(
@@ -627,7 +622,7 @@ export default function Assign() {
                                 {results[choice.id] === selected &&
                                   ` (${
                                     sortedResults.filter(
-                                      ([key, value]) => value === selected
+                                      ([, value]) => value === selected
                                     ).length
                                   }/${
                                     options.find(

diff --git a/src/admin/vote/Match.tsx b/src/admin/vote/Match.tsx
@@ -37,7 +37,7 @@ export default function Match() {
           <p />
           {sortedClasses.map((c) => (
             <mdui-tab-panel slot="panel" value={c.id}>
-              <div style={{ padding: "10px" }}>
+              <div className="p-10">
                 <div className="mdui-table">
                   <table>
                     <thead>

diff --git a/src/admin/vote/Results.jsx b/src/admin/vote/Results.jsx
@@ -280,7 +280,12 @@ export default function Results() {
               </mdui-tab>
             ))}
             {options.map((option) => (
-              <mdui-tab-panel id={option.id} slot="panel" value={option.id}>
+              <mdui-tab-panel
+                key={option.id}
+                id={option.id}
+                slot="panel"
+                value={option.id}
+              >
                 <>
                   <p />
                   <div style={{ padding: "10px" }}>
@@ -390,7 +395,12 @@ export default function Results() {
             {grades
               .sort((a, b) => parseInt(a) - parseInt(b))
               .map((grade) => (
-                <mdui-tab-panel id={grade} slot="panel" value={grade}>
+                <mdui-tab-panel
+                  key={grade}
+                  id={grade}
+                  slot="panel"
+                  value={grade}
+                >
                   <>
                     <p />
                     <div style={{ padding: "10px" }}>

diff --git a/src/styles.css b/src/styles.css
@@ -250,6 +250,7 @@ button:not(:disabled):hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  -webkit-user-select: none;
   user-select: none;
   gap: 3px;
 }
@@ -311,6 +312,7 @@ button:not(:disabled):hover {
   font-style: italic;
   cursor: pointer;
   color: #1b4485;
+  -webkit-user-select: none;
   user-select: none;
   background-color: #e0e0e0;
 }
@@ -361,6 +363,49 @@ input::-webkit-inner-spin-button {
   margin-bottom: 10px !important;
 }
 
+.fixed-action{
+  position: fixed; 
+  bottom: 1rem; 
+  right: 1rem;
+}
+
+.flex-gap {
+  display: flex;
+  gap: 10px;
+}
+
+.justify-between {
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+.align-center{
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.justify-end{
+  flex:1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+}
+
+.p-10{
+  padding: 10px;
+}
+
+.w-100{
+  width: 100%;
+}
+
+.no-display{
+  display: none;
+}
+
 @media only screen and (max-width: 600px) {
   .vote {
     width: 100%;