Add volunteer profile modal and view page

backend/src/controllers/volunteerController.ts

@@ -98,11 +98,25 @@ type CreateVolunteerBody = {
   email: string;
   phoneNumber: string;
   tags?: string[];
+  status?: "returning" | "new";
+  volunteerTypeTags?: string[];
+  events?: string[];
+  additionalNotes?: string;
 };
 
 export const createVolunteer: RequestHandler = async (req, res, next) => {
   const errors = validationResult(req);
-  const { firstName, lastName, email, phoneNumber, tags = [] } = req.body as CreateVolunteerBody;
+  const {
+    firstName,
+    lastName,
+    email,
+    phoneNumber,
+    tags = [],
+    status = "new",
+    volunteerTypeTags = [],
+    events = [],
+    additionalNotes = "",
+  } = req.body as CreateVolunteerBody;
   try {
     validationErrorParser(errors);
 
@@ -117,13 +131,79 @@ export const createVolunteer: RequestHandler = async (req, res, next) => {
       email,
       phoneNumber,
       tags,
+      status,
+      volunteerTypeTags,
+      events,
+      additionalNotes,
     });
     res.status(201).json(newVolunteer);
   } catch (err) {
     next(err);
   }
 };
 
+type UpdateVolunteerBody = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  tags?: string[];
+  status?: "returning" | "new";
+  volunteerTypeTags?: string[];
+  events?: string[];
+  additionalNotes?: string;
+};
+
+export const updateVolunteer: RequestHandler = async (req, res, next) => {
+  const errors = validationResult(req);
+  const volunteerId = req.params.id;
+  const {
+    firstName,
+    lastName,
+    email,
+    phoneNumber,
+    tags,
+    status,
+    volunteerTypeTags,
+    events,
+    additionalNotes,
+  } = req.body as UpdateVolunteerBody;
+
+  try {
+    validationErrorParser(errors);
+
+    const updatePayload: Record<string, unknown> = {
+      firstName,
+      lastName,
+      email,
+      phoneNumber,
+      volunteerTypeTags,
+      events,
+      additionalNotes,
+    };
+
+    if (Array.isArray(tags)) {
+      updatePayload.tags = tags;
+    }
+    if (status === "new" || status === "returning") {
+      updatePayload.status = status;
+    }
+
+    const volunteer = await VolunteerModel.findByIdAndUpdate(volunteerId, updatePayload, {
+      new: true,
+      runValidators: true,
+    }).populate(defaultPopulateConfig);
+
+    if (!volunteer) {
+      return res.status(404).json({ error: "Could not find volunteer" });
+    }
+
+    res.status(200).json(volunteer);
+  } catch (err) {
+    next(err);
+  }
+};
+
 type UpdateVolunteerContactBody = {
   email: string;
   phoneNumber: string;

backend/src/models/volunteerModel.ts

@@ -13,9 +13,22 @@ const volunteerSchema = new Schema({
     default: [],
     required: true,
   },
+  volunteerTypeTags: {
+    type: [String],
+    default: [],
+  },
+  events: {
+    type: [String],
+    default: [],
+  },
+  additionalNotes: {
+    type: String,
+    default: "",
+  },
   status: {
     type: String,
     enum: ["returning", "new"],
+    default: "new",
   },
 });
 

backend/src/routes/volunteerRoutes.ts

@@ -32,6 +32,7 @@ router.get("/", volunteer.getVolunteers);
 router.delete("/:id", volunteer.deleteVolunteer);
 
 router.post("/", VolunteerValidator.createVolunteerValidator, volunteer.createVolunteer);
