fix: links/client side navigation (#433)

Author: js0mmer

site/src/component/PrereqTree/PrereqTree.tsx

@@ -4,6 +4,7 @@ import { Grid, Popup } from 'semantic-ui-react';
 import type { Prerequisite, PrerequisiteTree } from 'peterportal-api-next-types';
 
 import { CourseGQLData, CourseLookup } from '../../types/types';
+import { Link } from 'react-router-dom';
 
 interface NodeProps {
   node: string;
@@ -26,14 +27,14 @@ const Node: FC<NodeProps> = (props) => {
       <Popup
         trigger={
           !props.label.startsWith('AP ') ? (
-            <a
-              href={'/course/' + props.label.split('(')[0].replace(/\s+/g, '')}
+            <Link
+              to={'/course/' + props.label.split('(')[0].replace(/\s+/g, '')}
               role="button"
               style={{ padding: '0.5rem' }}
               className={`node ui button`}
             >
               {props.label}
-            </a>
+            </Link>
           ) : (
             <button style={{ padding: '0.5rem' }} className={`node ui button`}>{`${props.label}`}</button>
           )

site/src/component/Review/SubReview.tsx

@@ -95,12 +95,12 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor, colors, colo
         <h3 className="subreview-identifier">
           {professor && (
             <Link to={{ pathname: `/course/${review.courseID}` }}>
-              {professor.courses[review.courseID].department + ' ' + professor.courses[review.courseID].courseNumber}
+              {professor.courses[review.courseID]?.department + ' ' + professor.courses[review.courseID]?.courseNumber}
             </Link>
           )}
           {course && (
             <Link to={{ pathname: `/professor/${review.professorID}` }}>
-              {Object.values(course.instructors)?.find(({ ucinetid }) => ucinetid === review.professorID)?.name}
+              {course.instructors[review.professorID]?.name}
             </Link>
           )}
           {!course && !professor && (

site/src/component/SearchPopup/SearchPopup.tsx

@@ -8,6 +8,7 @@ import searching from '../../asset/searching.webp';
 import { useAppSelector } from '../../store/hooks';
 import { selectCourse, selectProfessor } from '../../store/slices/popupSlice';
 import { CourseGQLData, ProfessorGQLData, SearchType, ScoreData } from '../../types/types';
+import { Link } from 'react-router-dom';
 
 interface InfoData {
   title: string;
@@ -75,11 +76,11 @@ const SearchPopupContent: FC<SearchPopupProps> = (props) => {
         <div className="search-popup-header">
           <h2 className="search-popup-id">
             {props.name}
-            <a href={`/${props.searchType}/${props.id}`}>
+            <Link to={`/${props.searchType}/${props.id}`}>
               <Button type="button" className="search-popup-more btn btn-outline-primary">
                 More Information
               </Button>
-            </a>
+            </Link>
           </h2>
           <h5 className="search-popup-title">{props.title}</h5>
         </div>
@@ -110,7 +111,9 @@ const SearchPopupContent: FC<SearchPopupProps> = (props) => {
                       <span className="search-popup-carousel-score">{score.score == -1 ? '?' : score.score}</span>
                       <span className="search-popup-carousel-max-score">/ 5.0</span>
                     </div>
-                    <a href={`/${props.searchType == 'course' ? 'professor' : 'course'}/${score.key}`}>{score.name}</a>
+                    <Link to={`/${props.searchType == 'course' ? 'professor' : 'course'}/${score.key}`}>
+                      {score.name}
+                    </Link>
                   </div>
                 ))}
               </Carousel>

site/src/pages/CoursePage/index.tsx

@@ -24,18 +24,17 @@ const CoursePage: FC = () => {
   const [error, setError] = useState('');
 
   useEffect(() => {
-    // make a gql query if directly landed on this page
-    if (id !== undefined && (courseGQLData == null || courseGQLData.id != id)) {
+    if (id !== undefined) {
       searchAPIResult('course', id).then((course) => {
-        console.log('COURSE', course);
         if (course) {
           dispatch(setCourse(course as CourseGQLData));
+          setError('');
         } else {
           setError(`Course ${id} does not exist!`);
         }
       });
     }
-  }, []);
+  }, [dispatch, id]);
 
   // if course does not exists
   if (error) {
@@ -65,15 +64,15 @@ const CoursePage: FC = () => {
                 <h2>🌲 Prerequisite Tree</h2>
               </div>
               <Divider />
-              <PrereqTree {...courseGQLData} />
+              <PrereqTree key={courseGQLData.id} {...courseGQLData} />
             </div>
 
             <div className="course-page-section">
               <div>
                 <h2>🗓️ Schedule of Classes</h2>
               </div>
               <Divider />
-              <Schedule courseID={courseGQLData.department + ' ' + courseGQLData.courseNumber} />
+              <Schedule key={courseGQLData.id} courseID={courseGQLData.department + ' ' + courseGQLData.courseNumber} />
             </div>
 
             <div className="course-page-section">
@@ -89,7 +88,7 @@ const CoursePage: FC = () => {
                 <h2>💬 Reviews</h2>
               </div>
               <Divider />
-              <Review course={courseGQLData} />
+              <Review key={courseGQLData.id} course={courseGQLData} />
             </div>
           </div>
         </div>

site/src/pages/ProfessorPage/index.tsx

@@ -22,17 +22,17 @@ const ProfessorPage: FC = () => {
   const [error, setError] = useState('');
 
   useEffect(() => {
-    // make a gql query if directly landed on this page
-    if (id !== undefined && (professorGQLData == null || professorGQLData.ucinetid != id)) {
+    if (id !== undefined) {
       searchAPIResult('professor', id).then((professor) => {
         if (professor) {
           dispatch(setProfessor(professor as ProfessorGQLData));
+          setError('');
         } else {
           setError(`Professor ${id} does not exist!`);
         }
       });
     }
-  }, []);
+  }, [dispatch, id]);
 
   // if professor does not exists
   if (error) {

site/src/pages/RoadmapPage/Course.tsx

@@ -66,15 +66,13 @@ const Course: FC<CourseProps> = (props) => {
     </Popover>
   );
 
-  const courseRoute = () => {
-    return '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, '');
-  };
+  const courseRoute = '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, '');
 
   return (
     <div className={`course ${requiredCourses ? 'invalid' : ''}`}>
       <div className="course-card-top">
         <div className="course-and-info">
-          <a className="name" href={courseRoute()} target="_blank" rel="noopener noreferrer">
+          <a className="name" href={courseRoute} target="_blank" rel="noopener noreferrer">
             {department + ' ' + courseNumber}
           </a>
           <OverlayTrigger trigger={['hover', 'focus']} placement="auto" overlay={CoursePopover} delay={100}>

site/src/pages/SearchPage/ProfessorHitItem.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import './HitItem.scss';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { setProfessor } from '../../store/slices/popupSlice';
 
@@ -65,7 +65,7 @@ const ProfessorHitItem: FC<ProfessorHitItemProps> = (props: ProfessorHitItemProp
               return (
                 <span key={`professor-hit-item-course-${index}`}>
                   {index ? ', ' : ''}
-                  <a href={'/course/' + item.replace(/\s+/g, '')}>{item}</a>
+                  <Link to={'/course/' + item.replace(/\s+/g, '')}>{item}</Link>
                 </span>
               );
             })}