From c71ff7d2023ba8ed62213f0f1b5225e3500d8b29 Mon Sep 17 00:00:00 2001 From: JohanGrims Date: Sat, 7 Dec 2024 20:25:10 +0100 Subject: [PATCH] Refactor components for improved readability, add key props for list items, and enhance CSS styles for better layout --- src/App.jsx | 3 +- src/Gateway.jsx | 8 ++++- src/admin/CreateHelp.tsx | 2 +- src/admin/CreateReleaseNotes.tsx | 2 +- src/admin/Students.tsx | 53 +++++++++++++++----------------- src/admin/vote/Answers.jsx | 2 +- src/admin/vote/Assign.jsx | 21 +++++-------- src/admin/vote/Match.tsx | 2 +- src/admin/vote/Results.jsx | 14 +++++++-- src/styles.css | 45 +++++++++++++++++++++++++++ 10 files changed, 102 insertions(+), 50 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 561dc75..65786a0 100644 --- 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) => ( ( -
+
{publishing ? ( Veröffentlichen diff --git a/src/admin/CreateReleaseNotes.tsx b/src/admin/CreateReleaseNotes.tsx index c8193cc..74384aa 100644 --- a/src/admin/CreateReleaseNotes.tsx +++ b/src/admin/CreateReleaseNotes.tsx @@ -48,7 +48,7 @@ export default function CreateReleaseNotes() { -
+
{publishing ? ( Veröffentlichen diff --git a/src/admin/Students.tsx b/src/admin/Students.tsx index 35a6d36..d853d72 100644 --- 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) + } />

-

+
navigate(`/admin/students/${classId}`)} @@ -194,11 +198,12 @@ export default function Students() { {updateMethod === "by-file" && (
-
+

SchülerInnen

Hinzufügen -
+
{classId !== "add" ? ( {sortedClasses.map((c) => ( -
-
+
+
@@ -346,22 +337,26 @@ export default function Students() { ))} -
-
+
+
- setNewClass((cl) => ({ ...cl, grade: e.target.value })) + setNewClass((cl) => ({ + ...cl, + grade: Number((e.target as HTMLInputElement).value), + })) } />

{newClass.students.length > 0 && ( -

+
diff --git a/src/admin/vote/Answers.jsx b/src/admin/vote/Answers.jsx index e077d75..c2838ac 100644 --- 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 index 7c19439..bb447bf 100644 --- 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}) ))} {options.map((option, i) => ( @@ -494,7 +489,7 @@ export default function Assign() { {sortedResults - .filter(([key, value]) => value === option.id) + .filter(([, value]) => value === option.id) .map(([key, value]) => (
@@ -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 index f6ddf6f..3f72e79 100644 --- a/src/admin/vote/Match.tsx +++ b/src/admin/vote/Match.tsx @@ -37,7 +37,7 @@ export default function Match() {

{sortedClasses.map((c) => ( -

+
diff --git a/src/admin/vote/Results.jsx b/src/admin/vote/Results.jsx index c7a17ef..177d357 100644 --- a/src/admin/vote/Results.jsx +++ b/src/admin/vote/Results.jsx @@ -280,7 +280,12 @@ export default function Results() { ))} {options.map((option) => ( - + <>

@@ -390,7 +395,12 @@ export default function Results() { {grades .sort((a, b) => parseInt(a) - parseInt(b)) .map((grade) => ( - + <>

diff --git a/src/styles.css b/src/styles.css index 33778e3..0ef77b5 100644 --- 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%;