From cbc00d41ae4e26bfa77b6021a80e2f5cfef353c5 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Fri, 22 Nov 2024 16:14:26 -0800
Subject: [PATCH] feat: prevent text wrap in department/school card

---
 .../RightPane/CoursePane/CourseRenderPane.tsx |   2 +-
 .../RightPane/CoursePane/SchoolDeptCard.tsx   | 131 ++++++------------
 2 files changed, 43 insertions(+), 90 deletions(-)

diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
index b787ceb5f..fbff1309a 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
@@ -8,7 +8,7 @@ import RightPaneStore from '../RightPaneStore';
 import GeDataFetchProvider from '../SectionTable/GEDataFetchProvider';
 import SectionTableLazyWrapper from '../SectionTable/SectionTableLazyWrapper';
 
-import SchoolDeptCard from './SchoolDeptCard';
+import { SchoolDeptCard } from './SchoolDeptCard';
 import darkModeLoadingGif from './SearchForm/Gifs/dark-loading.gif';
 import loadingGif from './SearchForm/Gifs/loading.gif';
 import darkNoNothing from './static/dark-no_results.png';
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SchoolDeptCard.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SchoolDeptCard.tsx
index e55827c40..316ae2319 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/SchoolDeptCard.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/SchoolDeptCard.tsx
@@ -1,98 +1,51 @@
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Box,
-    Grid,
-    Paper,
-    Theme,
-    Typography,
-    withStyles,
-} from '@material-ui/core';
-import { ClassNameMap, Styles } from '@material-ui/core/styles/withStyles';
-import { ExpandMore } from '@material-ui/icons';
-import { PureComponent } from 'react';
-
-const styles: Styles<Theme, object> = (theme) => ({
-    school: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2),
-        [theme.breakpoints.up('sm')]: {
-            paddingLeft: theme.spacing(3),
-            paddingRight: theme.spacing(3),
-        },
-        paddingTop: theme.spacing(),
-        paddingBottom: theme.spacing(),
-    },
-    dept: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2),
-        [theme.breakpoints.up('sm')]: {
-            paddingLeft: theme.spacing(3),
-            paddingRight: theme.spacing(3),
-        },
-        paddingTop: theme.spacing(),
-        paddingBottom: theme.spacing(),
-    },
-    text: {
-        flexBasis: '50%',
-        flexGrow: 1,
-        display: 'inline',
-        cursor: 'pointer',
-    },
-    icon: {
-        cursor: 'pointer',
-    },
-    collapse: {
-        flexBasis: '100%',
-    },
-    comments: {
-        fontFamily: 'Roboto',
-        fontSize: 12,
-    },
-});
+import { ExpandMore } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Grid, Paper, Typography } from '@mui/material';
 
 interface SchoolDeptCardProps {
-    classes: ClassNameMap;
     comment: string;
     name: string;
     type: string;
 }
 
-class SchoolDeptCard extends PureComponent<SchoolDeptCardProps> {
-    state = { commentsOpen: false };
+export function SchoolDeptCard({ name, type, comment }: SchoolDeptCardProps) {
+    const html = { __html: comment };
 
-    render() {
-        const html = { __html: this.props.comment };
-        return (
-            <Grid item xs={12}>
-                <Paper elevation={1} square style={{ overflow: 'hidden' }}>
-                    <Accordion>
-                        <AccordionSummary expandIcon={<ExpandMore />}>
-                            <Typography variant={this.props.type === 'school' ? 'h6' : 'subtitle1'}>
-                                {this.props.name}
-                            </Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <Typography variant="body2" component={'span'}>
-                                {/*The default component for the body2 typography seems to be <p> which is giving warnings with DOMnesting */}
-                                <Typography>{this.props.comment === '' ? 'No comments found' : 'Comments:'}</Typography>
-                                <Box
-                                    dangerouslySetInnerHTML={html}
-                                    className={this.props.classes.comments}
-                                    component="p"
-                                />
-                            </Typography>
-                        </AccordionDetails>
-                    </Accordion>
-                </Paper>
-            </Grid>
-        );
-    }
-}
+    return (
+        <Grid item xs={12}>
+            <Paper elevation={1} square style={{ overflow: 'hidden' }}>
+                <Accordion disableGutters>
+                    <AccordionSummary
+                        expandIcon={<ExpandMore />}
+                        sx={{
+                            paddingX: 1,
+                            paddingY: 0,
 
-export default withStyles(styles)(SchoolDeptCard);
+                            /**
+                             * AccordionSummary contains a child "content" which is the actual parent of the Typography below
+                             * Styling to prevent wrap must be applied to the aforementioned parent
+                             */
+                            '& .MuiAccordionSummary-content': {
+                                overflow: 'hidden',
+                                whiteSpace: 'nowrap',
+                            },
+                        }}
+                    >
+                        <Typography
+                            variant={type === 'school' ? 'h6' : 'subtitle1'}
+                            sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }}
+                        >
+                            {name}
+                        </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails sx={{ paddingX: 1, paddingY: 0 }}>
+                        <Box sx={{ fontSize: 12 }}>
+                            {/*The default component for the body2 typography seems to be <p> which is giving warnings with DOMnesting */}
+                            <Typography>{comment === '' ? 'No comments found' : 'Comments:'}</Typography>
+                            <Box dangerouslySetInnerHTML={html} component="p" />
+                        </Box>
+                    </AccordionDetails>
+                </Accordion>
+            </Paper>
+        </Grid>
+    );
+}