From e6ee46ca00f67723ebdd574bf05fb1c66bc200ea Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 15:05:39 +0100
Subject: [PATCH 1/8] remove unused code

upload is not in the side panel anymore
---
 src/components/Problems/Problems.tsx | 455 +++++++++++++--------------
 1 file changed, 223 insertions(+), 232 deletions(-)

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index 11784984..9e6b5291 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -1,232 +1,223 @@
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
-import axios from 'axios'
-import Image from 'next/image'
-import {Dispatch, FC, SetStateAction, useState} from 'react'
-
-import {Button, Link} from '@/components/Clickable/Clickable'
-import {Problem, SeriesWithProblems} from '@/types/api/competition'
-import {useDataFromURL} from '@/utils/useDataFromURL'
-import {useHasPermissions} from '@/utils/useHasPermissions'
-
-import {Latex} from '../Latex/Latex'
-import {Loading} from '../Loading/Loading'
-import {Discussion} from './Discussion'
-import styles from './Problems.module.scss'
-import {UploadProblemForm} from './UploadProblemForm'
-
-const Problem: FC<{
-  problem: Problem
-  setDisplaySideContent: Dispatch<
-    SetStateAction<{
-      type: string
-      problemId: number
-      problemNumber: number
-      problemSubmitted?: boolean
-    }>
-  >
-  registered: boolean
-  canRegister: boolean
-  canSubmit: boolean
-  invalidateSeriesQuery: () => Promise<void>
-}> = ({problem, registered, setDisplaySideContent, canSubmit, invalidateSeriesQuery}) => {
-  const handleDiscussionButtonClick = () => {
-    setDisplaySideContent((prevState) => {
-      if (prevState.type === 'discussion' && prevState.problemId === problem.id) {
-        return {type: '', problemId: -1, problemNumber: -1}
-      } else {
-        return {type: 'discussion', problemId: problem.id, problemNumber: problem.order}
-      }
-    })
-  }
-  const handleUploadClick = () => {
-    setDisplayProblemUploadForm((prevState) => !prevState)
-    setDisplayActions(false)
-  }
-
-  const [displayProblemUploadForm, setDisplayProblemUploadForm] = useState<boolean>(false)
-  const [displayActions, setDisplayActions] = useState(true)
-
-  return (
-    <div className={styles.problem}>
-      <h3 className={styles.problemTitle}>{problem.order}. ÚLOHA</h3>
-      <Latex>{problem.text}</Latex>
-      {problem.image && (
-        <div className={styles.imageContainer}>
-          <Image
-            src={problem.image}
-            alt={`Obrázok - ${problem.order} úloha`}
-            className={styles.image}
-            width={800} // These values are overwritten by css
-            height={800}
-          />
-        </div>
-      )}
-      {displayProblemUploadForm && (
-        <UploadProblemForm
-          problemId={problem.id}
-          setDisplayProblemUploadForm={setDisplayProblemUploadForm}
-          problemSubmitted={!!problem.submitted}
-          invalidateSeriesQuery={invalidateSeriesQuery}
-          setDisplayActions={setDisplayActions}
-        />
-      )}
-      {displayActions && (
-        <div className={styles.actions}>
-          {problem.solution_pdf && (
-            <Link href={problem.solution_pdf} target="_blank">
-              vzorové riešenie
-            </Link>
-          )}
-          {registered && (
-            <>
-              <Link
-                href={`/api/competition/problem/${problem.id}/my-solution`}
-                target="_blank"
-                disabled={!problem.submitted}
-              >
-                moje riešenie
-              </Link>
-              <Link
-                href={`/api/competition/problem/${problem.id}/corrected-solution`}
-                target="_blank"
-                disabled={!problem.submitted?.corrected_solution}
-              >
-                opravené riešenie{!!problem.submitted?.corrected_solution && ` (${problem.submitted.score || '?'})`}
-              </Link>
-            </>
-          )}
-          <Button onClick={handleDiscussionButtonClick}>diskusia ({problem.num_comments}) </Button>
-          {registered && (
-            <Button onClick={handleUploadClick} disabled={!canSubmit}>
-              odovzdať
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-const overrideCycle = (prev: boolean | undefined) => {
-  if (prev === undefined) return true
-  if (prev === true) return false
-  return undefined
-}
-
-export const Problems: FC = () => {
-  const {id, seminar, loading} = useDataFromURL()
-
-  // used to display discussions
-  const [displaySideContent, setDisplaySideContent] = useState<{
-    type: string
-    problemId: number
-    problemNumber: number
-    problemSubmitted?: boolean
-  }>({type: '', problemId: -1, problemNumber: -1, problemSubmitted: false})
-
-  const {data: seriesData, isLoading: seriesIsLoading} = useQuery({
-    queryKey: ['competition', 'series', id.seriesId],
-    queryFn: () => axios.get<SeriesWithProblems>(`/api/competition/series/${id.seriesId}`),
-    enabled: id.seriesId !== -1,
-  })
-  const series = seriesData?.data
-  const problems = series?.problems ?? []
-  // const semesterId = series?.semester ?? -1
-  const canSubmit = series?.can_submit ?? false
-
-  const [overrideCanRegister, setOverrideCanRegister] = useState<boolean>()
-  const [overrideIsRegistered, setOverrideIsRegistered] = useState<boolean>()
-  const toggleCanRegister = () => setOverrideCanRegister((prevState) => overrideCycle(prevState))
-  const toggleIsRegistered = () => setOverrideIsRegistered((prevState) => overrideCycle(prevState))
-
-  const canRegister = overrideCanRegister ?? series?.can_participate ?? false
-  const isRegistered = overrideIsRegistered ?? series?.is_registered ?? false
-
-  const queryClient = useQueryClient()
-
-  const invalidateSeriesQuery = () => queryClient.invalidateQueries({queryKey: ['competition', 'series', id.seriesId]})
-
-  const {mutate: registerToSemester} = useMutation({
-    mutationFn: (id: number) => axios.post(`/api/competition/event/${id}/register`),
-    onSuccess: () => {
-      // refetch semestra, nech sa aktualizuje is_registered
-      invalidateSeriesQuery()
-    },
-  })
-
-  const {hasPermissions, permissionsIsLoading} = useHasPermissions()
-
-  return (
-    <>
-      <div className={styles.container}>
-        {(loading.semesterListIsLoading ||
-          loading.currentSeriesIsLoading ||
-          seriesIsLoading ||
-          permissionsIsLoading) && <Loading />}
-        {hasPermissions && (
-          <div className={styles.adminSection}>
-            <Link href={`/${seminar}/admin/opravovanie/${id.semesterId}`}>Admin: Opravovanie</Link>
-          </div>
-        )}
-        {problems.map((problem) => (
-          <Problem
-            key={problem.id}
-            problem={problem}
-            setDisplaySideContent={setDisplaySideContent}
-            registered={isRegistered}
-            canRegister={canRegister}
-            canSubmit={canSubmit}
-            invalidateSeriesQuery={invalidateSeriesQuery}
-          />
-        ))}
-
-        {/* TODO: odstranit z produkcie */}
-        <div className={styles.debug}>
-          <span>debug sekcia:</span>
-          <div>
-            <Button onClick={toggleIsRegistered}>Override isRegistered:</Button>
-            <span style={{color: '#A00', fontWeight: 600}}>
-              {' '}
-              {overrideIsRegistered === undefined ? 'no override' : overrideIsRegistered ? 'on' : 'off'}
-            </span>
-          </div>
-          <div>
-            <Button onClick={toggleCanRegister}>Override canRegister:</Button>
-            <span style={{color: '#A00', fontWeight: 600}}>
-              {' '}
-              {overrideCanRegister === undefined ? 'no override' : overrideCanRegister ? 'on' : 'off'}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.sideContainer}>
-        {!isRegistered && canRegister ? (
-          <div onClick={() => registerToSemester(id.semesterId)} className={styles.registerButton}>
-            Chcem riešiť!
-          </div>
-        ) : (
-          // sideCointainer grid rata s tymto childom, aj ked prazdnym
-          <div />
-        )}
-        {displaySideContent.type === 'discussion' && (
-          <Discussion
-            problemId={displaySideContent.problemId}
-            problemNumber={displaySideContent.problemNumber}
-            closeDiscussion={() => setDisplaySideContent({type: '', problemId: -1, problemNumber: -1})}
-            invalidateSeriesQuery={invalidateSeriesQuery}
-          />
-        )}
-        {/* {displaySideContent.type === 'uploadProblemForm' && (
-          <UploadProblemForm
-            problemId={displaySideContent.problemId}
-            problemNumber={displaySideContent.problemNumber}
-            problemSubmitted={displaySideContent.problemSubmitted}
-            setDisplaySideContent={setDisplaySideContent}
-            invalidateSeriesQuery={invalidateSeriesQuery}
-          />
-        )} */}
-      </div>
-    </>
-  )
-}
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import axios from 'axios'
+import Image from 'next/image'
+import {Dispatch, FC, SetStateAction, useState} from 'react'
+
+import {Button, Link} from '@/components/Clickable/Clickable'
+import {Problem, SeriesWithProblems} from '@/types/api/competition'
+import {useDataFromURL} from '@/utils/useDataFromURL'
+import {useHasPermissions} from '@/utils/useHasPermissions'
+
+import {Latex} from '../Latex/Latex'
+import {Loading} from '../Loading/Loading'
+import {Discussion} from './Discussion'
+import styles from './Problems.module.scss'
+import {UploadProblemForm} from './UploadProblemForm'
+
+const Problem: FC<{
+  problem: Problem
+  setDisplaySideContent: Dispatch<
+    SetStateAction<{
+      type: string
+      problemId: number
+      problemNumber: number
+      problemSubmitted?: boolean
+    }>
+  >
+  registered: boolean
+  canRegister: boolean
+  canSubmit: boolean
+  invalidateSeriesQuery: () => Promise<void>
+}> = ({problem, registered, setDisplaySideContent, canSubmit, invalidateSeriesQuery}) => {
+  const handleDiscussionButtonClick = () => {
+    setDisplaySideContent((prevState) => {
+      if (prevState.type === 'discussion' && prevState.problemId === problem.id) {
+        return {type: '', problemId: -1, problemNumber: -1}
+      } else {
+        return {type: 'discussion', problemId: problem.id, problemNumber: problem.order}
+      }
+    })
+  }
+  const handleUploadClick = () => {
+    setDisplayProblemUploadForm((prevState) => !prevState)
+    setDisplayActions(false)
+  }
+
+  const [displayProblemUploadForm, setDisplayProblemUploadForm] = useState<boolean>(false)
+  const [displayActions, setDisplayActions] = useState(true)
+
+  return (
+    <div className={styles.problem}>
+      <h3 className={styles.problemTitle}>{problem.order}. ÚLOHA</h3>
+      <Latex>{problem.text}</Latex>
+      {problem.image && (
+        <div className={styles.imageContainer}>
+          <Image
+            src={problem.image}
+            alt={`Obrázok - ${problem.order} úloha`}
+            className={styles.image}
+            width={800} // These values are overwritten by css
+            height={800}
+          />
+        </div>
+      )}
+      {displayProblemUploadForm && (
+        <UploadProblemForm
+          problemId={problem.id}
+          setDisplayProblemUploadForm={setDisplayProblemUploadForm}
+          problemSubmitted={!!problem.submitted}
+          invalidateSeriesQuery={invalidateSeriesQuery}
+          setDisplayActions={setDisplayActions}
+        />
+      )}
+      {displayActions && (
+        <div className={styles.actions}>
+          {problem.solution_pdf && (
+            <Link href={problem.solution_pdf} target="_blank">
+              vzorové riešenie
+            </Link>
+          )}
+          {registered && (
+            <>
+              <Link
+                href={`/api/competition/problem/${problem.id}/my-solution`}
+                target="_blank"
+                disabled={!problem.submitted}
+              >
+                moje riešenie
+              </Link>
+              <Link
+                href={`/api/competition/problem/${problem.id}/corrected-solution`}
+                target="_blank"
+                disabled={!problem.submitted?.corrected_solution}
+              >
+                opravené riešenie{!!problem.submitted?.corrected_solution && ` (${problem.submitted.score || '?'})`}
+              </Link>
+            </>
+          )}
+          <Button onClick={handleDiscussionButtonClick}>diskusia ({problem.num_comments}) </Button>
+          {registered && (
+            <Button onClick={handleUploadClick} disabled={!canSubmit}>
+              odovzdať
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const overrideCycle = (prev: boolean | undefined) => {
+  if (prev === undefined) return true
+  if (prev === true) return false
+  return undefined
+}
+
+export const Problems: FC = () => {
+  const {id, seminar, loading} = useDataFromURL()
+
+  // used to display discussions
+  const [displaySideContent, setDisplaySideContent] = useState<{
+    type: string
+    problemId: number
+    problemNumber: number
+    problemSubmitted?: boolean
+  }>({type: '', problemId: -1, problemNumber: -1, problemSubmitted: false})
+
+  const {data: seriesData, isLoading: seriesIsLoading} = useQuery({
+    queryKey: ['competition', 'series', id.seriesId],
+    queryFn: () => axios.get<SeriesWithProblems>(`/api/competition/series/${id.seriesId}`),
+    enabled: id.seriesId !== -1,
+  })
+  const series = seriesData?.data
+  const problems = series?.problems ?? []
+  // const semesterId = series?.semester ?? -1
+  const canSubmit = series?.can_submit ?? false
+
+  const [overrideCanRegister, setOverrideCanRegister] = useState<boolean>()
+  const [overrideIsRegistered, setOverrideIsRegistered] = useState<boolean>()
+  const toggleCanRegister = () => setOverrideCanRegister((prevState) => overrideCycle(prevState))
+  const toggleIsRegistered = () => setOverrideIsRegistered((prevState) => overrideCycle(prevState))
+
+  const canRegister = overrideCanRegister ?? series?.can_participate ?? false
+  const isRegistered = overrideIsRegistered ?? series?.is_registered ?? false
+
+  const queryClient = useQueryClient()
+
+  const invalidateSeriesQuery = () => queryClient.invalidateQueries({queryKey: ['competition', 'series', id.seriesId]})
+
+  const {mutate: registerToSemester} = useMutation({
+    mutationFn: (id: number) => axios.post(`/api/competition/event/${id}/register`),
+    onSuccess: () => {
+      // refetch semestra, nech sa aktualizuje is_registered
+      invalidateSeriesQuery()
+    },
+  })
+
+  const {hasPermissions, permissionsIsLoading} = useHasPermissions()
+
+  return (
+    <>
+      <div className={styles.container}>
+        {(loading.semesterListIsLoading ||
+          loading.currentSeriesIsLoading ||
+          seriesIsLoading ||
+          permissionsIsLoading) && <Loading />}
+        {hasPermissions && (
+          <div className={styles.adminSection}>
+            <Link href={`/${seminar}/admin/opravovanie/${id.semesterId}`}>Admin: Opravovanie</Link>
+          </div>
+        )}
+        {problems.map((problem) => (
+          <Problem
+            key={problem.id}
+            problem={problem}
+            setDisplaySideContent={setDisplaySideContent}
+            registered={isRegistered}
+            canRegister={canRegister}
+            canSubmit={canSubmit}
+            invalidateSeriesQuery={invalidateSeriesQuery}
+          />
+        ))}
+
+        {/* TODO: odstranit z produkcie */}
+        <div className={styles.debug}>
+          <span>debug sekcia:</span>
+          <div>
+            <Button onClick={toggleIsRegistered}>Override isRegistered:</Button>
+            <span style={{color: '#A00', fontWeight: 600}}>
+              {' '}
+              {overrideIsRegistered === undefined ? 'no override' : overrideIsRegistered ? 'on' : 'off'}
+            </span>
+          </div>
+          <div>
+            <Button onClick={toggleCanRegister}>Override canRegister:</Button>
+            <span style={{color: '#A00', fontWeight: 600}}>
+              {' '}
+              {overrideCanRegister === undefined ? 'no override' : overrideCanRegister ? 'on' : 'off'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.sideContainer}>
+        {!isRegistered && canRegister ? (
+          <div onClick={() => registerToSemester(id.semesterId)} className={styles.registerButton}>
+            Chcem riešiť!
+          </div>
+        ) : (
+          // sideCointainer grid rata s tymto childom, aj ked prazdnym
+          <div />
+        )}
+        {displaySideContent.type === 'discussion' && (
+          <Discussion
+            problemId={displaySideContent.problemId}
+            problemNumber={displaySideContent.problemNumber}
+            closeDiscussion={() => setDisplaySideContent({type: '', problemId: -1, problemNumber: -1})}
+            invalidateSeriesQuery={invalidateSeriesQuery}
+          />
+        )}
+      </div>
+    </>
+  )
+}

From 7b84a5e37614706e16838660be25e01d2385459c Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 15:05:52 +0100
Subject: [PATCH 2/8] removed chcem riesit button

---
 src/components/Problems/Problems.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index 9e6b5291..55ae2e77 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -199,16 +199,7 @@ export const Problems: FC = () => {
           </div>
         </div>
       </div>
-
       <div className={styles.sideContainer}>
-        {!isRegistered && canRegister ? (
-          <div onClick={() => registerToSemester(id.semesterId)} className={styles.registerButton}>
-            Chcem riešiť!
-          </div>
-        ) : (
-          // sideCointainer grid rata s tymto childom, aj ked prazdnym
-          <div />
-        )}
         {displaySideContent.type === 'discussion' && (
           <Discussion
             problemId={displaySideContent.problemId}

From da551ee0e62085d3a4ecd78dd6ae4ec1f93acebc Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 15:06:19 +0100
Subject: [PATCH 3/8] Register dialog when user not registered to semester
 tries to upload their first solution

---
 src/components/Problems/Problems.tsx | 62 +++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index 55ae2e77..1c013973 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -1,13 +1,17 @@
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
 import Image from 'next/image'
+import {useRouter} from 'next/router'
 import {Dispatch, FC, SetStateAction, useState} from 'react'
 
 import {Button, Link} from '@/components/Clickable/Clickable'
 import {Problem, SeriesWithProblems} from '@/types/api/competition'
+import {Profile} from '@/types/api/personal'
+import {AuthContainer} from '@/utils/AuthContainer'
 import {useDataFromURL} from '@/utils/useDataFromURL'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
+import {Dialog} from '../Dialog/Dialog'
 import {Latex} from '../Latex/Latex'
 import {Loading} from '../Loading/Loading'
 import {Discussion} from './Discussion'
@@ -28,7 +32,16 @@ const Problem: FC<{
   canRegister: boolean
   canSubmit: boolean
   invalidateSeriesQuery: () => Promise<void>
-}> = ({problem, registered, setDisplaySideContent, canSubmit, invalidateSeriesQuery}) => {
+  displayRegisterDialog: () => void
+}> = ({
+  problem,
+  registered,
+  setDisplaySideContent,
+  canRegister,
+  canSubmit,
+  invalidateSeriesQuery,
+  displayRegisterDialog,
+}) => {
   const handleDiscussionButtonClick = () => {
     setDisplaySideContent((prevState) => {
       if (prevState.type === 'discussion' && prevState.problemId === problem.id) {
@@ -39,8 +52,12 @@ const Problem: FC<{
     })
   }
   const handleUploadClick = () => {
-    setDisplayProblemUploadForm((prevState) => !prevState)
-    setDisplayActions(false)
+    if (!registered && canRegister) {
+      displayRegisterDialog()
+    } else {
+      setDisplayProblemUploadForm((prevState) => !prevState)
+      setDisplayActions(false)
+    }
   }
 
   const [displayProblemUploadForm, setDisplayProblemUploadForm] = useState<boolean>(false)
@@ -96,7 +113,7 @@ const Problem: FC<{
             </>
           )}
           <Button onClick={handleDiscussionButtonClick}>diskusia ({problem.num_comments}) </Button>
-          {registered && (
+          {(registered || canRegister) && (
             <Button onClick={handleUploadClick} disabled={!canSubmit}>
               odovzdať
             </Button>
@@ -116,6 +133,17 @@ const overrideCycle = (prev: boolean | undefined) => {
 export const Problems: FC = () => {
   const {id, seminar, loading} = useDataFromURL()
 
+  const router = useRouter()
+
+  const {isAuthed} = AuthContainer.useContainer()
+
+  const {data} = useQuery({
+    queryKey: ['personal', 'profiles', 'myprofile'],
+    queryFn: () => axios.get<Profile>(`/api/personal/profiles/myprofile`),
+    enabled: isAuthed,
+  })
+  const profile = data?.data
+
   // used to display discussions
   const [displaySideContent, setDisplaySideContent] = useState<{
     type: string
@@ -131,7 +159,7 @@ export const Problems: FC = () => {
   })
   const series = seriesData?.data
   const problems = series?.problems ?? []
-  // const semesterId = series?.semester ?? -1
+  const semesterId = series?.semester ?? -1
   const canSubmit = series?.can_submit ?? false
 
   const [overrideCanRegister, setOverrideCanRegister] = useState<boolean>()
@@ -156,8 +184,31 @@ export const Problems: FC = () => {
 
   const {hasPermissions, permissionsIsLoading} = useHasPermissions()
 
+  const [deleteDialogId, setDeleteDialogId] = useState<number | undefined>()
+  const close = () => setDeleteDialogId(undefined)
+  const editProfile = () => {
+    close()
+    router.push(`/${seminar}/profil/uprava`)
+  }
+  const agree = () => {
+    deleteDialogId !== undefined && registerToSemester(semesterId)
+    close()
+  }
+
   return (
     <>
+      <Dialog
+        open={deleteDialogId !== undefined}
+        close={close}
+        title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
+        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled, I suggest expanding the dialog component to support content as component
+        actions={
+          <>
+            <Button onClick={editProfile}>Zmeniť údaje</Button>
+            <Button onClick={agree}>Údaje sú správne</Button>
+          </>
+        }
+      />
       <div className={styles.container}>
         {(loading.semesterListIsLoading ||
           loading.currentSeriesIsLoading ||
@@ -177,6 +228,7 @@ export const Problems: FC = () => {
             canRegister={canRegister}
             canSubmit={canSubmit}
             invalidateSeriesQuery={invalidateSeriesQuery}
+            displayRegisterDialog={() => setDeleteDialogId(problem.id)}
           />
         ))}
 

From d8fcfb48ef0a17b7f9e3946bb700d0dc9c7553c4 Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 15:21:34 +0100
Subject: [PATCH 4/8] LF -> CRLF fix

---
 src/components/Problems/Problems.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index 1c013973..a528c322 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -201,7 +201,7 @@ export const Problems: FC = () => {
         open={deleteDialogId !== undefined}
         close={close}
         title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
-        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled, I suggest expanding the dialog component to support content as component
+        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled yet, I suggest expanding the dialog component to support content as component
         actions={
           <>
             <Button onClick={editProfile}>Zmeniť údaje</Button>

From acb9b413a8cb3c3781ae22b17f8fc9a895e2e987 Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 15:32:22 +0100
Subject: [PATCH 5/8] CRLF fix

---
 src/components/Problems/Problems.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index a528c322..1c013973 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -201,7 +201,7 @@ export const Problems: FC = () => {
         open={deleteDialogId !== undefined}
         close={close}
         title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
-        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled yet, I suggest expanding the dialog component to support content as component
+        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled, I suggest expanding the dialog component to support content as component
         actions={
           <>
             <Button onClick={editProfile}>Zmeniť údaje</Button>

From 1a756ceb212ba7cccde2cef1020e58ece54145b4 Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 19:14:07 +0100
Subject: [PATCH 6/8] Register to semester dialog refactor

---
 src/components/Problems/Problems.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index 1c013973..c3409167 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -184,22 +184,22 @@ export const Problems: FC = () => {
 
   const {hasPermissions, permissionsIsLoading} = useHasPermissions()
 
-  const [deleteDialogId, setDeleteDialogId] = useState<number | undefined>()
-  const close = () => setDeleteDialogId(undefined)
+  const [displayRegisterDialog, setDisplayRegisterDialog] = useState<boolean>(false)
+  const closeRegisterDialog = () => setDisplayRegisterDialog(false)
   const editProfile = () => {
-    close()
+    closeRegisterDialog()
     router.push(`/${seminar}/profil/uprava`)
   }
   const agree = () => {
-    deleteDialogId !== undefined && registerToSemester(semesterId)
-    close()
+    displayRegisterDialog && registerToSemester(semesterId)
+    closeRegisterDialog()
   }
 
   return (
     <>
       <Dialog
-        open={deleteDialogId !== undefined}
-        close={close}
+        open={displayRegisterDialog}
+        close={closeRegisterDialog}
         title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
         contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled, I suggest expanding the dialog component to support content as component
         actions={
@@ -228,7 +228,7 @@ export const Problems: FC = () => {
             canRegister={canRegister}
             canSubmit={canSubmit}
             invalidateSeriesQuery={invalidateSeriesQuery}
-            displayRegisterDialog={() => setDeleteDialogId(problem.id)}
+            displayRegisterDialog={() => setDisplayRegisterDialog(true)}
           />
         ))}
 

From 44a97d16b26d5124cf25b96114a534206941dd9b Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 19:57:19 +0100
Subject: [PATCH 7/8] Splitting Problem and Problems component to separate
 files

---
 src/components/Problems/Problem.module.scss   |  28 +++++
 .../Problems/Problem.module.scss.d.ts         |  13 ++
 src/components/Problems/Problem.tsx           | 115 ++++++++++++++++++
 src/components/Problems/Problems.module.scss  |  45 -------
 .../Problems/Problems.module.scss.d.ts        |   6 -
 src/components/Problems/Problems.tsx          | 114 +----------------
 6 files changed, 159 insertions(+), 162 deletions(-)
 create mode 100644 src/components/Problems/Problem.module.scss
 create mode 100644 src/components/Problems/Problem.module.scss.d.ts
 create mode 100644 src/components/Problems/Problem.tsx

diff --git a/src/components/Problems/Problem.module.scss b/src/components/Problems/Problem.module.scss
new file mode 100644
index 00000000..d08c7726
--- /dev/null
+++ b/src/components/Problems/Problem.module.scss
@@ -0,0 +1,28 @@
+.problem {
+  padding: 20px;
+  
+  .problemTitle {
+    font-weight: bold;
+  }
+}
+
+.actions {
+  margin-top: .5rem;
+  display: flex;
+  justify-content: flex-end;
+  column-gap: 20px;
+}
+
+.imageContainer {
+  display: grid;
+  place-items: center;
+}
+
+.image {
+  width: auto;
+  height: auto;
+  min-height: 3rem;
+  min-width: 3rem;
+  max-height: 50vh;
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/src/components/Problems/Problem.module.scss.d.ts b/src/components/Problems/Problem.module.scss.d.ts
new file mode 100644
index 00000000..d976e305
--- /dev/null
+++ b/src/components/Problems/Problem.module.scss.d.ts
@@ -0,0 +1,13 @@
+export type Styles = {
+  actions: string
+  image: string
+  imageContainer: string
+  problem: string
+  problemTitle: string
+}
+
+export type ClassNames = keyof Styles
+
+declare const styles: Styles
+
+export default styles
diff --git a/src/components/Problems/Problem.tsx b/src/components/Problems/Problem.tsx
new file mode 100644
index 00000000..6041b6e9
--- /dev/null
+++ b/src/components/Problems/Problem.tsx
@@ -0,0 +1,115 @@
+import Image from 'next/image'
+import {Dispatch, FC, SetStateAction, useState} from 'react'
+
+import {Button, Link} from '@/components/Clickable/Clickable'
+import {Problem as ProblemType} from '@/types/api/competition'
+
+import {Latex} from '../Latex/Latex'
+import styles from './Problem.module.scss'
+import {UploadProblemForm} from './UploadProblemForm'
+
+export const Problem: FC<{
+  problem: ProblemType
+  setDisplaySideContent: Dispatch<
+    SetStateAction<{
+      type: string
+      problemId: number
+      problemNumber: number
+      problemSubmitted?: boolean
+    }>
+  >
+  registered: boolean
+  canRegister: boolean
+  canSubmit: boolean
+  invalidateSeriesQuery: () => Promise<void>
+  displayRegisterDialog: () => void
+}> = ({
+  problem,
+  registered,
+  setDisplaySideContent,
+  canRegister,
+  canSubmit,
+  invalidateSeriesQuery,
+  displayRegisterDialog,
+}) => {
+  const handleDiscussionButtonClick = () => {
+    setDisplaySideContent((prevState) => {
+      if (prevState.type === 'discussion' && prevState.problemId === problem.id) {
+        return {type: '', problemId: -1, problemNumber: -1}
+      } else {
+        return {type: 'discussion', problemId: problem.id, problemNumber: problem.order}
+      }
+    })
+  }
+  const handleUploadClick = () => {
+    if (!registered && canRegister) {
+      displayRegisterDialog()
+    } else {
+      setDisplayProblemUploadForm((prevState) => !prevState)
+      setDisplayActions(false)
+    }
+  }
+
+  const [displayProblemUploadForm, setDisplayProblemUploadForm] = useState<boolean>(false)
+  const [displayActions, setDisplayActions] = useState(true)
+
+  return (
+    <div className={styles.problem}>
+      <h3 className={styles.problemTitle}>{problem.order}. ÚLOHA</h3>
+      <Latex>{problem.text}</Latex>
+      {problem.image && (
+        <div className={styles.imageContainer}>
+          <Image
+            src={problem.image}
+            alt={`Obrázok - ${problem.order} úloha`}
+            className={styles.image}
+            width={800} // These values are overwritten by css
+            height={800}
+          />
+        </div>
+      )}
+      {displayProblemUploadForm && (
+        <UploadProblemForm
+          problemId={problem.id}
+          setDisplayProblemUploadForm={setDisplayProblemUploadForm}
+          problemSubmitted={!!problem.submitted}
+          invalidateSeriesQuery={invalidateSeriesQuery}
+          setDisplayActions={setDisplayActions}
+        />
+      )}
+      {displayActions && (
+        <div className={styles.actions}>
+          {problem.solution_pdf && (
+            <Link href={problem.solution_pdf} target="_blank">
+              vzorové riešenie
+            </Link>
+          )}
+          {registered && (
+            <>
+              <Link
+                href={`/api/competition/problem/${problem.id}/my-solution`}
+                target="_blank"
+                disabled={!problem.submitted}
+              >
+                moje riešenie
+              </Link>
+              <Link
+                href={`/api/competition/problem/${problem.id}/corrected-solution`}
+                target="_blank"
+                disabled={!problem.submitted?.corrected_solution}
+              >
+                opravené riešenie{!!problem.submitted?.corrected_solution && ` (${problem.submitted.score || '?'})`}
+              </Link>
+            </>
+          )}
+          <Button onClick={handleDiscussionButtonClick}>diskusia ({problem.num_comments}) </Button>
+          {(registered || canRegister) && (
+            <Button onClick={handleUploadClick} disabled={!canSubmit}>
+              odovzdať
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Problems/Problems.module.scss b/src/components/Problems/Problems.module.scss
index e519f668..8a42084c 100644
--- a/src/components/Problems/Problems.module.scss
+++ b/src/components/Problems/Problems.module.scss
@@ -9,21 +9,6 @@
   margin-left: auto;
 }
 
-.problem {
-  padding: 20px;
-
-  .problemTitle {
-    font-weight: bold;
-  }
-}
-
-.actions {
-  margin-top: .5rem;
-  display: flex;
-  justify-content: flex-end;
-  column-gap: 20px;
-}
-
 .debug {
   margin-left: .5rem;
   margin-bottom: .5rem;
@@ -42,34 +27,4 @@
   bottom: 2rem;
   right: 20px;
   width: calc(25vw - 40px);
-}
-
-.registerButton {
-  background-color: black;
-  color: white;
-  height: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  text-transform: uppercase;
-  font-size: .8rem;
-  font-style: italic;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
-.imageContainer {
-  display: grid;
-  place-items: center;
-}
-
-.image {
-  width: auto;
-  height: auto;
-  min-height: 3rem;
-  min-width: 3rem;
-  max-height: 50vh;
-  margin-top: 1rem;
 }
\ No newline at end of file
diff --git a/src/components/Problems/Problems.module.scss.d.ts b/src/components/Problems/Problems.module.scss.d.ts
index 1fbd19cf..8d3ae811 100644
--- a/src/components/Problems/Problems.module.scss.d.ts
+++ b/src/components/Problems/Problems.module.scss.d.ts
@@ -1,13 +1,7 @@
 export type Styles = {
-  actions: string
   adminSection: string
   container: string
   debug: string
-  image: string
-  imageContainer: string
-  problem: string
-  problemTitle: string
-  registerButton: string
   sideContainer: string
 }
 
diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index c3409167..158e0954 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -1,128 +1,20 @@
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
-import Image from 'next/image'
 import {useRouter} from 'next/router'
-import {Dispatch, FC, SetStateAction, useState} from 'react'
+import {FC, useState} from 'react'
 
 import {Button, Link} from '@/components/Clickable/Clickable'
-import {Problem, SeriesWithProblems} from '@/types/api/competition'
+import {SeriesWithProblems} from '@/types/api/competition'
 import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {useDataFromURL} from '@/utils/useDataFromURL'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
 import {Dialog} from '../Dialog/Dialog'
-import {Latex} from '../Latex/Latex'
 import {Loading} from '../Loading/Loading'
 import {Discussion} from './Discussion'
+import {Problem} from './Problem'
 import styles from './Problems.module.scss'
-import {UploadProblemForm} from './UploadProblemForm'
-
-const Problem: FC<{
-  problem: Problem
-  setDisplaySideContent: Dispatch<
-    SetStateAction<{
-      type: string
-      problemId: number
-      problemNumber: number
-      problemSubmitted?: boolean
-    }>
-  >
-  registered: boolean
-  canRegister: boolean
-  canSubmit: boolean
-  invalidateSeriesQuery: () => Promise<void>
-  displayRegisterDialog: () => void
-}> = ({
-  problem,
-  registered,
-  setDisplaySideContent,
-  canRegister,
-  canSubmit,
-  invalidateSeriesQuery,
-  displayRegisterDialog,
-}) => {
-  const handleDiscussionButtonClick = () => {
-    setDisplaySideContent((prevState) => {
-      if (prevState.type === 'discussion' && prevState.problemId === problem.id) {
-        return {type: '', problemId: -1, problemNumber: -1}
-      } else {
-        return {type: 'discussion', problemId: problem.id, problemNumber: problem.order}
-      }
-    })
-  }
-  const handleUploadClick = () => {
-    if (!registered && canRegister) {
-      displayRegisterDialog()
-    } else {
-      setDisplayProblemUploadForm((prevState) => !prevState)
-      setDisplayActions(false)
-    }
-  }
-
-  const [displayProblemUploadForm, setDisplayProblemUploadForm] = useState<boolean>(false)
-  const [displayActions, setDisplayActions] = useState(true)
-
-  return (
-    <div className={styles.problem}>
-      <h3 className={styles.problemTitle}>{problem.order}. ÚLOHA</h3>
-      <Latex>{problem.text}</Latex>
-      {problem.image && (
-        <div className={styles.imageContainer}>
-          <Image
-            src={problem.image}
-            alt={`Obrázok - ${problem.order} úloha`}
-            className={styles.image}
-            width={800} // These values are overwritten by css
-            height={800}
-          />
-        </div>
-      )}
-      {displayProblemUploadForm && (
-        <UploadProblemForm
-          problemId={problem.id}
-          setDisplayProblemUploadForm={setDisplayProblemUploadForm}
-          problemSubmitted={!!problem.submitted}
-          invalidateSeriesQuery={invalidateSeriesQuery}
-          setDisplayActions={setDisplayActions}
-        />
-      )}
-      {displayActions && (
-        <div className={styles.actions}>
-          {problem.solution_pdf && (
-            <Link href={problem.solution_pdf} target="_blank">
-              vzorové riešenie
-            </Link>
-          )}
-          {registered && (
-            <>
-              <Link
-                href={`/api/competition/problem/${problem.id}/my-solution`}
-                target="_blank"
-                disabled={!problem.submitted}
-              >
-                moje riešenie
-              </Link>
-              <Link
-                href={`/api/competition/problem/${problem.id}/corrected-solution`}
-                target="_blank"
-                disabled={!problem.submitted?.corrected_solution}
-              >
-                opravené riešenie{!!problem.submitted?.corrected_solution && ` (${problem.submitted.score || '?'})`}
-              </Link>
-            </>
-          )}
-          <Button onClick={handleDiscussionButtonClick}>diskusia ({problem.num_comments}) </Button>
-          {(registered || canRegister) && (
-            <Button onClick={handleUploadClick} disabled={!canSubmit}>
-              odovzdať
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
 
 const overrideCycle = (prev: boolean | undefined) => {
   if (prev === undefined) return true

From 1655da96f13849ef7558b4642af06286c3de844b Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sat, 11 Nov 2023 20:26:31 +0100
Subject: [PATCH 8/8] SemesterAdministration styles

---
 .../SemesterAdministration.module.scss                   | 6 ++++++
 .../SemesterAdministration.module.scss.d.ts              | 9 +++++++++
 .../SemesterAdministration/SemesterAdministration.tsx    | 2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SemesterAdministration/SemesterAdministration.module.scss
 create mode 100644 src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts

diff --git a/src/components/SemesterAdministration/SemesterAdministration.module.scss b/src/components/SemesterAdministration/SemesterAdministration.module.scss
new file mode 100644
index 00000000..66f7f244
--- /dev/null
+++ b/src/components/SemesterAdministration/SemesterAdministration.module.scss
@@ -0,0 +1,6 @@
+.actions {
+  margin-top: .5rem;
+  display: flex;
+  justify-content: flex-end;
+  column-gap: 20px;
+}
\ No newline at end of file
diff --git a/src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts b/src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts
new file mode 100644
index 00000000..2d2673e6
--- /dev/null
+++ b/src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts
@@ -0,0 +1,9 @@
+export type Styles = {
+  actions: string
+}
+
+export type ClassNames = keyof Styles
+
+declare const styles: Styles
+
+export default styles
diff --git a/src/components/SemesterAdministration/SemesterAdministration.tsx b/src/components/SemesterAdministration/SemesterAdministration.tsx
index bcb967e5..312ac5d3 100644
--- a/src/components/SemesterAdministration/SemesterAdministration.tsx
+++ b/src/components/SemesterAdministration/SemesterAdministration.tsx
@@ -9,9 +9,9 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 
 import {Button, Link} from '../Clickable/Clickable'
 import {Loading} from '../Loading/Loading'
-import styles from '../Problems/Problems.module.scss'
 import {PublicationUploader} from '../PublicationUploader/PublicationUploader'
 import {Result} from '../Results/ResultsRow'
+import styles from './SemesterAdministration.module.scss'
 
 interface PostalCard {
   code: number