Presun Diskusie do Dialogu

src/components/Problems/Discussion.tsx

@@ -9,7 +9,7 @@
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
 import {Button} from '../Clickable/Button'
 import {CloseButton} from '../CloseButton/CloseButton'
 import {Dialog} from '../Dialog/Dialog'
 import {Loading} from '../Loading/Loading'
 
@@ -20,14 +20,14 @@
   invalidateSeriesQuery: () => Promise<void>
 }
 
 export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, closeDiscussion, invalidateSeriesQuery}) => {
   const [commentText, setCommentText] = useState('')
   const [hiddenResponseText, setHiddenResponseText] = useState('')
   const [hiddenResponseDialogId, sethiddenResponseDialogId] = useState(-1)
   const [deleteDialogId, setDeleteDialogId] = useState<number | undefined>()
 
   const lg = useMediaQuery<Theme>((theme) => theme.breakpoints.up('lg'))
   const iconSize = lg ? 24 : 14
 
   const queryKey = ['competition', 'problem', problemId, 'comments']
   const {data: commentsData, isLoading: commentsIsLoading} = useQuery({
@@ -103,28 +103,7 @@
   }
 
   return (
-    <Stack
-      sx={{
-        border: '8px solid black',
-        backgroundColor: 'white',
-        overflow: 'hidden',
-        maxHeight: '100%',
-      }}
-    >
-      <Stack
-        direction="row"
-        sx={{
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          px: 0.5,
-          pb: 1,
-          color: 'white',
-          backgroundColor: 'black',
-        }}
-      >
-        <Typography variant="h3">Diskusia - úloha {problemNumber}</Typography>
-        <CloseButton onClick={closeDiscussion} size={iconSize} />
-      </Stack>
+    <>
       {/* delete comment dialog */}
       <Dialog
         open={deleteDialogId !== undefined}
@@ -142,7 +121,7 @@
           </>
         }
       />
-      <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 &&
@@ -154,7 +133,9 @@
                   <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">
@@ -228,6 +209,6 @@
           )}
         </Stack>
       </Stack>
-    </Stack>
+    </>
   )
 }

src/components/Problems/Problems.tsx

@@ -1,4 +1,5 @@
 import {Stack, Typography} from '@mui/material'
+import Grid from '@mui/material/Unstable_Grid2'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -18,8 +19,8 @@
 import {Loading} from '../Loading/Loading'
 import {LoginForm} from '../PageLayout/LoginForm/LoginForm'
 import {Discussion} from './Discussion'
+// import styles from './Discussion.module.scss'
 import {Problem} from './Problem'
-import styles from './Problems.module.scss'
 
 export const Problems: FC = () => {
   const {id, seminar, loading} = useDataFromURL()
@@ -37,7 +38,7 @@
   const profile = data?.data
 
   // used to display discussions
-  const [displaySideContent, setDisplaySideContent] = useState<{
+  const [displayDiscussion, setDisplayDiscussion] = useState<{
     type: string
     problemId: number
     problemNumber: number
@@ -187,7 +188,7 @@
           <Problem
             key={problem.id}
             problem={problem}
-            setDisplaySideContent={setDisplaySideContent}
+            setDisplaySideContent={setDisplayDiscussion}
             registered={isRegistered}
             canRegister={canRegister}
             canSubmit={problem.submitted ? canResubmit : canSubmit}
@@ -198,14 +199,18 @@
           />
         ))}
       </Stack>
-      {displaySideContent.type === 'discussion' && (
+      <Dialog
+        open={displayDiscussion.type === 'discussion'}
+        close={() => setDisplayDiscussion({type: '', problemId: -1, problemNumber: -1})}
+        title={`Diskusia - úloha ${displayDiscussion.problemNumber}`}
+      >
         <Discussion
-          problemId={displaySideContent.problemId}
-          problemNumber={displaySideContent.problemNumber}
-          closeDiscussion={() => setDisplaySideContent({type: '', problemId: -1, problemNumber: -1})}
+          problemId={displayDiscussion.problemId}
+          problemNumber={displayDiscussion.problemNumber}
+          closeDiscussion={() => setDisplayDiscussion({type: '', problemId: -1, problemNumber: -1})}
           invalidateSeriesQuery={invalidateSeriesQuery}
         />
-      )}
+      </Dialog>
     </>
   )
 }