Remove i want to participate

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;
+}

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

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>
+  )
+}

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;
 }

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
 }