Code-the-Change-YYC · asallh · Aug 27, 2025
diff --git a/.env.local.example b/.env.local.example
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
diff --git a/next.config.js b/next.config.js
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "contentful": "^10.15.0",
     "date-fns": "^4.1.0",
     "js-sha3": "^0.9.3",
+    "lodash.debounce": "^4.0.8",
     "luxon": "^3.4.4",
     "next": "^14.2.12",
     "react": "^18",
@@ -55,6 +56,7 @@
     "@next/eslint-plugin-next": "^15.4.5",
     "@tanstack/react-query-devtools": "^5.84.1",
     "@types/aws-lambda": "^8.10.138",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.12.7",
     "@types/react": "^18",

diff --git a/postcss.config.cjs b/postcss.config.cjs
diff --git a/src/app/admin/components/UsersTableSetup.tsx b/src/app/admin/components/UsersTableSetup.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import debounce from "lodash.debounce";
+import { useMemo, useState } from "react";
 import { TbInfoSquareRoundedFilled } from "react-icons/tb";
 import { createColumnHelper } from "@tanstack/react-table";
 import DeleteButton from "../teams/components/DeleteButton";
@@ -45,6 +46,13 @@ export const usersColumns = [
       },
     }) => {
       const [value, setValue] = useState(getValue()!);
+      const debouncedUpdate = useMemo(
+        () =>
+          debounce((newValue: string) => {
+            meta?.updateData(index, "teamId", newValue);
+          }, 300),
+        [meta, index],
+      );
       if (!getIsSelected()) return getValue();
       const onBlur = () => {
         meta?.updateData(index, "teamId", value);
@@ -53,7 +61,10 @@ export const usersColumns = [
         <input
           className="w-full rounded-md border border-awesomer-purple bg-white p-2 focus:outline-none focus:ring-1 focus:ring-awesomer-purple"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => {
+            setValue(e.target.value);
+            debouncedUpdate(e.target.value);
+          }}
           onBlur={onBlur}
         />
       );
@@ -70,6 +81,13 @@ export const usersColumns = [
     }) => {
       const initialValue = getValue()!;
       const [value, setValue] = useState(initialValue);
+      const debouncedUpdate = useMemo(
+        () =>
+          debounce((newValue: string) => {
+            meta?.updateData(index, "firstName", newValue);
+          }, 300),
+        [meta, index],
+      );
       if (!getIsSelected()) {
         return getValue();
       }
@@ -80,7 +98,10 @@ export const usersColumns = [
         <input
           className="w-full rounded-md border border-awesomer-purple bg-white p-2 focus:outline-none focus:ring-1 focus:ring-awesomer-purple"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => {
+            setValue(e.target.value);
+            debouncedUpdate(e.target.value);
+          }}
           onBlur={onBlur}
         />
       );
@@ -99,6 +120,13 @@ export const usersColumns = [
     }) => {
       const initialValue = getValue()!;
       const [value, setValue] = useState(initialValue);
+      const debouncedUpdate = useMemo(
+        () =>
+          debounce((newValue: string) => {
+            meta?.updateData(index, "lastName", newValue);
+          }, 300),
+        [meta, index],
+      );
       if (!getIsSelected()) {
         return getValue();
       }
@@ -109,7 +137,10 @@ export const usersColumns = [
         <input
           className="w-full rounded-md border border-awesomer-purple bg-white p-2 focus:outline-none focus:ring-1 focus:ring-awesomer-purple"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => {
+            setValue(e.target.value);
+            debouncedUpdate(e.target.value);
+          }}
           onBlur={onBlur}
         />
       );
