Wire mentorship overview page to API

src/pages/mentorship/index.tsx

@@ -11,29 +11,26 @@ import {
   Title,
 } from '@components';
 import { useIsMobile } from '@utils/theme-utils';
-import { MentorshipProgrammeData, FeedbackItem } from '@utils/types';
+import { FooterResponse, MentorshipProgrammeData, FeedbackItem } from '@utils/types';
 import { fetchData } from 'lib/api';
-import footerData from 'lib/responses/footer.json';
-import pageData from 'lib/responses/mentorship.json';
 import theme from 'theme';
 
 interface MentorshipPageProps {
   mentorship: MentorshipProgrammeData;
+  footer: FooterResponse;
   error: string | null;
 }
 
 interface FeedbackSectionProps {
   title: string;
   feedbacks: FeedbackItem[];
 }
-const MentorshipPage = ({ mentorship }: MentorshipPageProps) => {
-  const heroTitle = pageData.heroSection.title;
-  const heroDescription = pageData.section.description;
+const MentorshipPage = ({ mentorship, footer }: MentorshipPageProps) => {
   const isMobile = useIsMobile();
   return (
     <>
       {isMobile ? null : <BreadCrumbsDynamic />}
-      <Title title={heroTitle} />
+      <Title title={mentorship.heroSection.title} />
 
       <Box
         sx={{
@@ -53,7 +50,7 @@ const MentorshipPage = ({ mentorship }: MentorshipPageProps) => {
             color: theme.palette.common.black,
           }}
         >
-          {heroDescription}
+          {mentorship.section.description}
         </Typography>
       </Box>
 
@@ -68,33 +65,22 @@ const MentorshipPage = ({ mentorship }: MentorshipPageProps) => {
       >
         <MentorBecomeCard
           mentorOrMentee="mentor"
-          topics={[
-            'Want to extend your professional network',
-            'Want to contribute to the community',
-            'You are ready to share expertise',
-            'You want to get a new perspective and learn from your mentees',
-          ]}
-          buttonUrl="https://docs.google.com/forms/d/e/1FAIpQLSdtf7-upMp1m5kJ4MSpexS-UwGJHhACEW-yPoEQoROHi4kVcg/viewform"
-          buttonText={'Join as a mentor'}
+          topics={mentorship.mentorSection.items}
+          buttonUrl={mentorship.mentorSection.link.uri}
+          buttonText={mentorship.mentorSection.link.label}
         ></MentorBecomeCard>
         <MentorBecomeCard
           mentorOrMentee="mentee"
-          topics={[
-            'Want to start a career in software engineering',
-            'Want to find a better job',
-            'Want to be promoted at work',
-            'Want to apply for a leadership position',
-            'Need support in advancing your career',
-          ]}
-          buttonUrl="/mentorship/mentors"
-          buttonText={'Find a mentor'}
+          topics={mentorship.menteeSection.items}
+          buttonUrl={mentorship.menteeSection.link.uri}
+          buttonText={mentorship.menteeSection.link.label}
         ></MentorBecomeCard>
       </Grid>
       <FeedbackSection
         title={mentorship.feedbackSection.title}
         feedbacks={mentorship.feedbackSection.feedbacks}
       />
-      <Footer {...footerData} />
+      <Footer {...footer} />
     </>
   );
 };
@@ -198,6 +184,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
     return {
       props: {
         mentorship: response.data,
+        footer: response.footer,
+        error: null,
       },
     };
   } catch (error) {

src/utils/types.ts

@@ -121,9 +121,9 @@ export type MentorOrMenteeSectionData = {
   description: string;
   link: {
     label: string;
-    url: string;
+    uri: string;
   };
-  topics: string[];
+  items: string[];
 };
 
 export type FeedbackItem = {