F25/nathanael/onboarding: Complete onboarding task implementation

backend/typescript/middlewares/validators/teamMemberValidators.ts

@@ -0,0 +1,21 @@
+import { Request, Response, NextFunction } from "express";
+import { getApiValidationError, validatePrimitive } from "./util";
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable-next-line import/prefer-default-export */
+export const createTeamMemberDtoValidator = async (
+  req: Request,
+  res: Response,
+  next: NextFunction,
+) => {
+  if (!validatePrimitive(req.body.firstName, "string")) {
+    return res.status(400).send(getApiValidationError("firstName", "string"));
+  }
+  if (!validatePrimitive(req.body.lastName, "string")) {
+    return res.status(400).send(getApiValidationError("lastName", "string"));
+  }
+  if (!validatePrimitive(req.body.teamRole, "string")) {
+    return res.status(400).send(getApiValidationError("teamRole", "string"));
+  }
+  return next();
+};

backend/typescript/migrations/2025.09.24T01.30.28.create-table-team-members.ts

@@ -0,0 +1,33 @@
+import { DataType } from "sequelize-typescript";
+import { Migration } from "../umzug";
+import { teamRoleValues } from "../types";
+
+const TABLE_NAME = "team_members";
+
+export const up: Migration = async ({ context: sequelize }) => {
+  await sequelize.getQueryInterface().createTable(TABLE_NAME, {
+    id: {
+      type: DataType.INTEGER,
+      allowNull: false,
+      primaryKey: true,
+      autoIncrement: true,
+    },
+    first_name: {
+      type: DataType.STRING,
+      allowNull: false,
+    },
+    last_name: {
+      type: DataType.STRING,
+      allowNull: false,
+    },
+    team_role: {
+      type: DataType.ENUM,
+      values: teamRoleValues as unknown as string[],
+      allowNull: false,
+    },
+  });
+};
+
+export const down: Migration = async ({ context: sequelize }) => {
+  await sequelize.getQueryInterface().dropTable(TABLE_NAME);
+};

backend/typescript/models/teamMember.model.ts

@@ -0,0 +1,21 @@
+import {
+  Column,
+  DataType,
+  Model,
+  Table,
+  AllowNull,
+} from "sequelize-typescript";
+import { TeamRole, teamRoleValues } from "../types";
+
+@Table({ timestamps: false, tableName: "team_members" })
+export default class TeamMember extends Model {
+  @Column({ type: DataType.STRING, allowNull: false })
+  first_name!: string;
+
+  @Column({ type: DataType.STRING, allowNull: false })
+  last_name!: string;
+
+  @AllowNull(false)
+  @Column({ type: DataType.ENUM, values: teamRoleValues, allowNull: false })
+  team_role!: TeamRole;
+}

backend/typescript/rest/teamMemberRoutes.ts

@@ -0,0 +1,29 @@
+import { Router } from "express";
+import TeamMemberService from "../services/implementations/teamMemberService";
+import { getErrorMessage } from "../utilities/errorUtils";
+import { CreateTeamMemberDTO } from "../types";
+import { createTeamMemberDtoValidator } from "../middlewares/validators/teamMemberValidators";
+
+const teamMemberRouter: Router = Router();
+const teamMemberService = new TeamMemberService();
+
+teamMemberRouter.get("/", async (req, res) => {
+  try {
+    const teamMembers = await teamMemberService.getTeamMembers();
+    res.status(200).json(teamMembers);
+  } catch (error: unknown) {
+    res.status(500).json({ error: getErrorMessage(error) });
+  }
+});
+
+teamMemberRouter.post("/", createTeamMemberDtoValidator, async (req, res) => {
+  const data: CreateTeamMemberDTO = req.body;
+  try {
+    const newTeamMember = await teamMemberService.createTeamMember(data);
+    res.status(201).json(newTeamMember);
+  } catch (error: unknown) {
+    res.status(500).json({ error: getErrorMessage(error) });
+  }
+});
+
+export default teamMemberRouter;

backend/typescript/server.ts

@@ -4,6 +4,7 @@ import express from "express";
 import * as firebaseAdmin from "firebase-admin";
 import swaggerUi from "swagger-ui-express";
 import YAML from "yamljs";