+router.put("/:id", VolunteerValidator.updateVolunteerValidator, volunteer.updateVolunteer);
 router.put(
   "/contact/:id",
   VolunteerValidator.updateVolunteerContactValidator,

backend/src/scripts/seedVolunteers.ts

@@ -1,87 +1,97 @@
 import "dotenv/config";
 
 import { connectToDatabase } from "../database/connect";
+import Tag from "../models/tagModel";
 import Volunteer from "../models/volunteerModel";
 
 async function seedVolunteers() {
   await connectToDatabase();
 
-  await Volunteer.deleteMany({}); // Clear existing volunteers
+  await Volunteer.deleteMany({});
+  await Tag.deleteMany({});
+
+  const seededTags = await Tag.insertMany([
+    { name: "Intern", color: "#3B82F6", type: "Volunteer Type" },
+    { name: "Outside Volunteer", color: "#F59E0B", type: "Volunteer Type" },
+    { name: "2+ More", color: "#10B981", type: "Event" },
+  ]);
+
+  const tagIds = seededTags.map((tag) => tag._id);
 
   await Volunteer.insertMany([
     {
       firstName: "Jane",
       lastName: "Doe",
       email: "jane@example.com",
       phoneNumber: "555-123-4567",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "John",
       lastName: "Smith",
       email: "john@example.com",
       phoneNumber: "555-987-6543",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Alice",
       lastName: "Johnson",
       email: "alice@example.com",
       phoneNumber: "555-222-3344",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Michael",
       lastName: "Brown",
       email: "michael@example.com",
       phoneNumber: "555-333-7788",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Sarah",
       lastName: "Lee",
       email: "sarah@example.com",
       phoneNumber: "555-444-9911",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "David",
       lastName: "Kim",
       email: "david@example.com",
       phoneNumber: "555-555-1212",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Emily",
       lastName: "Martinez",
       email: "emily@example.com",
       phoneNumber: "555-666-3434",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Chris",
       lastName: "Wilson",
       email: "chris@example.com",
       phoneNumber: "555-777-5656",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Olivia",
       lastName: "Nguyen",
       email: "olivia@example.com",
       phoneNumber: "555-888-7878",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Daniel",
       lastName: "Anderson",
       email: "daniel@example.com",
       phoneNumber: "555-999-9090",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
   ]);
 
-  console.log("Volunteers seeded");
+  console.info("Volunteers seeded");
   process.exit(0);
 }
 

backend/src/validators/volunteerValidator.ts

@@ -44,12 +44,21 @@ const makePhoneValidator = (path = "phoneNumber") =>
   body(path)
     .exists()
     .withMessage("phone is required")
-    .bail() // What kind of phone number do we want to enforce?
-    .isMobilePhone("any")
-    .withMessage("phoneNumber must be a valid mobile phone number")
+    .bail()
+    .custom((value: string) => {
+      const digitsOnly = value.replace(/\D/g, "");
+      if (digitsOnly.length !== 10) {
+        throw new Error("phoneNumber must be a valid phone number");
+      }
+      return true;
+    })
     .customSanitizer((value: string) => value.replace(/\D/g, ""));
 
 const tagsValidator = () => body("tags").optional().isArray();
+const statusValidator = () => body("status").optional().isIn(["new", "returning"]);
+const volunteerTypeTagsValidator = () => body("volunteerTypeTags").optional().isArray();
+const eventsValidator = () => body("events").optional().isArray();
+const additionalNotesValidator = () => body("additionalNotes").optional().isString();
 
 const batchUploadVolunteersValidator = () =>
   body("volunteers")
@@ -74,6 +83,23 @@ export const createVolunteerValidator = [
   makeEmailValidator(),
   makePhoneValidator(),
   tagsValidator(),
+  statusValidator(),
+  volunteerTypeTagsValidator(),
+  eventsValidator(),
+  additionalNotesValidator(),
+];
+
+export const updateVolunteerValidator = [
+  makeParamIDValidator(),
+  makeFirstNameValidator(),
+  makeLastNameValidator(),
+  makeEmailValidator(),
+  makePhoneValidator(),
+  tagsValidator(),
+  statusValidator(),
+  volunteerTypeTagsValidator(),
+  eventsValidator(),
+  additionalNotesValidator(),
 ];
 
 export const updateVolunteerContactValidator = [

frontend/src/app/api/volunteer.ts

@@ -35,6 +35,14 @@ const normalizeVolunteer = (volunteer: unknown): Volunteer => {
     lastName: String(source.lastName ?? ""),
     email: String(source.email ?? ""),
     phoneNumber: String(source.phoneNumber ?? ""),
+    status: source.status === "returning" ? "returning" : "new",
+    volunteerTypeTags: Array.isArray(source.volunteerTypeTags)
+      ? source.volunteerTypeTags.filter((tag): tag is string => typeof tag === "string")
+      : [],
+    events: Array.isArray(source.events)
+      ? source.events.filter((tag): tag is string => typeof tag === "string")
+      : [],
+    additionalNotes: typeof source.additionalNotes === "string" ? source.additionalNotes : "",
     tags,
   };
 };

frontend/src/app/api/volunteer/[id]/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function PUT(request: NextRequest, context: { params: Promise<{ id: string }> }) {
+  if (!API_URL) {
+    return NextResponse.json({ error: "NEXT_PUBLIC_API_URL is not configured" }, { status: 500 });
+  }
+
+  const token = request.cookies.get("firebaseAuthToken")?.value;
+
+  if (!token) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const { id } = await context.params;
+
+  try {
+    const requestBody = await request.json();
+    const response = await fetch(`${API_URL}/api/volunteer/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(requestBody),
+      cache: "no-store",
+    });
+
+    const contentType = response.headers.get("content-type") ?? "";
+    const payload = contentType.includes("application/json")
+      ? await response.json()
+      : { error: await response.text() };
+
+    return NextResponse.json(payload, { status: response.status });
+  } catch {
+    return NextResponse.json(
+      { error: "Unable to reach backend volunteer service" },
+      { status: 502 },
+    );
+  }
+}