Skip to content

Mentorship resource images #293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Deejarh wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Mentorship resource images #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bbc307
Revert "Revert "Fix Mentorship Resource Link" (#279)"
Deejarh Jun 1, 2026
ad59a2e
fix: use local mentorship resource images
Deejarh Jun 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion playwright-tests/tests/home.page.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@ test.describe('Validate Home Page', () => {
await basePage.clickElement(homePage.joinAsMentorBtn);

await basePage.verifyURL('/mentorship/mentor-registration');
await basePage.verifyPageContainsText('WCC: Registration Form for Mentors');
await basePage.verifyPageContainsText(
'WCC: Registration Form for Mentors',
);
});

test('HP-004: Volunteer section', async ({ homePage, basePage }) => {
Expand Down
2 changes: 2 additions & 0 deletions src/components/ResourcesCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@ export const ResourcesCard: React.FC<ResourcesCardProps> = ({
variant="contained"
color="primary"
href={link}
target="_blank"
rel="noopener noreferrer"
sx={{
textTransform: 'none',
borderRadius: 2,
Expand Down
11 changes: 8 additions & 3 deletions src/components/__tests__/ResourcesCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,20 @@ describe('ResourcesCard', () => {
title: 'Test Card',
description: 'This is a test description',
buttonText: 'Click Me',
link: '#',
link: 'https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445',
};

it('renders the title, description, button, and image', () => {
it('renders the title, description, button, link, and image', () => {
render(<ResourcesCard {...props} />);

expect(screen.getByText('Test Card')).toBeInTheDocument();
expect(screen.getByText('This is a test description')).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'Click Me' })).toBeInTheDocument();
const link = screen.getByRole('link', { name: 'Click Me' });
expect(link).toBeInTheDocument();
expect(link).toHaveAttribute(
'href',
'https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445',
);

const img = screen.getByRole('img');
expect(img).toHaveAttribute('src', '/test.jpg');
Expand Down
2 changes: 2 additions & 0 deletions src/lib/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import mentors from './responses/mentors.json';
import mentorShipPage from './responses/mentorship.json';
import mentorShipCodeOfConduct from './responses/mentorshipCodeOfConduct.json';
import mentorshipFaqPageData from './responses/mentorshipFaqPage.json';
import mentorshipResourcesPage from './responses/mentorshipResources.json';
import studyGroupsPage from './responses/mentorshipStudyGroupsPage.json';

const apiBaseUrl = process.env.API_BASE_URL;
Expand Down Expand Up @@ -67,6 +68,7 @@ const pageData = {
'mentorship/code-of-conduct': mentorShipCodeOfConduct,
team: aboutUsTeam,
'mentorship/faq': mentorshipFaqPageData,
'mentorship/resources': mentorshipResourcesPage,
'mentorship/study-groups': studyGroupsPage,
};

Expand Down
78 changes: 52 additions & 26 deletions src/lib/responses/mentorshipResources.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,54 @@
{
"heroTitle": "Mentorship Resources",
"heroDescription": "Whether you’re a mentee looking to navigate your journey, a mentor aiming to provide the best guidance, or a seasoned mentor seeking quick tips, we have the tools you need. Explore our guides for insightful mentorship advice and strategies.",
"resources": [
{
"image": "/mentee_guideMedia.jpg",
"title": "Mentee’s Guide",
"description": "",
"buttonText": "View Guide",
"link": "#"
},
{
"image": "/mentor_pocketbookMedia.jpg",
"title": "Mentor’s Pocketbook",
"description": "",
"buttonText": "View Pocketbook",
"link": "#"
},
{
"image": "/mentor_guideeMedia.jpg",
"title": "Mentor’s Guide",
"description": "",
"buttonText": "View Guide",
"link": "#"
}
],
"footer": "footerData.json content"
"id": "page:MENTORSHIP_RESOURCES",
"heroSection": {
"title": "Mentorship Resources"
},
"section": {
"description": "Whether you’re a mentee looking to navigate your journey, a mentor aiming to provide the best guidance, or a seasoned mentor seeking quick tips, we have the tools you need. Explore our guides for insightful mentorship advice and strategies."
},
"resourcesSection": {
"title": "Available Resources",
"description": "Download and explore our curated mentorship materials",
"items": [
{
"title": "Mentees Guide",
"description": "A practical guide for mentees to get the most out of mentorship.",
"link": {
"label": "Download PDF",
"uri": "https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445"
},
"image": {
"path": "/mentee_guideMedia.jpg",
"alt": "woman working on a laptop",
"type": "desktop"
}
},
{
"title": "Mentor's Pocketbook",
"description": "Quick mentor reference notes and useful mentorship tips.",
"link": {
"label": "Download PDF",
"uri": "https://drive.google.com/file/d/1rgoOTqqG4Gu6e4tw45efFspDnoYRgYd9"
},
"image": {
"path": "/mentor_pocketbookMedia.jpg",
"alt": "Image decorative",
"type": "desktop"
}
},
{
"title": "Mentor's Guide",
"description": "Guidance and best practices for mentors to support their mentees effectively.",
"link": {
"label": "Download PDF",
"uri": "https://drive.google.com/file/d/1wTkCSG95BVg-0XX4r7FnFiV24_SXlbM_"
},
"image": {
"path": "/mentor_guideeMedia.jpg",
"alt": "two women sitting by a desk and talking together",
"type": "desktop"
}
}
]
}
}
58 changes: 39 additions & 19 deletions src/pages/mentorship/resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,33 @@ import { Title, ResourcesCard, Footer, BreadCrumbsDynamic } from '@components';
import { useIsMobile } from '@utils/theme-utils';
import { FooterResponse, MentorshipResourcesResponse } from '@utils/types';
import { fetchData } from 'lib/api';
import footerData from 'lib/responses/footer.json';
import pageData from 'lib/responses/mentorshipResources.json';

type CombinedResponse = {
data: MentorshipResourcesResponse;
footer: FooterResponse;
};

const MentorshipResourcesPage: React.FC = () => {
type MentorshipResourcesPageProps = {
data?: MentorshipResourcesResponse;
footer: FooterResponse;
};

const resourceImages = [

@dricazenck dricazenck Jun 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The images are going to come from the backend, it should not be hardcoded in the frontend, your previous pr was following the correct approach.

@Deejarh Deejarh Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I noticed the google drive link still fails to render the image(it's not reliable).
I think loading the image from the frontend is a temporary fix. what do you think @dricazenck ?

'/mentee_guideMedia.jpg',
'/mentor_pocketbookMedia.jpg',
'/mentor_guideeMedia.jpg',
];

const getResourceImage = (index: number) =>
resourceImages[index] ?? resourceImages[0];

const MentorshipResourcesPage: React.FC<MentorshipResourcesPageProps> = ({
data,
footer,
}) => {
const isMobile = useIsMobile();
const { heroTitle, heroDescription, resources } = pageData;
const page = data as MentorshipResourcesResponse;
const { heroSection, section, resourcesSection } = page;

return (
<>
Expand All @@ -27,7 +43,7 @@ const MentorshipResourcesPage: React.FC = () => {
sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}
>
<Box sx={{ flexGrow: 1 }}>
<Title title={heroTitle} />
<Title title={heroSection.title} />

<Box
sx={{
Expand All @@ -44,7 +60,7 @@ const MentorshipResourcesPage: React.FC = () => {
lineHeight: 1.5,
}}
>
{heroDescription}
{section.description}
</Typography>
</Box>

Expand All @@ -57,22 +73,26 @@ const MentorshipResourcesPage: React.FC = () => {
}}
>
<Grid container spacing={4}>
{resources.map((res, index) => (
<Grid item xs={12} sm={6} md={6} lg={4} key={index}>
<ResourcesCard
image={res.image}
title={res.title}
description={res.description}
buttonText={res.buttonText}
link={res.link}
buttonIcon={<OpenInNewIcon />}
/>
</Grid>
))}
{resourcesSection.items.map((res, index) => {
const resourceImage = getResourceImage(index);

return (
<Grid item xs={12} sm={6} md={6} lg={4} key={index}>
<ResourcesCard
image={resourceImage}
title={res.title}
description={res.description ?? ''}
buttonText={res.link.label}
link={res.link.uri}
buttonIcon={<OpenInNewIcon />}
/>
</Grid>
);
})}
</Grid>
</Box>
</Box>
<Footer {...footerData} />
<Footer {...footer} />
</Box>
</>
);
Expand Down
3 changes: 2 additions & 1 deletion src/utils/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,8 +409,9 @@ export type LongTermTimeLineResponse = {

export type ResourceItem = {
title: string;
description?: string;
link: Link;
image: Image;
image: string | Image;
};

export type ResourcesSection = {
Expand Down
Loading