feat: added feedback section on home page

src/components/FeedbackSection.tsx

@@ -0,0 +1,104 @@
+import { Box, Typography, Button } from '@mui/material';
+import React, { useState } from 'react';
+
+import { FeedbackItem } from '@utils/types';
+
+import { ColoredBox } from './ColoredBox';
+import { FeedbackCard } from './FeedbackCard';
+
+interface FeedbackSectionProps {
+  title: string;
+  feedbacks: FeedbackItem[];
+}
+
+export const FeedbackSection: React.FC<FeedbackSectionProps> = ({
+  title,
+  feedbacks,
+}) => {
+  const initialDisplay = 3;
+  const [feedbacksDisplayed, setFeedbacksDisplayed] =
+    useState<number>(initialDisplay);
+  const showMoreFeedbacks = () => {
+    setFeedbacksDisplayed((prevCount) =>
+      Math.min(prevCount + 3, feedbacks.length),
+    );
+  };
+  const showLessFeedbacks = () => {
+    setFeedbacksDisplayed(3);
+  };
+
+  return (
+    <ColoredBox color={'#FFDEA6'}>
+      <Box
+        data-testid="feedback-area"
+        sx={{ display: 'grid', justifyItems: 'center', gap: '3rem' }}
+      >
+        <Typography
+          variant="h3"
+          sx={{
+            fontSize: { xs: '24px', sm: '24px', md: '45px' },
+            maxWidth: { xs: '361px', sm: '361px', md: '742px' },
+            lineHeight: { xs: '32px', sm: '32px', md: '52px' },
+            fontWeight: 600,
+            paddingTop: '2rem',
+            textAlign: 'center',
+          }}
+        >
+          {title}
+        </Typography>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: { sm: 'repeat(3, 1fr)', md: '' },
+            gap: 2,
+            gridTemplateRows: {
+              sm: feedbacksDisplayed > initialDisplay ? '1fr 1fr' : '',
+              md: '',
+            },
+          }}
+        >
+          {feedbacks && feedbacks.length > 0 ? (
+            feedbacks
+              .slice(0, feedbacksDisplayed)
+              .map((feedback: FeedbackItem) => (
+                <FeedbackCard
+                  key={feedback.name}
+                  name={feedback.name}
+                  feedback={feedback.feedback}
+                  mentee={feedback.memberType === 'Mentee'}
+                  year={
+                    typeof feedback.year === 'string'
+                      ? Number.parseInt(feedback.year, 10)
+                      : feedback.year
+                  }
+                />
+              ))
+          ) : (
+            <p>There‵s no feedback yet!</p>
+          )}
+        </Box>
+
+        {feedbacks.length > initialDisplay && (
+          <Button
+            onClick={
+              feedbacksDisplayed >= feedbacks.length
+                ? showLessFeedbacks
+                : showMoreFeedbacks
+            }
+            variant="outlined"
+            data-testid="feedback-show-more"
+            sx={{
+              borderRadius: '20px',
+              border: '1px solid #71787E',
+              color: '#1A4B66',
+            }}
+          >
+            {feedbacksDisplayed >= feedbacks.length
+              ? '- Show less'
+              : '+ Show more'}
+          </Button>
+        )}
+      </Box>
+    </ColoredBox>
+  );
+};

src/components/index.tsx

@@ -35,3 +35,4 @@ export { ResourcesCard } from './ResourcesCard';
 export { HeroWithImage } from './HeroWithImage';
 export { InfoWithContact } from './InfoWithContact';
 export { BreadCrumbsDynamic } from './BreadCrumbsDynamic';
+export { FeedbackSection } from './FeedbackSection';

src/lib/api.ts

@@ -2,6 +2,8 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { logger } from 'bs-logger';
 import { NextApiResponse } from 'next';
 
+import { MentorshipProgrammeData } from '@utils/types';
+
 import aboutUsPage from './responses/aboutUs.json';
 import aboutUsTeam from './responses/aboutUsTeam.json';
 import footerData from './responses/footer.json';
@@ -85,6 +87,7 @@ export const fetchData = async (path: string) => {
   }
 };
 