+import teamMemberRouter from "./rest/teamMemberRoutes";
 
 import { sequelize } from "./models";
 import authRouter from "./rest/authRoutes";
@@ -42,6 +43,7 @@ app.use("/simple-entities", simpleEntityRouter);
 app.use("/users", userRouter);
 app.use("/tasks", taskRouter);
 app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+app.use("/team-members", teamMemberRouter);
 
 sequelize.authenticate();
 

backend/typescript/services/implementations/teamMemberService.ts

@@ -0,0 +1,53 @@
+import PgTeamMember from "../../models/teamMember.model";
+import ITeamMemberService from "../interfaces/teamMemberService";
+import { TeamMemberDTO, CreateTeamMemberDTO } from "../../types";
+import { getErrorMessage } from "../../utilities/errorUtils";
+import logger from "../../utilities/logger";
+
+const Logger = logger(__filename);
+
+class TeamMemberService implements ITeamMemberService {
+  /* eslint-disable class-methods-use-this */
+  async getTeamMembers(): Promise<TeamMemberDTO[]> {
+    try {
+      const teamMembers: Array<PgTeamMember> = await PgTeamMember.findAll();
+      return teamMembers.map((teamMember) => ({
+        id: String(teamMember.id),
+        firstName: teamMember.first_name,
+        lastName: teamMember.last_name,
+        teamRole: teamMember.team_role,
+      }));
+    } catch (error: unknown) {
+      Logger.error(
+        `Failed to get team members. Reason = ${getErrorMessage(error)}`,
+      );
+      throw error;
+    }
+  }
+
+  async createTeamMember(
+    teamMember: CreateTeamMemberDTO,
+  ): Promise<TeamMemberDTO> {
+    let newTeamMember: PgTeamMember | null;
+    try {
+      newTeamMember = await PgTeamMember.create({
+        first_name: teamMember.firstName,
+        last_name: teamMember.lastName,
+        team_role: teamMember.teamRole,
+      });
+    } catch (error: unknown) {
+      Logger.error(
+        `Failed to create team member. Reason = ${getErrorMessage(error)}`,
+      );
+      throw error;
+    }
+    return {
+      id: String(newTeamMember.id),
+      firstName: newTeamMember.first_name,
+      lastName: newTeamMember.last_name,
+      teamRole: newTeamMember.team_role,
+    };
+  }
+}
+
+export default TeamMemberService;

backend/typescript/services/interfaces/teamMemberService.ts

@@ -0,0 +1,20 @@
+import { CreateTeamMemberDTO, TeamMemberDTO } from "../../types";
+
+interface ITeamMemberService {
+  /**
+   * Get all team member information
+   * @returns array of TeamMemberDTO
+   * @throws Error if team member retrieval fails
+   */
+  getTeamMembers(): Promise<TeamMemberDTO[]>;
+
+  /**
+   * Create a team member
+   * @param teamMember the team member to be created
+   * @returns a TeamMemberDTO with the created team member's information
+   * @throws Error if team member creation fails
+   */
+  createTeamMember(teamMember: CreateTeamMemberDTO): Promise<TeamMemberDTO>;
+}
+
+export default ITeamMemberService;

backend/typescript/types.ts

@@ -101,3 +101,15 @@ export type NodemailerConfig = {
     refreshToken: string;
   };
 };
+
+export const teamRoleValues = ["PM", "DESIGNER", "PL", "DEVELOPER"] as const;
+export type TeamRole = (typeof teamRoleValues)[number];
+
+export type TeamMemberDTO = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  teamRole: TeamRole;
+};
+
+export type CreateTeamMemberDTO = Omit<TeamMemberDTO, "id">;

frontend/package.json

@@ -5,9 +5,9 @@
   "dependencies": {
     "@apollo/client": "^3.3.16",
     "@chakra-ui/icons": "^2.2.4",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@chakra-ui/react": "2.10.9",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
     "@fontsource/poppins": "^5.0.14",
     "@fontsource/roboto": "^5.0.13",
     "@rjsf/bootstrap-4": "^2.5.1",
@@ -27,7 +27,7 @@
     "axios": "^0.30.0",
     "bootstrap": "^4.6.0",
     "firebase": "^11.10.0",
-    "framer-motion": "^11.2.10",
+    "framer-motion": "11.2.10",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",
     "json-schema": "^0.3.0",

frontend/src/APIClients/TeamMembersAPIClient.ts

@@ -0,0 +1,34 @@
+import { TeamMember, TeamRole } from "../types/TeamMembersTypes";
+import baseAPIClient from "./BaseAPIClient";
+
+// Fetch all team members
+const get = async (): Promise<TeamMember[] | null> => {
+  try {
+    const { data } = await baseAPIClient.get("team-members/");
+    return data;
+  } catch (error: unknown) {
+    console.error("Error fetching team members:", error);
+    return null;
+  }
+};
+
+// Add a new team member
+const create = async (
+  firstName: string,
+  lastName: string,
+  teamRole: TeamRole,
+): Promise<TeamMember[] | null> => {
+  try {
+    const { data } = await baseAPIClient.post("team-members/", {
+      firstName,
+      lastName,
+      teamRole,
+    });
+    return data;
+  } catch (error: unknown) {
+    console.error("Error creating team member:", error);
+    return null;
+  }
+};
+
+export default { get, create };

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import React, { useState, useReducer } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import TeamMembersPage from "./components/pages/TeamMembersPage";
 
 import Default from "./pages/Default";
 import LoginPage from "./pages/LoginPage";
@@ -213,6 +214,12 @@ const App = (): React.ReactElement => {
                     component={VolunteerViewEditUserProfilePage}
                     allowedRoles={AuthConstants.ALL_ROLES}
                   />
+                  <PrivateRoute
+                    exact
+                    path={Routes.TEAM_MEMBERS}
+                    component={TeamMembersPage}
+                    allowedRoles={AuthConstants.ALL_ROLES}
+                  />
                   {/* Fallback Route */}
                   <Route path="*" component={NotFoundPage} />
                 </Switch>

frontend/src/components/pages/TeamMembersPage.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  VStack,
+  Button,
+} from "@chakra-ui/react";
+import TeamMembersAPIClient from "../../APIClients/TeamMembersAPIClient";
+import { TeamMember } from "../../types/TeamMembersTypes";
+
+const TeamMembersPage = (): React.ReactElement => {
+  const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
+
+  // Fetch team members
+  const getTeamMembers = async () => {
+    const teamMembersData = await TeamMembersAPIClient.get();
+    if (teamMembersData) {
+      setTeamMembers(teamMembersData);
+    }
+  };
+
+  // Add a hardcoded team member
+  const addTeamMember = async () => {
+    await TeamMembersAPIClient.create("Jerry", "Cheng", "PL");
+    await getTeamMembers(); // refresh the table after adding
+  };
+
+  useEffect(() => {
+    getTeamMembers();
+  }, []);
+
+  return (
+    <VStack spacing="24px" style={{ margin: "24px auto" }}>
+      <h1>Team Members Page</h1>
+      <TableContainer>
+        <Table colorScheme="blue">
+          <Thead>
+            <Tr>
+              <Th>First Name</Th>
+              <Th>Last Name</Th>
+              <Th>Team Role</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {teamMembers.map((teamMember, index) => (
+              <Tr key={index}>
+                <Td>{teamMember.firstName}</Td>
+                <Td>{teamMember.lastName}</Td>
+                <Td>{teamMember.teamRole}</Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <Button colorScheme="blue" onClick={addTeamMember}>
+        + Add a Jerry
+      </Button>
+    </VStack>
+  );
+};
+
+export default TeamMembersPage;

frontend/src/constants/Routes.ts

@@ -48,3 +48,5 @@ export const HOOKS_PAGE = "/hooks";
 export const DEV_FILE_STORAGE_UPLOAD_PAGE = "/dev-file-upload";
 
 export const VOLUNTEER_EDIT_USER_PROFILE_PAGE = "/edit-user-profile";
+
+export const TEAM_MEMBERS = "/team-members";

frontend/src/types/TeamMembersTypes.ts

@@ -0,0 +1,8 @@
+export type TeamRole = "PM" | "DESIGNER" | "PL" | "DEVELOPER";
+
+export type TeamMember = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  teamRole: TeamRole;
+};