From 96af6e706ebfab959f1f0beb3531b905ed76be84 Mon Sep 17 00:00:00 2001
From: Jacob Kwan <77665182+jacobkwan@users.noreply.github.com>
Date: Thu, 9 Nov 2023 22:35:05 +0800
Subject: [PATCH 1/2] feat: autoscroll course planner to current year card, on
 component mount

---
 website/src/views/planner/PlannerYear.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/website/src/views/planner/PlannerYear.tsx b/website/src/views/planner/PlannerYear.tsx
index 1a1fe57aae..0522a3792c 100644
--- a/website/src/views/planner/PlannerYear.tsx
+++ b/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,12 +24,14 @@ type Props = Readonly<{
 
 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>(),
   };
 
   hasSpecialTermModules() {
@@ -58,6 +60,21 @@ export default class PlannerYear extends PureComponent<Props, State> {
     );
   }
 
+  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',
+    });
+  }
+
   override render() {
     const { year, semesters } = this.props;
     const { showSpecialSem } = this.state;
@@ -72,6 +89,7 @@ export default class PlannerYear extends PureComponent<Props, State> {
 
     return (
       <section
+        ref={year === config.academicYear ? this.state.currentYearCardRef : undefined}
         key={year}
         className={classnames(styles.year, {
           [styles.currentYear]: year === config.academicYear,

From edea02b47825bf307bd8269490399055268cfc84 Mon Sep 17 00:00:00 2001
From: Jacob Kwan <77665182+jacobkwan@users.noreply.github.com>
Date: Thu, 9 Nov 2023 23:03:43 +0800
Subject: [PATCH 2/2] fix linting

---
 website/src/views/planner/PlannerYear.tsx | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/website/src/views/planner/PlannerYear.tsx b/website/src/views/planner/PlannerYear.tsx
index 0522a3792c..9a505a9b08 100644
--- a/website/src/views/planner/PlannerYear.tsx
+++ b/website/src/views/planner/PlannerYear.tsx
@@ -34,6 +34,21 @@ export default class PlannerYear extends PureComponent<Props, State> {
     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;
@@ -60,21 +75,6 @@ export default class PlannerYear extends PureComponent<Props, State> {
     );
   }
 
-  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',
-    });
-  }
-
   override render() {
     const { year, semesters } = this.props;
     const { showSpecialSem } = this.state;