@@ -128,6 +159,13 @@ export const usersColumns = [
     }) => {
       const initialValue = getValue();
       const [value, setValue] = useState(initialValue ?? "");
+      const debouncedUpdate = useMemo(
+        () =>
+          debounce((newValue: string) => {
+            meta?.updateData(index, "role", newValue);
+          }, 300),
+        [meta, index],
+      );
       if (!getIsSelected()) {
         return getValue();
       }
@@ -140,7 +178,7 @@ export const usersColumns = [
           className="w-full rounded-md border border-awesomer-purple bg-white p-2 focus:outline-none focus:ring-1 focus:ring-awesomer-purple"
           onChange={(e) => {
             setValue(Role[e.target.value as keyof typeof Role]);
-            onBlur();
+            debouncedUpdate(Role[e.target.value as keyof typeof Role]);
           }}
           onBlur={onBlur}
         >

diff --git a/src/app/admin/create-food-event/createFoodEventForm.tsx b/src/app/admin/create-food-event/createFoodEventForm.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import debounce from "lodash.debounce";
 import { DateTime } from "luxon";
+import { useMemo } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import { type Schema } from "@/amplify/data/resource";
@@ -24,6 +26,14 @@ const CreateFoodTicketForm = () => {
     formState: { errors, isSubmitting },
   } = useForm<Schema["FoodEvent"]["type"]>();
 
+  const debouncedFormUpdate = useMemo(
+    () =>
+      debounce((field: string, value: string) => {
+        console.log(`Field ${field} updated to ${value} - Auto-saving...`);
+      }, 500),
+    [],
+  );
+
   const foodEventMutation = useMutation({
     mutationFn: createFoodEvent,
     onSuccess: () => {
@@ -80,6 +90,9 @@ const CreateFoodTicketForm = () => {
             type="text"
             className={INPUT_STYLES}
             placeholder="Breakfast, Lunch, or Dinner"
+            onChange={(e) => {
+              debouncedFormUpdate(e.target.name || "name", e.target.value);
+            }}
           />
           {errors.name && (
             <div className="text-strawberry-red">{errors.name.message}</div>
@@ -91,6 +104,12 @@ const CreateFoodTicketForm = () => {
             })}
             className={INPUT_STYLES}
             placeholder="Description"
+            onChange={(e) => {
+              debouncedFormUpdate(
+                e.target.name || "description",
+                e.target.value,
+              );
+            }}
           />
           {errors.description && (
             <div className="text-strawberry-red">
@@ -104,6 +123,9 @@ const CreateFoodTicketForm = () => {
             })}
             type="datetime-local"
             className={INPUT_STYLES}
+            onChange={(e) => {
+              debouncedFormUpdate(e.target.name || "start", e.target.value);
+            }}
           />
           {errors.start && (
             <div className="text-strawberry-red">{errors.start.message}</div>
@@ -115,6 +137,9 @@ const CreateFoodTicketForm = () => {
             })}
             type="datetime-local"
             className={INPUT_STYLES}
+            onChange={(e) => {
+              debouncedFormUpdate(e.target.name || "end", e.target.value);
+            }}
           />
           {errors.end && (
             <div className="text-strawberry-red">{errors.end.message}</div>
@@ -127,6 +152,12 @@ const CreateFoodTicketForm = () => {
             type="text"
             className={INPUT_STYLES}
             placeholder="Number of Groups"
+            onChange={(e) => {
+              debouncedFormUpdate(
+                e.target.name || "totalGroupCount",
+                e.target.value,
+              );
+            }}
           />
           {errors.totalGroupCount && (
             <div className="text-strawberry-red">

diff --git a/src/app/admin/teams/TeamTableSetup.tsx b/src/app/admin/teams/TeamTableSetup.tsx
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import debounce from "lodash.debounce";
+import { useMemo, useState } from "react";
 import { TbInfoSquareRoundedFilled } from "react-icons/tb";
 import { createColumnHelper } from "@tanstack/react-table";
 import DeleteButton from "./components/DeleteButton";
@@ -22,13 +23,27 @@
       },
     }) => {
       const [value, setValue] = useState(getValue());
+
+      const debouncedUpdate = useMemo(
+        () =>
+          debounce((newValue: string) => {
+            meta?.updateData(index, "name", newValue);
+          }, 300),
+        [meta, index],
+      );
+
       if (!getIsSelected()) return getValue();
       const onBlur = () => meta?.updateData(index, "name", value);
+      const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        debouncedUpdate(newValue);
+      };
       return (
         <input
           className="w-full rounded-md border border-awesomer-purple bg-white p-2 focus:outline-none focus:ring-1 focus:ring-awesomer-purple"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={onChange}
           onBlur={onBlur}
         />
       );
@@ -58,7 +73,7 @@
  columnHelper.accessor("approved", {
    cell: ({
      getValue,
      row,
      row: { getIsSelected, index },
      table: {
        options: { meta },
@@ -66,22 +81,32 @@
     }) => {
       const initialValue = getValue();
       const [value, setValue] = useState(initialValue);
+
+      const debouncedUpdate = useMemo(
+        () =>
+          debounce((newValue: boolean) => {
+            meta?.updateData(index, "approved", newValue);
+          }, 300),
+        [meta, index],
+      );
+
       if (!getIsSelected()) return getValue() ? "Approved" : "Not Approved";
       const ApproveStatus = {
         Approved: true,
         "Not Approved": false,
       } as const;
       const onBlur = () => meta?.updateData(index, "approved", value);
+      const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const newValue =
+          ApproveStatus[e.target.value as keyof typeof ApproveStatus];
+        setValue(newValue);
+        debouncedUpdate(newValue);
+      };
       return (
         <select
           value={value ? "Approved" : "Not Approved"}
           className="w-full rounded-md border border-awesomer-purple bg-white p-2 focus:outline-none focus:ring-1 focus:ring-awesomer-purple"
-          onChange={(e) => {
-            setValue(
-              ApproveStatus[e.target.value as keyof typeof ApproveStatus],
-            );
-            meta?.updateData(row.index, "approved", value);
-          }}
+          onChange={onChange}
           onBlur={onBlur}
         >
           {Object.keys(ApproveStatus).map((key) => (

diff --git a/src/app/admin/teams/components/TableSearch.tsx b/src/app/admin/teams/components/TableSearch.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import debounce from "lodash.debounce";
 import Image from "next/image";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import search_icon from "@/svgs/admin/search_icon.svg";
 
 const TableSearch = ({
@@ -11,6 +12,11 @@ const TableSearch = ({
   tableDataLength: number;
   handleSearchChange: (e: string) => void;
 }) => {
+  const debouncedSearch = useMemo(
+    () => debounce(handleSearchChange, 300),
+    [handleSearchChange],
+  );
+
   return (
     <div className="relative flex w-full items-center justify-between rounded-t-md bg-white px-4 py-2">
       <h1 className="whitespace-nowrap py-6 pr-2 text-2xl font-semibold">
@@ -23,7 +29,7 @@ const TableSearch = ({
           type="text"
           placeholder="Search name"
           className="h-3/5 w-full rounded-md border border-black p-4 pr-10 font-light"
-          onChange={(e) => handleSearchChange(e.target.value)}
+          onChange={(e) => debouncedSearch(e.target.value)}
         />
         <Image
           src={search_icon}

diff --git a/src/components/LoginForm/PersonalFormFields.tsx b/src/components/LoginForm/PersonalFormFields.tsx
@@ -1,6 +1,7 @@
 import type { AuthUser } from "aws-amplify/auth";
+import debounce from "lodash.debounce";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import type { Schema } from "@/amplify/data/resource";
 import { client } from "@/app/QueryProvider";
@@ -76,18 +77,27 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
 
     userMutation.mutate(formState);
   };
+
+  const debouncedUpdateForm = useMemo(
+    () =>
+      debounce((name: string, value: any) => {
+        if (name === "willEatMeals") {
+          setFormState((prevState) => ({
+            ...prevState,
+            [name]: value === "Yes",
+          }));
+        } else {
+          setFormState((prevState) => ({ ...prevState, [name]: value }));
+        }
+      }, 500),
+    [],
+  );
+
   const updateForm = (
     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
   ): void => {
     const { name, value } = e.target;
-    if (name === "willEatMeals") {
-      setFormState((prevState) => ({
-        ...prevState,
-        [name]: value === MealOptions.Yes,
-      }));
-    } else {
-      setFormState((prevState) => ({ ...prevState, [name]: value }));
-    }
+    debouncedUpdateForm(name, value);
   };
 
   console.log(isPending);