#2713 started division info comopnent

src/frontend/src/components/Tabs.tsx

@@ -2,7 +2,6 @@ import { AppBar, Tab, Tabs as MUITabs, Box } from '@mui/material';
 import React from 'react';
 
 export interface TabData {
- // value: number;
  label: string;
  component: React.ReactNode;
 }

src/frontend/src/hooks/organizations.hooks.ts

@@ -30,13 +30,6 @@ export const useProvideOrganization = (): OrganizationProvider => {
  };
 };
 
-export const useCurrentOrganization = () => {
- return useQuery<Organization, Error>(['organizations'], async () => {
- const { data } = await getCurrentOrganization();
- return data;
- });
-};
-
 // Hook for child components to get the auth object
 export const useOrganization = () => {
  const context = useContext(OrganizationContext);

src/frontend/src/pages/AdminToolsPage/TeamConfig/TeamTypeTable.tsx

@@ -10,7 +10,7 @@ import { useAllTeamTypes, useSetTeamTypeImage } from '../../../hooks/team-types.
 import { useEffect, useState } from 'react';
 import { useToast } from '../../../hooks/toasts.hooks';
 import NERUploadButton from '../../../components/NERUploadButton';
-import { downloadGoogleImage } from '../../../apis/finance.api';
+import { getImageUrl } from '../../../utils/image.utils';
 
 const TeamTypeTable: React.FC = () => {
  const {
@@ -29,8 +29,7 @@ const TeamTypeTable: React.FC = () => {
  useEffect(() => {
  try {
  teamTypes?.forEach(async (teamType) => {
- const imageBlob = await downloadGoogleImage(teamType.imageFileId ?? '');
- const url = URL.createObjectURL(imageBlob);
+ const url = await getImageUrl(teamType.imageFileId ?? '');
  setImageUrls((prev) => ({ ...prev, [teamType.teamTypeId]: url }));
  });
  } catch (error) {

src/frontend/src/pages/HomePage/PNMHomePage.tsx

@@ -8,36 +8,65 @@ import Tabs from '../../components/Tabs';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import { useHomePageContext } from '../../app/HomePageContext';
+import { useAllTeamTypes } from '../../hooks/team-types.hooks';
+import TeamTypeSection from './components/TeamTypeSection';
 
 const PNMHomePage = () => {
- const { data: organization, isError, error, isLoading } = useCurrentOrganization();
- const [tabValue, setTabValue] = useState(0);
+ const {
+ data: organization,
+ isError: organizationIsError,
+ error: organizationError,
+ isLoading: organizationIsLoading
+ } = useCurrentOrganization();
+ const {
+ data: teamTypes,
+ isLoading: teamTypesIsLoading,
+ isError: teamTypesIsError,
+ error: teamTypesError
+ } = useAllTeamTypes();
+
+ const [recruitmentInfoTabValue, setRecruitmentInfoTabValue] = useState(0);
+ const [teamTypeTabValue, setTeamTypeTabValue] = useState(0);
  const { setOnPNMHomePage, setOnGuestHomePage } = useHomePageContext();
 
  useEffect(() => {
  setOnPNMHomePage(true);
  setOnGuestHomePage(false);
  }, [setOnPNMHomePage, setOnGuestHomePage]);
 
- if (!organization || isLoading) return <LoadingIndicator />;
- if (isError) return <ErrorPage message={error?.message} />;
+ if (!organization || organizationIsLoading || !teamTypes || teamTypesIsLoading) return <LoadingIndicator />;
+ if (organizationIsError) return <ErrorPage message={organizationError?.message} />;
+ if (teamTypesIsError) return <ErrorPage message={teamTypesError?.message} />;
 
- const tabs = [
+ const recruitmentInfoTabs = [
  { label: 'FAQs', component: <FAQsSection /> },
  { label: 'Timeline', component: <TimelineSection /> }
  ];
 
+ const teamTypeTabs = teamTypes.map((teamType) => {
+ return {
+ label: teamType.name,
+ component: <TeamTypeSection teamType={teamType} />
+ };
+ });
+
  return (
  <PageLayout title="Home" hidePageTitle>
  <Box sx={{ mt: 4, ml: 2 }}>
  <Grid container spacing={5}>
  <Grid item xs={8}>
- <Box>
- <Typography variant="h3">About NER</Typography>
- <Typography sx={{ mt: 4, fontSize: '1.2em' }}>{organization.description}</Typography>
- </Box>
+ <Grid container spacing={5} display={'flex'} flexDirection={'column'}>
+ <Grid item xs={6}>
+ <Box>
+ <Typography variant="h3">About NER</Typography>
+ <Typography sx={{ mt: 4, fontSize: '1.2em' }}>{organization.description}</Typography>
+ </Box>
+ </Grid>
+ <Grid item xs={6}>
+ <Tabs tabs={teamTypeTabs} tabValue={teamTypeTabValue} setTabValue={setTeamTypeTabValue} />
+ </Grid>
+ </Grid>
  </Grid>
-
  <Grid item xs={4}>
  <Box
  sx={{
@@ -49,7 +78,11 @@ const PNMHomePage = () => {
  Our Recruitment
  </Typography>
  <Box sx={{ mt: 4, mb: 2 }}>
- <Tabs tabs={tabs} tabValue={tabValue} setTabValue={setTabValue} />
+ <Tabs
+ tabs={recruitmentInfoTabs}
+ tabValue={recruitmentInfoTabValue}
+ setTabValue={setRecruitmentInfoTabValue}
+ />
  </Box>
  </Box>
  </Grid>

src/frontend/src/pages/HomePage/components/TeamTypeSection.tsx

@@ -0,0 +1,36 @@
+import { Box, Grid, Typography } from '@mui/material';
+import { TeamType } from 'shared';
+import { getImageUrl } from '../../../utils/image.utils';
+import { useState, useEffect } from 'react';
+
+interface TeamTypeSectionProps {
+ teamType: TeamType;
+}
+
+const TeamTypeSection = ({ teamType }: TeamTypeSectionProps) => {
+ const [imageUrl, setImageUrl] = useState<string>('');
+
+ useEffect(() => {
+ const fetchImageUrl = async () => {
+ if (teamType.imageFileId) {
+ const url = await getImageUrl(teamType.imageFileId);
+ setImageUrl(url);
+ }
+ };
+
+ fetchImageUrl();
+ }, [teamType.imageFileId]);
+
+ return (
+ <Grid container spacing={5}>
+ <Grid item xs={4}>
+ <Box component="img" src={imageUrl} alt="Image Preview" sx={{ maxWidth: '400px', mt: 1, mb: 1 }} />
+ </Grid>
+ <Grid item xs={8}>
+ <Typography>{teamType.description}</Typography>
+ </Grid>
+ </Grid>
+ );
+};
+
+export default TeamTypeSection;

src/frontend/src/utils/image.utils.ts

@@ -0,0 +1,6 @@
+import { downloadGoogleImage } from '../apis/finance.api';
+
+export const getImageUrl = async (imageFileId: string) => {
+ const imageBlob = await downloadGoogleImage(imageFileId);
+ return URL.createObjectURL(imageBlob);
+};