Merge branch 's24-remove-redundancy-transcript' of https://github.com/gordon-cs/gordon-360-ui into s24-remove-redundancy-transcript

Author: Yushin Jo

package-lock.json

@@ -36,6 +36,7 @@
     "react-imask": "^7.4.0",
     "react-router": "^6.22.1",
     "react-router-dom": "^6.22.1",
+    "react-router-hash-link": "^2.4.3",
     "react-to-print": "^2.15.1",
     "react-visibility-sensor": "^5.1.1",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"

package.json

@@ -1,52 +1,52 @@
+import { useMsal } from '@azure/msal-react';
 import AppRedirect from 'components/AppRedirect';
 import BirthdayMessage from 'components/BirthdayMessage';
-import { createBrowserHistory } from 'history';
-import { useEffect, useRef, useState } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { useWatchSystemColorScheme } from 'hooks';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { Route, Routes, useNavigate } from 'react-router-dom';
+import { CustomNavigationClient } from 'services/NavigationClient';
+import analytics from 'services/analytics';
 import './app.global.css';
 import styles from './app.module.css';
 import ErrorBoundary from './components/ErrorBoundary';
 import GordonHeader from './components/Header';
 import GordonNav from './components/Nav';
 import routes from './routes';
-import analytics from './services/analytics';
-import { useWatchSystemColorScheme } from 'hooks';
 
 const App = () => {
   useWatchSystemColorScheme();
+  const location = useLocation();
 
-  const [drawerOpen, setDrawerOpen] = useState();
+  useEffect(() => {
+    analytics.onPageView();
+  }, [location]);
 
-  const historyRef = useRef(createBrowserHistory());
+  // Setup custom navigation so that MSAL uses react-router for navigation
+  const { instance } = useMsal();
+  const navigate = useNavigate();
+  const navigaitonClient = new CustomNavigationClient(navigate);
+  instance.setNavigationClient(navigaitonClient);
+
+  const [drawerOpen, setDrawerOpen] = useState();
 
   const onDrawerToggle = () => {
     setDrawerOpen((o) => !o);
   };
 
-  useEffect(() => {
-    // Only use analytics in production
-    if (import.meta.env.NODE_ENV === 'production') {
-      analytics.initialize();
-    }
-
-    historyRef.current.listen(() => analytics.onPageView());
-  }, []);
-
   return (
     <ErrorBoundary>
-      <Router historyRef={historyRef.current}>
-        <GordonHeader onDrawerToggle={onDrawerToggle} />
-        <GordonNav onDrawerToggle={onDrawerToggle} drawerOpen={drawerOpen} />
-        <main className={styles.app_main}>
-          <BirthdayMessage />
-          <AppRedirect />
-          <Routes>
-            {routes.map((route) => (
-              <Route key={route.path} path={route.path} element={route.element} />
-            ))}
-          </Routes>
-        </main>
-      </Router>
+      <GordonHeader onDrawerToggle={onDrawerToggle} />
+      <GordonNav onDrawerToggle={onDrawerToggle} drawerOpen={drawerOpen} />
+      <main className={styles.app_main}>
+        <BirthdayMessage />
+        <AppRedirect />
+        <Routes>
+          {routes.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
+        </Routes>
+      </main>
     </ErrorBoundary>
   );
 };

public/images/by_students_for_students.png

@@ -15,19 +15,19 @@ const smallHeader = (
 const headings = [
   {
     name: 'Event',
-    size: '4',
+    size: 4,
   },
   {
     name: 'Date',
-    size: '2',
+    size: 2,
   },
   {
     name: 'Time',
-    size: '2',
+    size: 2,
   },
   {
     name: 'Location',
-    size: '4',
+    size: 4,
   },
 ];
 

src/app.jsx

@@ -145,8 +145,8 @@ const GordonHeader = ({ onDrawerToggle }) => {
           <Link to="/" component={ForwardNavLink} value={tabIndex}>
             <picture>
               {/* pick a different image as the screen gets smaller.*/}
-              <source srcset={headerLogo72dpi} media="(min-width: 900px)" />
-              <source srcset={headerLogo64dpi} media="(min-width: 600px)" />
+              <source srcSet={headerLogo72dpi} media="(min-width: 900px)" />
+              <source srcSet={headerLogo64dpi} media="(min-width: 600px)" />
               <source srcSet={headerLogo56dpiNoText} media="(max-width: 375px)" />
               <img src={headerLogo56dpi} alt="Gordon 360 Logo"></img>
             </picture>
@@ -165,6 +165,7 @@ const GordonHeader = ({ onDrawerToggle }) => {
             label="Involvements"
             component={ForwardNavLink}
             to="/involvements"
+            tabIndex={0}
           />
           <Tab
             className={styles.tab}

src/components/EventList/index.jsx

@@ -1,4 +1,4 @@
-import { FormControl, IconButton } from '@mui/material';
+import { FormControl, IconButton, Link } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import GordonDialogBox from 'components/GordonDialogBox';
 import GordonSnackbar from 'components/Snackbar';
@@ -46,6 +46,7 @@ const UpdatePlannedGraduationYear = (props) => {
           <SearchField
             name="Planned Graduation Year"
             value={plannedGraduationYear}
+            defaultLabel="None"
             updateValue={(event) => setPlannedGraduationYear(event.target.value)}
             options={Array.from({ length: 6 }, (_, i) => ({
               value: (currentYear + i).toString(),
@@ -59,7 +60,10 @@ const UpdatePlannedGraduationYear = (props) => {
         <p className={styles.note}>
           NOTE: <br /> This does not replace the Application to Graduate, which must be filled out
           8-12 months before you plan to graduate. The application can be found in{' '}
-          <a href="https://my.gordon.edu"> my.gordon.edu</a>, in the Academics tab, on the left.
+          <Link href="https://my.gordon.edu" underline="hover" className={'gc360_text_link'}>
+            my.gordon.edu
+          </Link>
+          , in the Academics tab, on the left.
         </p>
       </GordonDialogBox>
       <GordonSnackbar

src/components/Header/index.jsx

@@ -343,13 +343,15 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
           <Typography>
             {' '}
             No strengths to show.{' '}
-            <a
+            <Link
               href="https://gordon.gallup.com/signin/default.aspx"
+              underline="hover"
               target="_blank"
+              className={'gc360_text_link'}
               rel="noopener noreferrer"
             >
               Take the test
-            </a>{' '}
+            </Link>{' '}
           </Typography>
         )
       }

src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.jsx

@@ -72,14 +72,19 @@ button.rbc-input::-moz-focus-inner {
   background-color: var(--mui-palette-primary-main);
   color: var(--mui-palette-primary-contrastText);
   font-size: 90%;
-  width: 60%;
+  width: 75%;
   flex: 1 1 0;
-  word-wrap: break-word;
+  word-wrap: normal;
   line-height: 1;
   height: 100%;
   min-height: 1em;
 }
-
+@media (max-width: 1152px) {
+  .rbc-row-segment .rbc-event-content,
+  .rbc-day-slot .rbc-event-content {
+    font-size: 70%;
+  }
+}
 .rbc-day-slot .rbc-event,
 .rbc-day-slot .rbc-background-event {
   border: 1px solid var(--mui-palette-primary-main);

src/components/Profile/components/PersonalInfoList/index.jsx

@@ -2,7 +2,6 @@ import { Calendar, luxonLocalizer } from 'react-big-calendar';
 import { CourseEvent, Schedule, scheduleCalendarResources } from 'services/schedule';
 import './ScheduleCalendar.css';
 import { DateTime } from 'luxon';
-import { useWindowSize } from 'hooks';
 
 const localizer = luxonLocalizer(DateTime, { firstDayOfWeek: 1 });
 
@@ -12,26 +11,26 @@ type Props = {
 };
 
 const GordonScheduleCalendar = ({ schedule, onSelectEvent }: Props) => {
-  const [width] = useWindowSize();
   const dayStart = new Date();
   dayStart.setHours(8, 0, 0, 0);
 
   const dayEnd = new Date();
   dayEnd.setHours(22, 0, 0, 0);
 
   const courseFormat = schedule.courses.map((course) => {
+    let tempTitle = `${course.title.replaceAll(' ', '')}`;
     let title;
-    if (course.location.includes('ASY')) {
-      title = `${course.title}${width >= 1500 ? ' | ' : ' '} ${course.location}`;
-    } else {
-      title = `${course.title}${width >= 2212 ? ' | ' : ' '} ${course.location}`;
-    }
-
+    course.location.includes('ASY')
+      ? (title = tempTitle + ' | ASYNC')
+      : course.location.includes('null')
+        ? (title = tempTitle)
+        : (title = tempTitle + `\n${course.location}`);
     return { ...course, title };
   });
 
   return (
     <Calendar
+      style={{ whiteSpace: 'pre-wrap' }}
       events={courseFormat}
       localizer={localizer}
       min={dayStart}
@@ -44,6 +43,15 @@ const GordonScheduleCalendar = ({ schedule, onSelectEvent }: Props) => {
         dayHeaderFormat: () => schedule.session.SessionDescription,
       }}
       onSelectEvent={onSelectEvent}
+      onKeyPressEvent={(selectedEvent, keyPressEvent) => {
+        if (
+          'key' in keyPressEvent &&
+          typeof keyPressEvent.key === 'string' &&
+          keyPressEvent.key === 'Enter'
+        ) {
+          onSelectEvent(selectedEvent);
+        }
+      }}
     />
   );
 };