+// Refactor this using fetchFromPath()
 export const handleApiError = (error: unknown, res: NextApiResponse) => {
   const err = error as {
     response?: { status: number; data: unknown };
@@ -106,3 +109,19 @@ export const fetchFooter = async () => {
     return footerData;
   }
 };
+export const fetchMentorship: () => Promise<MentorshipProgrammeData> =
+  async () => fetchFromPath('/mentorship/overview', mentorShipPage);
+
+const fetchFromPath = async (path: string, backupData: any) => {
+  try {
+    logger.debug(`Attempting to fetch from ${path}`);
+    const response = await client.get(`${apiBaseUrl}${path}`, {
+      headers: { 'X-API-KEY': API_KEY },
+    });
+
+    return response.data;
+  } catch (error) {
+    logger.error(`Failed to fetch from ${path}. Error: ${error}`);
+    return backupData;
+  }
+};

src/pages/index.tsx

@@ -9,22 +9,23 @@ import {
   VolunteerSection,
   Footer,
   EventContainer,
+  FeedbackSection,
 } from '@components';
-import { FooterResponse, LandingPageResponse } from '@utils/types';
-import { fetchData } from 'lib/api';
-
-type CombinedResponse = {
-  data: LandingPageResponse;
-  footer: FooterResponse;
-};
+import {
+  FooterResponse,
+  LandingPageResponse,
+  MentorshipProgrammeData,
+} from '@utils/types';
+import { fetchData, fetchMentorship } from 'lib/api';
 
 interface HomePageProps {
   data: LandingPageResponse;
   footer: FooterResponse;
+  mentorship: MentorshipProgrammeData;
   error: string | null;
 }
 
-const HomePage = ({ data, footer, error }: HomePageProps) => {
+const HomePage = ({ data, footer, mentorship, error }: HomePageProps) => {
   const router = useRouter();
 
   useEffect(() => {
@@ -46,6 +47,10 @@ const HomePage = ({ data, footer, error }: HomePageProps) => {
       <Hero {...heroSection} />
       <OpportunitiesProgrammes {...programmes} />
       <EventContainer {...events} />
+      <FeedbackSection
+        title={mentorship.feedbackSection.title}
+        feedbacks={mentorship.feedbackSection.feedbacks}
+      />
       <MentorBanner {...fullBannerSection} />
       <VolunteerSection {...volunteerSection} />
       <Footer {...footer} />
@@ -55,12 +60,11 @@ const HomePage = ({ data, footer, error }: HomePageProps) => {
 
 export const getServerSideProps: GetServerSideProps = async () => {
   try {
-    const combinedResponse: CombinedResponse = await fetchData('landingPage');
+    const { data, footer } = await fetchData('landingPage');
+    const mentorship = await fetchMentorship();
+
     return {
-      props: {
-        data: combinedResponse.data,
-        footer: combinedResponse.footer,
-      },
+      props: { data, footer, mentorship },
     };
   } catch (error) {
     return {

src/pages/mentorship/index.tsx

@@ -1,12 +1,11 @@
-import { Typography, Button, Box, Grid, useMediaQuery } from '@mui/material';
+import { Typography, Box, Grid, useMediaQuery } from '@mui/material';
 import { GetServerSideProps } from 'next';
-import React, { useState } from 'react';
+import React from 'react';
 
 import {
   BreadCrumbsDynamic,
   Footer,
-  ColoredBox,
-  FeedbackCard,
+  FeedbackSection,
   MentorBecomeCard,
   Title,
 } from '@components';
@@ -29,7 +28,10 @@
   title: string;
   feedbacks: FeedbackItem[];
 }
+
 const MentorshipPage = ({ mentorship, footer }: MentorshipPageProps) => {
+  const heroTitle = pageData.heroSection.title;
+  const heroDescription = pageData.section.description;
   const isMobile = useIsMobile();
   return (
     <>
@@ -89,98 +91,6 @@
   );
 };
 
-const FeedbackSection: React.FC<FeedbackSectionProps> = ({
-  title,
-  feedbacks,
-}) => {
-  const initialDisplay = 3;
-  const [feedbacksDisplayed, setFeedbacksDisplayed] =
-    useState<number>(initialDisplay);
-  const showMoreFeedbacks = () => {
-    setFeedbacksDisplayed((prevCount) =>
-      Math.min(prevCount + 3, feedbacks.length),
-    );
-  };
-  const showLessFeedbacks = () => {
-    setFeedbacksDisplayed(3);
-  };
-
-  return (
-    <ColoredBox color={'#FFDEA6'}>
-      <Box
-        data-testid="feedback-area"
-        sx={{ display: 'grid', justifyItems: 'center', gap: '3rem' }}
-      >
-        <Typography
-          variant="h3"
-          sx={{
-            fontSize: { xs: '24px', sm: '24px', md: '45px' },
-            maxWidth: { xs: '361px', sm: '361px', md: '742px' },
-            lineHeight: { xs: '32px', sm: '32px', md: '52px' },
-            fontWeight: 600,
-            paddingTop: '2rem',
-            textAlign: 'center',
-          }}
-        >
-          {title}
-        </Typography>
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: { sm: 'repeat(3, 1fr)', md: '' },
-            gap: 2,
-            gridTemplateRows: {
-              sm: feedbacksDisplayed > initialDisplay ? '1fr 1fr' : '',
-              md: '',
-            },
-          }}
-        >
-          {feedbacks && feedbacks.length > 0 ? (
-            feedbacks
-              .slice(0, feedbacksDisplayed)
-              .map((feedback: FeedbackItem) => (
-                <FeedbackCard
-                  key={feedback.name}
-                  name={feedback.name}
-                  feedback={feedback.feedback}
-                  mentee={feedback.memberType === 'Mentee'}
-                  year={
-                    typeof feedback.year === 'string'
-                      ? parseInt(feedback.year, 10)
-                      : feedback.year
-                  }
-                />
-              ))
-          ) : (
-            <p>There‵s no feedback yet!</p>
-          )}
-        </Box>
-
-        {feedbacks.length > initialDisplay && (
-          <Button
-            onClick={
-              feedbacksDisplayed >= feedbacks.length
-                ? showLessFeedbacks
-                : showMoreFeedbacks
-            }
-            variant="outlined"
-            data-testid="feedback-show-more"
-            sx={{
-              borderRadius: '20px',
-              border: '1px solid #71787E',
-              color: '#1A4B66',
-            }}
-          >
-            {feedbacksDisplayed >= feedbacks.length
-              ? '- Show less'
-              : '+ Show more'}
-          </Button>
-        )}
-      </Box>
-    </ColoredBox>
-  );
-};
-
 export const getServerSideProps: GetServerSideProps = async () => {
   try {
     const response = await fetchData('mentorship/overview');