From d3f68b13dc5ddae38b381fc5716c814ca9e51f42 Mon Sep 17 00:00:00 2001 From: joana Date: Sat, 28 Mar 2026 16:47:36 +0000 Subject: [PATCH 1/2] feat: added feedback section on home page --- src/components/FeedbackSection.tsx | 104 ++++++++++++++++++++++++++++ src/components/index.tsx | 1 + src/lib/api.ts | 19 ++++++ src/pages/index.tsx | 30 +++++---- src/pages/mentorship/index.tsx | 105 ++--------------------------- 5 files changed, 145 insertions(+), 114 deletions(-) create mode 100644 src/components/FeedbackSection.tsx diff --git a/src/components/FeedbackSection.tsx b/src/components/FeedbackSection.tsx new file mode 100644 index 00000000..10062625 --- /dev/null +++ b/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 = ({ + title, + feedbacks, +}) => { + const initialDisplay = 3; + const [feedbacksDisplayed, setFeedbacksDisplayed] = + useState(initialDisplay); + const showMoreFeedbacks = () => { + setFeedbacksDisplayed((prevCount) => + Math.min(prevCount + 3, feedbacks.length), + ); + }; + const showLessFeedbacks = () => { + setFeedbacksDisplayed(3); + }; + + return ( + + + + {title} + + initialDisplay ? '1fr 1fr' : '', + md: '', + }, + }} + > + {feedbacks && feedbacks.length > 0 ? ( + feedbacks + .slice(0, feedbacksDisplayed) + .map((feedback: FeedbackItem) => ( + + )) + ) : ( +

There‵s no feedback yet!

+ )} + + + {feedbacks.length > initialDisplay && ( + + )} + + + ); +}; diff --git a/src/components/index.tsx b/src/components/index.tsx index 8e3aa1de..eef2c1c3 100644 --- a/src/components/index.tsx +++ b/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'; diff --git a/src/lib/api.ts b/src/lib/api.ts index eb6cbd3f..a5740f60 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1,6 +1,8 @@ import axios from 'axios'; import { logger } from 'bs-logger'; +import { MentorshipProgrammeData } from '@utils/types'; + import aboutUsPage from './responses/aboutUs.json'; import aboutUsTeam from './responses/aboutUsTeam.json'; import footerData from './responses/footer.json'; @@ -64,6 +66,7 @@ export const fetchData = async (path: string) => { } }; +// Refactor this using fetchFromPath() export const fetchFooter = async () => { try { logger.debug(`Attempting to fetchFooter`); @@ -79,3 +82,19 @@ export const fetchFooter = async () => { return footerData; } }; +export const fetchMentorship: () => Promise = + 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; + } +}; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2cdb4a22..19b20dc5 100644 --- a/src/pages/index.tsx +++ b/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) => { +