Autoscroll Course Planner to current year card

website/src/views/planner/PlannerYear.tsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, Ref, createRef } from 'react';
 import classnames from 'classnames';
 import { flatMap, size, sortBy, toPairs, values } from 'lodash';
 
@@ -24,14 +24,31 @@
 
 type State = {
   readonly showSpecialSem: boolean;
+  readonly currentYearCardRef: Ref<HTMLDivElement>;
 };
 
 export default class PlannerYear extends PureComponent<Props, State> {
   override state = {
     // Always display Special Terms I and II if either one has modules
     showSpecialSem: this.hasSpecialTermModules(),
+    currentYearCardRef: createRef<HTMLDivElement>(),
   };
 
+  override componentDidMount() {
+    if (this.props.year !== config.academicYear) {
+      return;
+    }
+    const currentYearCard = this.state.currentYearCardRef.current;
+    const parentContainer = currentYearCard?.parentElement;
+    if (!currentYearCard || !parentContainer) {
+      return;
+    }
+    parentContainer.scrollTo({
+      left: currentYearCard.offsetLeft - parentContainer.offsetLeft,
+      behavior: 'smooth',
+    });
+  }
+
   hasSpecialTermModules() {
     const { semesters } = this.props;
     return size(semesters[3]) > 0 || size(semesters[4]) > 0;
@@ -72,6 +89,7 @@
 
     return (
       <section
+        ref={year === config.academicYear ? this.state.currentYearCardRef : undefined}
         key={year}
         className={classnames(styles.year, {
           [styles.currentYear]: year === config.academicYear,