fix: restore gsoc dropdown on program pages#7431
fix: restore gsoc dropdown on program pages#7431rishiraj38 wants to merge 5 commits intolayer5io:masterfrom
Conversation
Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>
|
@Rajesh-Nagarajan-11 Please review and Provide some feedback. |
There was a problem hiding this comment.
Pull request overview
Restores the program-year dropdown on individual program pages and addresses a runtime issue related to the dropdown state updates.
Changes:
- Pass
pageContextinto the multi-program template and derive the initial selected dropdown option from the current page slug. - Simplify the dropdown
onChangehandler to set the selected value directly. - Update Gatsby page creation to use the multi-program template and include
programin page context.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/templates/program-multiple.js |
Initializes the dropdown selection based on the current program page slug. |
src/sections/Careers/Careers-Programs-single/index.js |
Updates dropdown onChange to set state directly. |
gatsby-node.js |
Switches program pages to the multi-program template and passes additional context. |
| const ProgramsPage = ({ data, children, pageContext }) => { | ||
| const programs = data.allMdx.nodes; | ||
| const { navigate } = require("gatsby"); | ||
|
|
||
| const initialIndex = programs.findIndex((program) => program.fields.slug === pageContext.slug); | ||
| const [activeOption] = useState(initialIndex !== -1 ? initialIndex : 0); | ||
|
|
There was a problem hiding this comment.
useState is only destructuring activeOption, so there is no setActiveOption available from this state hook. Since the dropdown component uses setActiveOption (see ProgramsSingle props/onChange), this can still lead to runtime errors or a non-functional dropdown. Update this hook to also capture the setter (e.g., [activeOption, setActiveOption]), and ensure the setter is the one being passed down to the dropdown component.
There was a problem hiding this comment.
@rishiraj38 ^^
I’m trying to implement it but pages are breaking. I’m looking for the reason and a fix.
|
🚀 Preview for commit 1a8b645 at: https://699746eec1bafb400b273c9e--layer5.netlify.app |
Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>
|
🚀 Preview for commit 74b1896 at: https://6997534a7effb87571ad0233--layer5.netlify.app |
|
🚀 Preview for commit 85f7b32 at: https://69976c74bf89d44d7d12c729--layer5.netlify.app |
|
why i can feel the latency when i switch years ? @rishiraj38 |
The latency occurs because selecting a year in the dropdown triggers a navigation event via navigate(). Consequently, every time we choose a new year from the dropdown Gatsby must fetch the data and render it. |
Don't use usestate, check another option like usememo . I think usememo can improve latency |
|
🚀 Preview for commit a228a3a at: https://699808c8511b23370240c481--layer5.netlify.app |
…ng useMemo Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>
|
🚀 Preview for commit 32fe9d0 at: https://69980f2528828b630b708121--layer5.netlify.app |
|
There’s still a bit of latency when first loading the pages. |
|
@rishiraj38 only for first attempt after that it works well |
5 participants
Description
This PR fixes #7430 where the program year dropdown (e.g., to switch between GSoC 2024, 2025, etc.) was missing on individual program pages. It also resolves a runtime error caused by the dropdown component's change handler.
Notes for Reviewers
Unified Templates: Updated gatsby-node.js to use MultiProgramPostTemplate for all program pages (both main and individual years), ensuring consistent dropdown availability.
Context Passing: Passed the program name in the page context to allow fetching sibling program years.
State Initialization: Updated src/templates/program-multiple.js to initialize the active dropdown option based on the current page's URL (pageContext.slug).
Bug Fix: Fixed src/sections/Careers/Careers-Programs-single/index.js to pass the value directly to setActiveOption instead of a function updater, preventing a crash in navigate().
Signed commits