F*ck it, it will be dialog

ZdruzenieSTROM · Nov 22, 2024 · 7fba91d · 7fba91d
1 parent c662dff
commit 7fba91d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 52 deletions.
diff --git a/src/components/Problems/Discussion.module.scss b/src/components/Problems/Discussion.module.scss
diff --git a/src/components/Problems/Discussion.module.scss.d.ts b/src/components/Problems/Discussion.module.scss.d.ts
diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx
@@ -103,28 +103,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
   }
 
   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 @@ 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 &&
@@ -154,7 +133,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">
@@ -228,6 +209,6 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
           )}
         </Stack>
       </Stack>
-    </Stack>
+    </>
   )
 }
diff --git a/src/components/Problems/Problems.tsx b/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 {Dialog} from '../Dialog/Dialog'
 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 @@ 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
@@ -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,14 +199,18 @@ export const Problems: FC = () => {
           />
         ))}
       </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>
     </>
   )
 }