fix: restore gsoc dropdown on program pages

Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>

Author: rishiraj38

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

@@ -23,11 +23,13 @@ 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 initialIndex = programs.findIndex((program) => program.fields.slug === pageContext.slug);
+  const [activeOption] = useState(initialIndex !== -1 ? initialIndex : 0);
+
   const options = programs.map((program) => {
     let optionItem = new Object();
     optionItem.label = program.frontmatter.title;