Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autoscroll Course Planner to current year card #3640

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

jacobkwan
Copy link

@jacobkwan jacobkwan commented Nov 9, 2023

Context

#3639: Autoscroll Course Planner to current year on first render

Implementation

  1. Add currentYearCardRef state variable
  2. Only pass currentYearCardRef to the PlannerYear card for the current year of enrolment
  3. Define componentDidMount method in PlannerYear
    • Uses currentYearCardRef to get parent container and calculate offsets for child and parent
    • scrolls the desired amount (with smooth effect)

Before

Screen.Recording.2023-11-09.at.10.40.21.PM.mov

After

Screen.Recording.2023-11-09.at.10.49.25.PM.mov

Other Information

Copy link

vercel bot commented Nov 9, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nusmods-export ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 8, 2024 1:06pm
nusmods-website ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 8, 2024 1:06pm

Copy link

vercel bot commented Nov 9, 2023

@jacobkwan is attempting to deploy a commit to a Personal Account owned by @nusmodifications on Vercel.

@nusmodifications first needs to authorize it.

Copy link

codecov bot commented Nov 9, 2023

Codecov Report

Attention: Patch coverage is 0% with 9 lines in your changes are missing coverage. Please review.

Project coverage is 53.63%. Comparing base (d99218b) to head (904ba66).

Files Patch % Lines
website/src/views/planner/PlannerYear.tsx 0.00% 9 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3640      +/-   ##
==========================================
- Coverage   53.73%   53.63%   -0.10%     
==========================================
  Files         272      272              
  Lines        5959     5968       +9     
  Branches     1418     1421       +3     
==========================================
- Hits         3202     3201       -1     
- Misses       2757     2767      +10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@kokrui kokrui self-requested a review March 8, 2024 13:02
Copy link
Member

@ZhangYiJiang ZhangYiJiang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a good idea, although ref is used incorrectly here

@@ -24,14 +24,31 @@ type Props = Readonly<{

type State = {
readonly showSpecialSem: boolean;
readonly currentYearCardRef: Ref<HTMLDivElement>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ref should not be stored in state, see https://react.dev/reference/react/createRef

}
parentContainer.scrollTo({
left: currentYearCard.offsetLeft - parentContainer.offsetLeft,
behavior: 'smooth',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For scrolling on component mount you probably don't want smooth, it's better for the component to appear already scrolled to the correct location.

if (!currentYearCard || !parentContainer) {
return;
}
parentContainer.scrollTo({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could consider using scrollIntoView instead, that would avoid having to do math to figure out exact offset

@kokrui kokrui removed their request for review March 12, 2024 07:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants