refactor: migrate teams pages to ts

src/data/ApplyData/allApps.ts

@@ -3,11 +3,9 @@ import Engagement from './engagement';
 import Hardware from './hardware';
 import Operations from './operations';
 import Software from './software';
-import type { Position } from './types';
+import type { ApplicationGroup, Position } from './types';
 
-type Team = 'clients' | 'hardware' | 'software' | 'operations' | 'management' | 'engagement';
-
-type ApplicationsByTeams = Record<Team, Position[]>;
+type ApplicationsByTeams = Record<ApplicationGroup, Position[]>;
 
 const applicationsByTeams: ApplicationsByTeams = {
   clients: Clients,

src/data/ApplyData/types.ts

@@ -1,4 +1,8 @@
-type Category = 'Clients' | 'Engagement' | 'Hardware' | 'Operations' | 'Software';
+import type { Team } from '../teams';
+
+export type ApplicationGroup = Team | 'clients';
+
+type Category = Capitalize<ApplicationGroup>;
 
 export type Position = {
   positionTitle: string;

src/data/teamPageDetails.ts

@@ -13,9 +13,18 @@ import OperationsLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH
 import SoftwareLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH3.png';
 import HardwareLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH4.png';
 import EngagementLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH5.png';
+import type { Team } from './teams';
 
 // yellow - "#FFBF3C"
-const TeamPageDetails = [
+type TeamPageDetail = {
+  name: Capitalize<Team>;
+  color: string;
+  activeIcon: string;
+  inactiveIcon: string;
+  largePic: string;
+};
+
+const TeamPageDetails: TeamPageDetail[] = [
   {
     name: 'Management',
     color: '#187DFF',

src/data/teams.ts

@@ -0,0 +1,6 @@
+// The order of these is how they appear on the management expanded teams page
+export const TEAMS = ['management', 'hardware', 'software', 'operations', 'engagement'] as const;
+
+export type Team = (typeof TEAMS)[number];
+
+export const isTeam = (value: string | undefined): value is Team => TEAMS.some(team => team === value);

src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/ExpandedTeamsJSON.ts

@@ -9,9 +9,11 @@ import Management2 from '../../../../../assets/images/TeamsPageImages/management
 import Operations1 from '../../../../../assets/images/TeamsPageImages/operations1.jpg';
 import Operations2 from '../../../../../assets/images/TeamsPageImages/operations2.jpg';
 import TeamsStock from '../../../../../assets/images/TeamsPageImages/TeamsStockPhoto.svg';
+import type { Team } from '../../../../../data/teams';
+import type { ExpandedTeam } from './types';
 
 // What Youll learn could probably be added here?
-export const ExpandedTeamsJSON = {
+export const ExpandedTeamsJSON: Record<Team, ExpandedTeam> = {
   management: {
     abbv: 'MNGMNT',
     color: '#187DFF',

src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/RolesJSON.ts

@@ -1,7 +1,7 @@
-// The Order of these is how it will appear on the management expanded teams page
-export const Teams = ['management', 'hardware', 'software', 'operations', 'engagement'] as const;
+import type { Team } from '../../../../../data/teams';
+import type { TeamRoles } from './types';
 
-export const RolesJSON = {
+export const RolesJSON: Record<Team, TeamRoles> = {
   management: {
     Director: {
       header: 'Executive Director',

src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/WhatYouLearnJSON.ts

@@ -1,6 +1,8 @@
 import TeamsStock from '../../../../../assets/images/TeamsPageImages/TeamsStockPhoto.svg';
+import type { Team } from '../../../../../data/teams';
+import type { WhatYouLearnTeam } from './types';
 
-export const WhatYouLearnJSON = {
+export const WhatYouLearnJSON: Partial<Record<Team, WhatYouLearnTeam>> = {
   software: {
     about: [
       {

src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/types.ts

@@ -0,0 +1,46 @@
+export type TeamSection = {
+  header: string;
+  body: string;
+  image: string;
+  invert?: boolean;
+};
+
+export type FeaturedItem = {
+  description: string;
+  image: string;
+  invert: boolean;
+  button: string;
+};
+
+export type ExpandedTeam = {
+  abbv: string;
+  color: string;
+  about: TeamSection[];
+  featured?: {
+    header: string;
+    items: FeaturedItem[];
+  };
+};
+
+export type MemberRole = {
+  subheader: string;
+  desc: string;
+};
+
+export type RoleGroup = {
+  header: string;
+  lead?: MemberRole;
+  members: MemberRole[];
+};
+
+export type TeamRoles = {
+  Director: {
+    header: string;
+    desc: string;
+  };
+  Roles?: RoleGroup[];
+};
+
+export type WhatYouLearnTeam = {
+  about: TeamSection[];
+};