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

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

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>