update packages and small fixes

.nvmrc

@@ -0,0 +1 @@
+v20

package.json

@@ -16,26 +16,26 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@jonkoops/matomo-tracker-react": "^0.7.0",
-    "@material-table/core": "^6.2.3",
-    "@mui/icons-material": "^5.14.7",
-    "@mui/lab": "^5.0.0-alpha.142",
-    "@mui/material": "^5.14.7",
-    "@react-pdf/renderer": "^3.1.12",
+    "@material-table/core": "^6.3.2",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/lab": "^5.0.0-alpha.166",
+    "@mui/material": "^5.15.11",
+    "@react-pdf/renderer": "^3.3.8",
     "i18next": "^22.5.1",
     "react-i18next": "^12.2.0",
-    "react-router-dom": "^6.15.0",
+    "react-router-dom": "^6.22.1",
     "source-map-explorer": "^2.5.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^5.1.4",
     "react-error-overlay": "6.0.11"
   }
 }

src/components/Groups/GroupInfo.jsx

@@ -20,7 +20,7 @@ export default function GroupInfo(props) {
                     Gruppe: {groupData.gid} - ({groupData.id}) #{groupData.count}
                 </p>
                 <p>Alter: {groupData.age}</p>
-                <p>Diszilpin: {groupData.discipline}</p>
+                <p>Disziplin: {groupData.discipline}</p>
                 <p>Gurt: {groupData.belt}</p>
                 <p>Geschlecht: {groupData.gender}</p>
                 <p>Pool: {groupData.pool}</p>

src/components/Results/PostResult.jsx

@@ -1,9 +1,7 @@
 import { TextField, Button } from '@mui/material'
 import { useState } from 'react'
 
-export default function PostResult(props) {
-    const { apiServer, token, groups, setGroups } = props
-
+export default function PostResult({ apiServer, token, groups, setGroups }) {
     const initialFormData = Object.freeze({
         gid: '',
         p1: '',

src/components/Results/TournamentResults.jsx

@@ -0,0 +1,37 @@
+import ResultsEntryContainer from '../Results/ResultsEntryContainer'
+
+export default function TournamentResults({ groups, user, participants, teams }) {
+    const result = []
+    const getParticipant = (id) => {
+        return participants.find((x) => x.id == id)
+    }
+    const getTeams = (id) => {
+        return teams.find((x) => x.id == id)
+    }
+
+    groups.forEach((el) => {
+        if (el.platz1 || el.platz1team > 0 || el.results) {
+            let place, team
+            const parseResults = el.results && JSON.parse(el.results)
+            if (el.disziplin.includes('Team')) {
+                team = true
+                place = {
+                    p1: el.results ? getTeams(parseResults.p1) : getTeams(el.platz1team),
+                    p2: el.results ? getTeams(parseResults.p2) : getTeams(el.platz2team),
+                    p3: el.results ? getTeams(parseResults.p3) : getTeams(el.platz3team),
+                    p4: el.results ? getTeams(parseResults.p4) : getTeams(el.platz4team),
+                }
+            } else {
+                team = false
+                place = {
+                    p1: el.results ? getParticipant(parseResults.p1) : getParticipant(el.platz1),
+                    p2: el.results ? getParticipant(parseResults.p2) : getParticipant(el.platz2),
+                    p3: el.results ? getParticipant(parseResults.p3) : getParticipant(el.platz3),
+                    p4: el.results ? getParticipant(parseResults.p4) : getParticipant(el.platz4),
+                }
+            }
+            result.push(<ResultsEntryContainer key={el.id} el={el} team={team} place={place} user={user} />)
+        }
+    })
+    return result
+}

src/pages/Results.jsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import useFetch from '../components/UseFetch/UseFetch'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import PostResult from '../components/Results/PostResult'
-import ResultsEntryContainer from '../components/Results/ResultsEntryContainer'
+import TournamentResults from '../components/Results/TournamentResults'
 import { Link } from 'react-router-dom'
 
 import { styled, Button } from '@mui/material'
@@ -17,8 +17,7 @@ const classes = {
     routerLink: `${PREFIX}-routerLink`,
 }
 
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled('div')(({ theme }) => ({
+const Root = styled('div')(() => ({
     [`& .${classes.routerLink}`]: {
         marginTop: '2rem',
         textDecoration: 'inherit',
@@ -35,7 +34,7 @@ export default function Results(props) {
     const { data: fetchedGroups } = useFetch(apiServer + '/group/' + tid)
     const [groups, setGroups] = useState(null)
 
-    // console.log('groups',groups)
+    console.log('groups', groups)
     // console.log('participants', participants)
     // console.log('teams', teams)
     // console.log('tournament', tournament)
@@ -50,43 +49,8 @@ export default function Results(props) {
         setGroups(fetchedGroups)
     }, [fetchedGroups])
 
-    const getParticipant = (id) => {
-        return participants.find((x) => x.id == id)
-    }
-    const getTeams = (id) => {
-        return teams.find((x) => x.id == id)
-    }
-
-    const TournamentResults = () => {
-        const result = []
-        groups.forEach((el) => {
-            if (el.platz1 || el.platz1team > 0 || el.results) {
-                let place, team
-                const parseResults = el.results && JSON.parse(el.results)
-                if (el.disziplin.includes('Team')) {
-                    team = true
-                    place = {
-                        p1: el.results ? getTeams(parseResults.p1) : getTeams(el.platz1team),
-                        p2: el.results ? getTeams(parseResults.p2) : getTeams(el.platz2team),
-                        p3: el.results ? getTeams(parseResults.p3) : getTeams(el.platz3team),
-                        p4: el.results ? getTeams(parseResults.p4) : getTeams(el.platz4team),
-                    }
-                } else {
-                    team = false
-                    place = {
-                        p1: el.results ? getParticipant(parseResults.p1) : getParticipant(el.platz1),
-                        p2: el.results ? getParticipant(parseResults.p2) : getParticipant(el.platz2),
-                        p3: el.results ? getParticipant(parseResults.p3) : getParticipant(el.platz3),
-                        p4: el.results ? getParticipant(parseResults.p4) : getParticipant(el.platz4),
-                    }
-                }
-                result.push(<ResultsEntryContainer key={el.id} el={el} team={team} place={place} user={user} />)
-            }
-        })
-        return result
-    }
-
     return (
+        fetchedGroups &&
         tournament &&
         participants &&
         teams &&
@@ -99,7 +63,8 @@ export default function Results(props) {
                 <br />
                 <h3>Ergebnisse:</h3>
                 {user?.admin > 2 && token && <PostResult apiServer={apiServer} token={token} groups={groups} setGroups={setGroups} />}
-                <TournamentResults />
+                <TournamentResults groups={groups} participants={participants} teams={teams} user={user} />
+
                 <Link to={'/'} className={classes.routerLink}>
                     <Button variant="outlined" startIcon={<ArrowBackIcon />}>
                         {t('back-to-page')}