Merge pull request #7431 from rishiraj38/fix-gsoc-dropdown

fix: restore gsoc dropdown on program pages

Author: saurabhraghuvanshii

gatsby-node.js

@@ -328,9 +328,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   programs.forEach((program) => {
     envCreatePage({
       path: program.fields.slug,
-      component: `${ProgramPostTemplate}?__contentFilePath=${program.internal.contentFilePath}`,
+      component: `${MultiProgramPostTemplate}?__contentFilePath=${program.internal.contentFilePath}`,
       context: {
         slug: program.fields.slug,
+        program: program.frontmatter.program,
       },
     });
   });

src/sections/Careers/Careers-Programs-single/index.js

@@ -30,7 +30,7 @@ const ProgramsSingle = ({ data, children, options, setActiveOption, activeOption
                 styles={selectStyles}
                 options={options}
                 value={options[activeOption]}
-                onChange={(e) => setActiveOption(() => e.value)}
+                onChange={(e) => setActiveOption(e.value)}
                 theme={dropdownTheme}
               />}
             </div>

src/templates/program-multiple.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo } from "react";
 import { graphql } from "gatsby";
 
 import SEO from "../components/seo";
@@ -23,17 +23,21 @@ export const query = graphql`query ProgramByName($program: String!) {
   }
 }`;
 
-const ProgramsPage = ({ data, children }) => {
-  const [activeOption] = useState(0);
+const ProgramsPage = ({ data, children, pageContext }) => {
   const programs = data.allMdx.nodes;
   const { navigate } = require("gatsby");
 
-  const options = programs.map((program) => {
+  const activeOption = useMemo(() => {
+    const initialIndex = programs.findIndex((program) => program.fields.slug === pageContext.slug);
+    return initialIndex !== -1 ? initialIndex : 0;
+  }, [programs, pageContext.slug]);
+
+  const options = useMemo(() => programs.map((program) => {
     let optionItem = new Object();
     optionItem.label = program.frontmatter.title;
     optionItem.value = program.fields.slug;
     return optionItem;
-  });
+  }), [programs]);
   return (
 
     <>