Safety checks (URL and query) on admin sites

src/components/ProblemAdministration/ProblemAdministration.tsx

@@ -1,4 +1,5 @@
 import {FormatAlignJustify, Grading} from '@mui/icons-material'
+import {Typography} from '@mui/material'
 import {useMutation, useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -21,7 +22,11 @@ export const ProblemAdministration: FC = () => {
 
   const problemId = params && params[0]
 
-  const {data: problemData, refetch: refetchProblem} = useQuery({
+  const {
+    data: problemData,
+    refetch: refetchProblem,
+    isLoading: problemIsLoading,
+  } = useQuery({
     queryKey: ['competition', 'problem-administration', problemId],
     queryFn: () => axios.get<ProblemWithSolutions>(`/api/competition/problem-administration/${problemId}`),
     // router.query.params su v prvom renderi undefined, tak pustime query az so spravnym problemId
@@ -48,10 +53,6 @@ export const ProblemAdministration: FC = () => {
     onSuccess: () => refetchProblem(),
   })
 
-  const handleSavePoints = async () => {
-    problemId && uploadPoints(problemId)
-  }
-
   const updatePoints = (index: number, newPointsInput: string) => {
     const newPoints = Number.parseInt(newPointsInput)
     // nevalidny input spravi NaN
@@ -89,23 +90,27 @@ export const ProblemAdministration: FC = () => {
     },
   })
 
-  if (permissionsIsLoading) return <Loading />
+  if (permissionsIsLoading || problemIsLoading) return <Loading />
   if (!hasPermissions) return <span>Nemáš oprávnenie na zobrazenie tejto stránky.</span>
+  if (problemId === undefined || !problem)
+    return <Typography>Nevalidné číslo úlohy (problemId) v URL alebo ju proste nevieme fetchnúť z BE.</Typography>
+
+  const handleSavePoints = () => uploadPoints(problemId)
 
   return (
     <div className={styles.container}>
-      <h2>Opravovanie {problem?.order}. úlohy</h2>
+      <h2>Opravovanie {problem.order}. úlohy</h2>
 
       <div className={styles.rightButton}>
-        <Link href={`/strom/admin/opravovanie/${problem?.series.semester}`}>Späť na semester</Link>
+        <Link href={`/strom/admin/opravovanie/${problem.series.semester}`}>Späť na semester</Link>
       </div>
 
-      <Latex>{problem?.text ?? 'Načítavam...'}</Latex>
+      <Latex>{problem.text ?? 'Načítavam...'}</Latex>
 
       <div className={styles.row}>
         Vzorové riešenie:
-        {problem?.solution_pdf ? (
-          <a href={problem?.solution_pdf} target="_blank" rel="noreferrer" className={styles.icon}>
+        {problem.solution_pdf ? (
+          <a href={problem.solution_pdf} target="_blank" rel="noreferrer" className={styles.icon}>
             <FormatAlignJustify />
           </a>
         ) : (

src/components/PublicationUploader/PublicationUploader.tsx

@@ -10,7 +10,7 @@ import {FileUploader} from '../FileUploader/FileUploader'
 interface PublicationUploaderProps {
   semesterId: string
   order: number
-  semesterData: SemesterWithProblems | undefined
+  semesterData: SemesterWithProblems
 }
 
 export const PublicationUploader: FC<PublicationUploaderProps> = ({semesterId, order, semesterData}) => {
@@ -24,7 +24,7 @@ export const PublicationUploader: FC<PublicationUploaderProps> = ({semesterId, o
     formData.append('order', order.toString())
   }
 
-  const publication = semesterData?.publication_set.find((publication) => publication.order === order)
+  const publication = semesterData.publication_set.find((publication) => publication.order === order)
 
   return (
     <Stack direction="row" gap={2} alignItems="center">

src/components/SemesterAdministration/SemesterAdministration.tsx

@@ -1,4 +1,4 @@
-import {Stack} from '@mui/material'
+import {Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -31,7 +31,7 @@ export const SemesterAdministration: FC = () => {
 
   const {hasPermissions, permissionsIsLoading} = useHasPermissions()
 
-  const {data: semesterData} = useQuery({
+  const {data: semesterData, isLoading: semesterIsLoading} = useQuery({
     queryKey: ['competition', 'semester', semesterId],
     queryFn: () => axios.get<SemesterWithProblems>(`/api/competition/semester/${semesterId}`),
     // router.query.params su v prvom renderi undefined, tak pustime query az so spravnym semesterId
@@ -74,16 +74,18 @@ export const SemesterAdministration: FC = () => {
     )
   }
 
-  if (permissionsIsLoading) return <Loading />
+  if (permissionsIsLoading || semesterIsLoading) return <Loading />
   if (!hasPermissions) return <span>Nemáš oprávnenie na zobrazenie tejto stránky.</span>
+  if (semesterId === undefined || !semester)
+    return <Typography>Nevalidný semester (semesterId) v URL alebo ho proste nevieme fetchnúť z BE.</Typography>
 
   return (
     <>
       <h2>
-        {semester?.year}. ročník ({semester?.school_year}) - {semester?.season_code === 0 ? 'zima' : 'leto'}
+        {semester.year}. ročník ({semester.school_year}) - {semester.season_code === 0 ? 'zima' : 'leto'}
       </h2>
       Administrácia semestra pre opravovateľov.
-      {semester?.series_set.map((series) => (
+      {semester.series_set.map((series) => (
         <div key={series.id}>
           <h3>{series.order}. séria</h3>
           <table>
@@ -130,7 +132,7 @@ export const SemesterAdministration: FC = () => {
       <Stack mt={1} gap={1}>
         <h3>Nahrávanie časopisov</h3>
         {[1, 2, 3].map((order) => (
-          <PublicationUploader key={order} semesterId={semesterId ?? ''} order={order} semesterData={semester} />
+          <PublicationUploader key={order} semesterId={semesterId} order={order} semesterData={semester} />
         ))}
       </Stack>
     </>