From bec2d330cadeba917d6e6572ef701664a3fa205a Mon Sep 17 00:00:00 2001 From: Vincent Ho Date: Sun, 12 Jan 2025 13:47:57 -0800 Subject: [PATCH 1/3] Fix mobile location tab --- .../src/components/Calendar/CourseCalendarEvent.tsx | 7 +++++-- .../SectionTableBodyCells/LocationsCell.tsx | 6 +++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx index 642a2d283..0b466d56f 100644 --- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx +++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx @@ -2,11 +2,14 @@ import { Chip, IconButton, Paper, Tooltip, Button } from '@material-ui/core'; import { Theme, withStyles } from '@material-ui/core/styles'; import { ClassNameMap, Styles } from '@material-ui/core/styles/withStyles'; import { Delete, Search } from '@material-ui/icons'; +import { useMediaQuery } from '@mui/material'; import { WebsocSectionFinalExam } from '@packages/antalmanac-types'; import { useEffect, useRef, useCallback } from 'react'; import { Event } from 'react-big-calendar'; import { Link } from 'react-router-dom'; +import { MOBILE_BREAKPOINT } from '../../globals'; + import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions'; import CustomEventDialog from '$components/Calendar/Toolbar/CustomEventDialog/'; import ColorPicker from '$components/ColorPicker'; @@ -169,9 +172,9 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => { const { isMilitaryTime } = useTimeFormatStore(); const isDark = useThemeStore((store) => store.isDark); - + const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); const focusMap = useCallback(() => { - setActiveTab(2); + setActiveTab(isMobileScreen ? 3 : 2); }, [setActiveTab]); const { classes, selectedEvent } = props; diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx index bafacd1b9..4794545c1 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx @@ -1,8 +1,11 @@ import { Box } from '@mui/material'; +import { useMediaQuery } from '@mui/material'; import { WebsocSectionMeeting } from '@packages/antalmanac-types'; import { Fragment, useCallback } from 'react'; import { Link } from 'react-router-dom'; +import { MOBILE_BREAKPOINT } from '../../../../../globals'; + import { TableBodyCellContainer } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/TableBodyCellContainer'; import locationIds from '$lib/location_ids'; import { useThemeStore } from '$stores/SettingsStore'; @@ -16,9 +19,10 @@ interface LocationsCellProps { export const LocationsCell = ({ meetings }: LocationsCellProps) => { const isDark = useThemeStore((store) => store.isDark); const { setActiveTab } = useTabStore(); + const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); const focusMap = useCallback(() => { - setActiveTab(2); + setActiveTab(isMobileScreen ? 3 : 2); }, [setActiveTab]); return ( From 665d68340b6230054b9627d2264f3a0c8026c107 Mon Sep 17 00:00:00 2001 From: Vincent Ho Date: Mon, 13 Jan 2025 16:28:34 -0800 Subject: [PATCH 2/3] Added MapLink component --- .../Calendar/CourseCalendarEvent.tsx | 15 +++++------ .../SectionTableBodyCells/LocationsCell.tsx | 18 +++++-------- .../src/components/buttons/MapLink.tsx | 26 +++++++++++++++++++ 3 files changed, 40 insertions(+), 19 deletions(-) create mode 100644 apps/antalmanac/src/components/buttons/MapLink.tsx diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx index 0b466d56f..9f999370e 100644 --- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx +++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx @@ -8,6 +8,7 @@ import { useEffect, useRef, useCallback } from 'react'; import { Event } from 'react-big-calendar'; import { Link } from 'react-router-dom'; +import MapLink from '../../components/buttons/MapLink'; import { MOBILE_BREAKPOINT } from '../../globals'; import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions'; @@ -265,14 +266,12 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => { {locations.map((location) => (
- - {location.building} {location.room} - +
))} diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx index 4794545c1..26b6f8d20 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx @@ -2,9 +2,9 @@ import { Box } from '@mui/material'; import { useMediaQuery } from '@mui/material'; import { WebsocSectionMeeting } from '@packages/antalmanac-types'; import { Fragment, useCallback } from 'react'; -import { Link } from 'react-router-dom'; import { MOBILE_BREAKPOINT } from '../../../../../globals'; +import MapLink from '../../../../buttons/MapLink'; import { TableBodyCellContainer } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/TableBodyCellContainer'; import locationIds from '$lib/location_ids'; @@ -34,16 +34,12 @@ export const LocationsCell = ({ meetings }: LocationsCellProps) => { const buildingId = locationIds[buildingName]; return ( - - {bldg} - +
); diff --git a/apps/antalmanac/src/components/buttons/MapLink.tsx b/apps/antalmanac/src/components/buttons/MapLink.tsx new file mode 100644 index 000000000..5250e44b2 --- /dev/null +++ b/apps/antalmanac/src/components/buttons/MapLink.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +interface MapLinkProps { + buildingId: number; + buildingName: string; + focusMap: () => void; + isDark: boolean; +} + +const MapLink: React.FC = ({ buildingId, buildingName, focusMap, isDark }) => { + return ( + + {buildingName} + + ); +}; + +export default MapLink; From 9679e18ffd7dc68f7fd3506ef11a1132aa9bdc49 Mon Sep 17 00:00:00 2001 From: Vincent Ho Date: Tue, 14 Jan 2025 20:19:01 -0800 Subject: [PATCH 3/3] Moved focusMap logic into MapLink --- .../Calendar/CourseCalendarEvent.tsx | 27 ++++++++----------- .../SectionTableBodyCells/LocationsCell.tsx | 13 +++------ .../src/components/buttons/MapLink.tsx | 19 +++++++++---- 3 files changed, 28 insertions(+), 31 deletions(-) diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx index 9f999370e..c02a438c1 100644 --- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx +++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx @@ -2,14 +2,13 @@ import { Chip, IconButton, Paper, Tooltip, Button } from '@material-ui/core'; import { Theme, withStyles } from '@material-ui/core/styles'; import { ClassNameMap, Styles } from '@material-ui/core/styles/withStyles'; import { Delete, Search } from '@material-ui/icons'; -import { useMediaQuery } from '@mui/material'; import { WebsocSectionFinalExam } from '@packages/antalmanac-types'; -import { useEffect, useRef, useCallback } from 'react'; +import { useEffect, useRef } from 'react'; import { Event } from 'react-big-calendar'; import { Link } from 'react-router-dom'; import MapLink from '../../components/buttons/MapLink'; -import { MOBILE_BREAKPOINT } from '../../globals'; + import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions'; import CustomEventDialog from '$components/Calendar/Toolbar/CustomEventDialog/'; @@ -173,10 +172,6 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => { const { isMilitaryTime } = useTimeFormatStore(); const isDark = useThemeStore((store) => store.isDark); - const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); - const focusMap = useCallback(() => { - setActiveTab(isMobileScreen ? 3 : 2); - }, [setActiveTab]); const { classes, selectedEvent } = props; @@ -268,8 +263,8 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
@@ -304,13 +299,13 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => { {building && (
Location:  - - {buildingCatalogue[+building]?.name ?? ''} - + +
)}
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx index 26b6f8d20..0ff0629ab 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx @@ -1,9 +1,7 @@ import { Box } from '@mui/material'; -import { useMediaQuery } from '@mui/material'; import { WebsocSectionMeeting } from '@packages/antalmanac-types'; -import { Fragment, useCallback } from 'react'; +import { Fragment } from 'react'; -import { MOBILE_BREAKPOINT } from '../../../../../globals'; import MapLink from '../../../../buttons/MapLink'; import { TableBodyCellContainer } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/TableBodyCellContainer'; @@ -19,11 +17,6 @@ interface LocationsCellProps { export const LocationsCell = ({ meetings }: LocationsCellProps) => { const isDark = useThemeStore((store) => store.isDark); const { setActiveTab } = useTabStore(); - const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); - - const focusMap = useCallback(() => { - setActiveTab(isMobileScreen ? 3 : 2); - }, [setActiveTab]); return ( @@ -36,8 +29,8 @@ export const LocationsCell = ({ meetings }: LocationsCellProps) => {
diff --git a/apps/antalmanac/src/components/buttons/MapLink.tsx b/apps/antalmanac/src/components/buttons/MapLink.tsx index 5250e44b2..03e347da9 100644 --- a/apps/antalmanac/src/components/buttons/MapLink.tsx +++ b/apps/antalmanac/src/components/buttons/MapLink.tsx @@ -1,14 +1,23 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { Link } from 'react-router-dom'; +import { useMediaQuery } from '@mui/material'; +import { MOBILE_BREAKPOINT } from '../../globals'; interface MapLinkProps { buildingId: number; - buildingName: string; - focusMap: () => void; + room: string; isDark: boolean; + setActiveTab: (tab: number) => void; } -const MapLink: React.FC = ({ buildingId, buildingName, focusMap, isDark }) => { +const MapLink: React.FC = ({ buildingId, room, isDark, setActiveTab }) => { + + const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); + + const focusMap = useCallback(() => { + setActiveTab(isMobileScreen ? 3 : 2); + }, [isMobileScreen, setActiveTab]); + return ( = ({ buildingId, buildingName, focusMap, i color: isDark ? 'dodgerblue' : 'blue', }} > - {buildingName} + {room} ); };