Fix mobile location tab

apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx

@@ -3,10 +3,13 @@ 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 { 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 { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions';
 import CustomEventDialog from '$components/Calendar/Toolbar/CustomEventDialog/';
 import ColorPicker from '$components/ColorPicker';
@@ -170,10 +173,6 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
     const { isMilitaryTime } = useTimeFormatStore();
     const isDark = useThemeStore((store) => store.isDark);
 
-    const focusMap = useCallback(() => {
-        setActiveTab(2);
-    }, [setActiveTab]);
-
     const { classes, selectedEvent } = props;
 
     if (!selectedEvent.isCustomEvent) {
@@ -262,14 +261,12 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
                             <td className={`${classes.multiline} ${classes.rightCells}`}>
                                 {locations.map((location) => (
                                     <div key={`${sectionCode} @ ${location.building} ${location.room}`}>
-                                        <Link
-                                            className={classes.clickableLocation}
-                                            to={`/map?location=${locationIds[location.building] ?? 0}`}
-                                            onClick={focusMap}
-                                            color={isDark ? '#1cbeff' : 'blue'}
-                                        >
-                                            {location.building} {location.room}
-                                        </Link>
+                                        <MapLink
+                                            buildingId={locationIds[location.building] ?? '0'}
+                                            room={`${location.building} ${location.room}`}
+                                            setActiveTab={setActiveTab} 
+                                            isDark={isDark}
+                                        />
                                     </div>
                                 ))}
                             </td>
@@ -302,13 +299,13 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
                 {building && (
                     <div className={classes.table}>
                         Location:&nbsp;
-                        <Link
-                            className={classes.clickableLocation}
-                            to={`/map?location=${building ?? 0}`}
-                            onClick={focusMap}
-                        >
-                            {buildingCatalogue[+building]?.name ?? ''}
-                        </Link>
+                        <MapLink
+                        buildingId={+building} 
+                        room={buildingCatalogue[+building]?.name ?? ''} 
+                        isDark={isDark}
+                        setActiveTab={setActiveTab}
+                    />
+
                     </div>
                 )}
                 <div className={classes.buttonBar}>

apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx

@@ -1,7 +1,8 @@
 import { Box } from '@mui/material';
 import { WebsocSectionMeeting } from '@packages/antalmanac-types';
-import { Fragment, useCallback } from 'react';
-import { Link } from 'react-router-dom';
+import { Fragment } from 'react';
+
+import MapLink from '../../../../buttons/MapLink';
 
 import { TableBodyCellContainer } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/TableBodyCellContainer';
 import locationIds from '$lib/location_ids';
@@ -17,10 +18,6 @@ export const LocationsCell = ({ meetings }: LocationsCellProps) => {
     const isDark = useThemeStore((store) => store.isDark);
     const { setActiveTab } = useTabStore();
 
-    const focusMap = useCallback(() => {
-        setActiveTab(2);
-    }, [setActiveTab]);
-
     return (
         <TableBodyCellContainer>
             {meetings.map((meeting) => {
@@ -30,16 +27,12 @@ export const LocationsCell = ({ meetings }: LocationsCellProps) => {
                         const buildingId = locationIds[buildingName];
                         return (
                             <Fragment key={meeting.timeIsTBA + bldg}>
-                                <Link
-                                    style={{
-                                        textDecoration: 'none',
-                                    }}
-                                    to={`/map?location=${buildingId}`}
-                                    onClick={focusMap}
-                                    color={isDark ? 'dodgerblue' : 'blue'}
-                                >
-                                    {bldg}
-                                </Link>
+                                <MapLink
+                                    buildingId={buildingId}
+                                    room={bldg}
+                                    setActiveTab={setActiveTab} 
+                                    isDark={isDark}
+                                />
                                 <br />
                             </Fragment>
                         );

apps/antalmanac/src/components/buttons/MapLink.tsx

@@ -0,0 +1,35 @@
+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;
+    room: string;
+    isDark: boolean;
+    setActiveTab: (tab: number) => void;
+}
+
+const MapLink: React.FC<MapLinkProps> = ({ buildingId, room, isDark, setActiveTab }) => {
+
+    const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
+
+    const focusMap = useCallback(() => {
+        setActiveTab(isMobileScreen ? 3 : 2);
+    }, [isMobileScreen, setActiveTab]);
+
+    return (
+        <Link
+            to={`/map?location=${buildingId}`}
+            onClick={focusMap}
+            style={{
+                textDecoration: 'none',
+                color: isDark ? 'dodgerblue' : 'blue',
+            }}
+        >
+            {room}
+        </Link>
+    );
+};
+
+export default MapLink;