website: planner: Autoscroll to current year card (#3640)

Co-authored-by: Kok Rui Wong <[email protected]>
Co-authored-by: Zhao Wei Liew <[email protected]>

website/src/views/planner/PlannerYear.tsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import classnames from 'classnames';
 import { flatMap, size, sortBy, toPairs, values } from 'lodash';
 
@@ -28,11 +28,25 @@ type State = {
 };
 
 export default class PlannerYear extends PureComponent<Props, State> {
+  readonly currentYearCardRef = createRef<HTMLDivElement>();
+
   override state = {
     // Always display Special Terms I and II if either one has modules
     showSpecialSem: this.hasSpecialTermModules(),
   };
 
+  override componentDidMount() {
+    if (this.props.year !== config.academicYear) {
+      return;
+    }
+    const currentYearCard = this.currentYearCardRef.current;
+    if (currentYearCard) {
+      currentYearCard.scrollIntoView({
+        inline: 'start',
+      });
+    }
+  }
+
   hasSpecialTermModules() {
     const { semesters } = this.props;
     return size(semesters[3]) > 0 || size(semesters[4]) > 0;
@@ -73,6 +87,7 @@ export default class PlannerYear extends PureComponent<Props, State> {
 
     return (
       <section
+        ref={year === config.academicYear ? this.currentYearCardRef : undefined}
         key={year}
         className={classnames(styles.year, {
           [styles.currentYear]: year === config.academicYear,