refactor: move code around

icssc · Dec 22, 2024 · 5653bf8 · 5653bf8
1 parent 9c4c17a
commit 5653bf8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 29 deletions.
diff --git a/.../RightPane/SectionTable/CourseInfoBar.tsx → ...SectionTable/CourseInfo/CourseInfoBar.tsx b/.../RightPane/SectionTable/CourseInfoBar.tsx → ...SectionTable/CourseInfo/CourseInfoBar.tsx
@@ -6,12 +6,11 @@ import { Skeleton } from '@material-ui/lab';
 import type { PrerequisiteTree } from '@packages/antalmanac-types';
 import { useState } from 'react';
 
-import { MOBILE_BREAKPOINT } from '../../../globals';
-
-import PrereqTree from './PrereqTree';
+import { MOBILE_BREAKPOINT } from '../../../../globals';
 
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
 import trpc from '$lib/api/trpc';
+import PrereqTree from '$components/RightPane/SectionTable/PrereqTree';
 
 const styles = () => ({
     rightSpace: {
@@ -67,7 +66,7 @@ export interface CourseInfo {
     ge_list: string;
 }
 
-const CourseInfoBar = (props: CourseInfoBarProps) => {
+export const CourseInfoBar = withStyles(styles)((props: CourseInfoBarProps) => {
     const { courseTitle, courseNumber, deptCode, prerequisiteLink, classes, analyticsCategory } = props;
 
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
@@ -208,6 +207,4 @@ const CourseInfoBar = (props: CourseInfoBarProps) => {
             </Popover>
         </>
     );
-};
-
-export default withStyles(styles)(CourseInfoBar);
+});
diff --git a/...ghtPane/SectionTable/CourseInfoButton.tsx → ...tionTable/CourseInfo/CourseInfoButton.tsx b/...ghtPane/SectionTable/CourseInfoButton.tsx → ...tionTable/CourseInfo/CourseInfoButton.tsx
@@ -1,21 +1,11 @@
 import { Button, Paper, Popper } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import { useMediaQuery, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 import { logAnalytics } from '$lib/analytics';
 import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
-const styles = {
-    button: {
-        backgroundColor: '#385EB1',
-        color: '#fff',
-    },
-};
-
 interface CourseInfoButtonProps {
-    classes: ClassNameMap;
     text: string;
     icon: React.ReactElement;
     redirectLink?: string;
@@ -24,15 +14,14 @@ interface CourseInfoButtonProps {
     analyticsCategory: string;
 }
 
-function CourseInfoButton({
-    classes,
+export const CourseInfoButton = ({
     text,
     icon,
     redirectLink,
     popupContent,
     analyticsAction,
     analyticsCategory,
-}: CourseInfoButtonProps) {
+}: CourseInfoButtonProps) => {
     const theme = useTheme();
     const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -74,9 +63,9 @@ function CourseInfoButton({
     return (
         <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ display: 'flex' }}>
             <Button
-                className={classes.button}
                 variant="contained"
                 size="small"
+                color="primary"
                 onClick={(event: React.MouseEvent<HTMLElement>) => {
                     if (redirectLink) {
                         window.open(redirectLink);
@@ -91,6 +80,10 @@ function CourseInfoButton({
                         setIsClicked((prev) => !prev);
                     }
                 }}
+                // style={{
+                //     backgroundColor: '#385EB1',
+                //     color: '#fff',
+                // }}
             >
                 <span style={{ display: 'flex', gap: 4 }}>
                     {icon}
@@ -115,6 +108,4 @@ function CourseInfoButton({
             )}
         </div>
     );
-}
-
-export default withStyles(styles)(CourseInfoButton);
+};
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx
@@ -10,20 +10,20 @@ import {
     Typography,
     useMediaQuery,
 } from '@material-ui/core';
-import { Assessment, Help, RateReview, ShowChart as ShowChartIcon } from '@material-ui/icons';
+import { Assessment, Help, RateReview, Search, ShowChart as ShowChartIcon } from '@material-ui/icons';
 import { useMemo } from 'react';
 
 import { MOBILE_BREAKPOINT } from '../../../globals';
 
-import CourseInfoBar from './CourseInfoBar';
-import CourseInfoButton from './CourseInfoButton';
 import { EnrollmentHistoryPopup } from './EnrollmentHistoryPopup';
 import GradesPopup from './GradesPopup';
 import { SectionTableProps } from './SectionTable.types';
 
 import { SectionTableBody } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBody';
 import analyticsEnum from '$lib/analytics';
 import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
+import { CourseInfoButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoButton';
+import { CourseInfoBar } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar';
 
 const TOTAL_NUM_COLUMNS = SECTION_TABLE_COLUMNS.length;
 
@@ -135,8 +135,7 @@ function SectionTable(props: SectionTableProps) {
                     analyticsCategory={analyticsCategory}
                 />
 
-                {/* Temporarily remove "Past Enrollment" until data on Anteater API */}
-                {/* <AlmanacGraph courseDetails={courseDetails} />  */}
+                <CourseInfoButton analyticsCategory="" analyticsAction="" text="" icon={<Search />} />
 
                 <CourseInfoButton
                     analyticsCategory={analyticsCategory}