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] 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