From 1cce86f8d98d7df847419a46dfc8e600ce95549a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Sat, 23 Nov 2024 00:05:22 +0100
Subject: [PATCH] Presun Diskusie do Dialogu (#452)

* unrelated: Remove unused component

* Move all styles into one file

* unrelated: Remove css file with one class

* Remove .textarea style

* Remove another css class

* Remove another css class

* Restyle discussion header

* F*ck it, it will be dialog

* fix yarn lint

* some code polishing
---
 src/components/Overlay/Overlay.module.scss    | 12 --------
 .../Overlay/Overlay.module.scss.d.ts          |  9 ------
 src/components/Overlay/Overlay.tsx            | 24 ---------------
 .../Problems/Discussion.module.scss           |  5 ----
 .../Problems/Discussion.module.scss.d.ts      |  9 ------
 src/components/Problems/Discussion.tsx        | 22 ++++++++------
 src/components/Problems/Problems.module.scss  | 17 -----------
 .../Problems/Problems.module.scss.d.ts        | 10 -------
 src/components/Problems/Problems.tsx          | 29 ++++++++++---------
 .../Problems/SideContainer.module.scss        | 19 ------------
 .../Problems/SideContainer.module.scss.d.ts   | 10 -------
 src/components/Problems/SideContainer.tsx     | 21 --------------
 .../SemesterAdministration.module.scss        |  3 --
 .../SemesterAdministration.module.scss.d.ts   |  9 ------
 .../SemesterAdministration.tsx                |  3 +-
 15 files changed, 30 insertions(+), 172 deletions(-)
 delete mode 100644 src/components/Overlay/Overlay.module.scss
 delete mode 100644 src/components/Overlay/Overlay.module.scss.d.ts
 delete mode 100644 src/components/Overlay/Overlay.tsx
 delete mode 100644 src/components/Problems/Discussion.module.scss
 delete mode 100644 src/components/Problems/Discussion.module.scss.d.ts
 delete mode 100644 src/components/Problems/Problems.module.scss
 delete mode 100644 src/components/Problems/Problems.module.scss.d.ts
 delete mode 100644 src/components/Problems/SideContainer.module.scss
 delete mode 100644 src/components/Problems/SideContainer.module.scss.d.ts
 delete mode 100644 src/components/Problems/SideContainer.tsx
 delete mode 100644 src/components/SemesterAdministration/SemesterAdministration.module.scss
 delete mode 100644 src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts

diff --git a/src/components/Overlay/Overlay.module.scss b/src/components/Overlay/Overlay.module.scss
deleted file mode 100644
index e74c36f8..00000000
--- a/src/components/Overlay/Overlay.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
-  display: grid;
-  overflow-x: hidden;
-  grid-template-columns: repeat(1fr, 4);
-}
\ No newline at end of file
diff --git a/src/components/Overlay/Overlay.module.scss.d.ts b/src/components/Overlay/Overlay.module.scss.d.ts
deleted file mode 100644
index 0a28e190..00000000
--- a/src/components/Overlay/Overlay.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Styles = {
-  overlay: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx
deleted file mode 100644
index 430807ca..00000000
--- a/src/components/Overlay/Overlay.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {FC, MouseEvent, ReactNode} from 'react'
-
-import styles from './Overlay.module.scss'
-
-interface OverlayProps {
-  display: boolean
-  closeOverlay: () => void
-  children: ReactNode
-}
-
-export const Overlay: FC<OverlayProps> = ({children, display, closeOverlay}) => {
-  const handleClick = (e: MouseEvent) => {
-    // Po kliknutí na overlay, mimo akýchkoľvek iných elementov, sa overlay zatvorí.
-    if ((e.target as Element).classList.contains(styles.overlay)) {
-      closeOverlay()
-    }
-  }
-
-  return display ? (
-    <div className={styles.overlay} onClick={handleClick}>
-      {children}
-    </div>
-  ) : null
-}
diff --git a/src/components/Problems/Discussion.module.scss b/src/components/Problems/Discussion.module.scss
deleted file mode 100644
index 17f1dbaa..00000000
--- a/src/components/Problems/Discussion.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.textArea {
-  width: 100%;
-  height: 60px;
-  border: 3px solid black;
-}
\ No newline at end of file
diff --git a/src/components/Problems/Discussion.module.scss.d.ts b/src/components/Problems/Discussion.module.scss.d.ts
deleted file mode 100644
index 699c71a4..00000000
--- a/src/components/Problems/Discussion.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Styles = {
-  textArea: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx
index 6cea7843..ec4b91c6 100644
--- a/src/components/Problems/Discussion.tsx
+++ b/src/components/Problems/Discussion.tsx
@@ -11,8 +11,6 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 import {Button} from '../Clickable/Button'
 import {Dialog} from '../Dialog/Dialog'
 import {Loading} from '../Loading/Loading'
-import styles from './Discussion.module.scss'
-import {SideContainer} from './SideContainer'
 
 interface DiscussionProps {
   problemId: number
@@ -21,7 +19,7 @@ interface DiscussionProps {
   invalidateSeriesQuery: () => Promise<void>
 }
 
-export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, closeDiscussion, invalidateSeriesQuery}) => {
+export const Discussion: FC<DiscussionProps> = ({problemId, invalidateSeriesQuery}) => {
   const [commentText, setCommentText] = useState('')
   const [hiddenResponseText, setHiddenResponseText] = useState('')
   const [hiddenResponseDialogId, sethiddenResponseDialogId] = useState(-1)
@@ -101,7 +99,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
   }
 
   return (
-    <SideContainer title={'Diskusia - úloha ' + problemNumber} onClose={closeDiscussion}>
+    <>
       {/* delete comment dialog */}
       <Dialog
         open={deleteDialogId !== undefined}
@@ -119,7 +117,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
           </>
         }
       />
-      <Stack my={1} mx={2} gap={1} sx={{overflow: 'hidden'}}>
+      <Stack gap={1} sx={{overflow: 'hidden'}}>
         <Stack gap={1} sx={{overflowY: 'auto', overscrollBehaviorY: 'contain'}}>
           {commentsIsLoading && <Loading />}
           {comments &&
@@ -131,7 +129,9 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
                   <Typography variant="h3" component="span">
                     {comment.posted_by_name}
                   </Typography>
-                  <Typography variant="body1">{comment.text}</Typography>
+                  <Typography variant="body1" style={{wordBreak: 'break-word'}}>
+                    {comment.text}
+                  </Typography>
                   {comment.hidden_response && (
                     <Stack ml={2}>
                       <Typography variant="h3" component="span">
@@ -149,7 +149,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
                   {hiddenResponseDialogId === comment.id ? (
                     <Stack my={1} gap={1}>
                       <textarea
-                        className={styles.textArea}
+                        style={{width: '100%', height: '60px', border: '3px solid black'}}
                         value={hiddenResponseText}
                         onChange={handleHiddenResponseChange}
                       />
@@ -187,7 +187,11 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
         <Stack gap={1}>
           {isAuthed ? (
             <>
-              <textarea className={styles.textArea} value={commentText} onChange={handleCommentChange} />
+              <textarea
+                style={{width: '100%', height: '60px', border: '3px solid black'}}
+                value={commentText}
+                onChange={handleCommentChange}
+              />
               <Stack alignSelf="end">
                 <Button variant="button2" onClick={() => addComment()}>
                   Odoslať
@@ -201,6 +205,6 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
           )}
         </Stack>
       </Stack>
-    </SideContainer>
+    </>
   )
 }
diff --git a/src/components/Problems/Problems.module.scss b/src/components/Problems/Problems.module.scss
deleted file mode 100644
index ea3fb9dc..00000000
--- a/src/components/Problems/Problems.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.debug {
-  margin-left: .5rem;
-  margin-bottom: .5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.sideContainer {
-  margin: 1rem 0px;
-  height: auto;
-  
-  position: fixed;
-  top: 12rem;
-  bottom: 2rem;
-  right: 20px;
-  width: calc(25vw - 40px);
-}
\ 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
deleted file mode 100644
index f077a190..00000000
--- a/src/components/Problems/Problems.module.scss.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type Styles = {
-  debug: string
-  sideContainer: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index c1af3674..f6a5ad57 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -19,7 +19,6 @@ import {Loading} from '../Loading/Loading'
 import {LoginForm} from '../PageLayout/LoginForm/LoginForm'
 import {Discussion} from './Discussion'
 import {Problem} from './Problem'
-import styles from './Problems.module.scss'
 
 export const Problems: FC = () => {
   const {id, seminar, loading} = useDataFromURL()
@@ -37,13 +36,15 @@ export const Problems: FC = () => {
   const profile = data?.data
 
   // used to display discussions
-  const [displaySideContent, setDisplaySideContent] = useState<{
+  const [displayDiscussion, setDisplayDiscussion] = useState<{
     type: string
     problemId: number
     problemNumber: number
     problemSubmitted?: boolean
   }>({type: '', problemId: -1, problemNumber: -1, problemSubmitted: false})
 
+  const closeDiscussion = () => setDisplayDiscussion({type: '', problemId: -1, problemNumber: -1})
+
   const {data: seriesData, isLoading: seriesIsLoading} = useQuery({
     queryKey: ['competition', 'series', id.seriesId],
     queryFn: () => axios.get<SeriesWithProblems>(`/api/competition/series/${id.seriesId}`),
@@ -187,7 +188,7 @@ export const Problems: FC = () => {
           <Problem
             key={problem.id}
             problem={problem}
-            setDisplaySideContent={setDisplaySideContent}
+            setDisplaySideContent={setDisplayDiscussion}
             registered={isRegistered}
             canRegister={canRegister}
             canSubmit={problem.submitted ? canResubmit : canSubmit}
@@ -198,16 +199,18 @@ export const Problems: FC = () => {
           />
         ))}
       </Stack>
-      <div className={styles.sideContainer}>
-        {displaySideContent.type === 'discussion' && (
-          <Discussion
-            problemId={displaySideContent.problemId}
-            problemNumber={displaySideContent.problemNumber}
-            closeDiscussion={() => setDisplaySideContent({type: '', problemId: -1, problemNumber: -1})}
-            invalidateSeriesQuery={invalidateSeriesQuery}
-          />
-        )}
-      </div>
+      <Dialog
+        open={displayDiscussion.type === 'discussion'}
+        close={closeDiscussion}
+        title={`Diskusia - úloha ${displayDiscussion.problemNumber}`}
+      >
+        <Discussion
+          problemId={displayDiscussion.problemId}
+          problemNumber={displayDiscussion.problemNumber}
+          closeDiscussion={closeDiscussion}
+          invalidateSeriesQuery={invalidateSeriesQuery}
+        />
+      </Dialog>
     </>
   )
 }
diff --git a/src/components/Problems/SideContainer.module.scss b/src/components/Problems/SideContainer.module.scss
deleted file mode 100644
index a5f2c674..00000000
--- a/src/components/Problems/SideContainer.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.container {
-  border: 8px solid black;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  // potrebne, aby sa dodrzali parent hranice komponentu, aj ked tu bude vela contentu.
-  // ratame s tym, ze si overflow ten content (napr. div s komentarmi) ohandli sam scrollbarom.
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.title {
-  background-color: black;
-  color: white;
-  padding-bottom: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/src/components/Problems/SideContainer.module.scss.d.ts b/src/components/Problems/SideContainer.module.scss.d.ts
deleted file mode 100644
index b46176b4..00000000
--- a/src/components/Problems/SideContainer.module.scss.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type Styles = {
-  container: string
-  title: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Problems/SideContainer.tsx b/src/components/Problems/SideContainer.tsx
deleted file mode 100644
index bc2638d8..00000000
--- a/src/components/Problems/SideContainer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Typography} from '@mui/material'
-import {FC, ReactNode} from 'react'
-
-import {CloseButton} from '../CloseButton/CloseButton'
-import styles from './SideContainer.module.scss'
-
-export const SideContainer: FC<{title: string; children: ReactNode; onClose: () => void}> = ({
-  title,
-  children,
-  onClose,
-}) => {
-  return (
-    <aside className={styles.container}>
-      <div className={styles.title}>
-        <CloseButton onClick={onClose} size={24} sx={{position: 'absolute', right: 12}} />
-        <Typography variant="h3">{title}</Typography>
-      </div>
-      {children}
-    </aside>
-  )
-}
diff --git a/src/components/SemesterAdministration/SemesterAdministration.module.scss b/src/components/SemesterAdministration/SemesterAdministration.module.scss
deleted file mode 100644
index f3b6c162..00000000
--- a/src/components/SemesterAdministration/SemesterAdministration.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.textarea {
-  width: 100%;
-}
diff --git a/src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts b/src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts
deleted file mode 100644
index 09e0f310..00000000
--- a/src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Styles = {
-  textarea: 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 d464fb67..73c68af8 100644
--- a/src/components/SemesterAdministration/SemesterAdministration.tsx
+++ b/src/components/SemesterAdministration/SemesterAdministration.tsx
@@ -13,7 +13,6 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 import {Loading} from '../Loading/Loading'
 import {PublicationUploader} from '../PublicationUploader/PublicationUploader'
 import {Result} from '../Results/ResultsRow'
-import styles from './SemesterAdministration.module.scss'
 
 interface PostalCard {
   code: number
@@ -167,7 +166,7 @@ export const SemesterAdministration: FC = () => {
 
       {textareaContent && (
         <Stack mt={5} gap={2} alignItems="end">
-          <textarea rows={10} value={textareaContent} readOnly className={styles.textarea} />
+          <textarea rows={10} value={textareaContent} readOnly style={{width: '100%'}} />
           <Button variant="button2" onClick={() => navigator.clipboard.writeText(textareaContent)}>
             kopírovať
           </Button>