modified FilterModal and zip code filtering

frontend/src/api/VSRs.ts

@@ -159,12 +159,17 @@ export async function createVSR(vsr: CreateVSRRequest): Promise<APIResult<VSR>>
 export async function getAllVSRs(
   firebaseToken: string,
   search?: string,
+  zipCodes?: string[],
 ): Promise<APIResult<VSR[]>> {
   try {
     if (search) {
       const response = await get(`/api/vsr?search=${search}`, createAuthHeader(firebaseToken));
       const json = (await response.json()) as VSRListJson;
       return { success: true, data: json.vsrs.map(parseVSR) };
+    } else if (zipCodes) {
+      const response = await get(`/api/vsr?zipCode=${zipCodes}`, createAuthHeader(firebaseToken));
+      const json = (await response.json()) as VSRListJson;
+      return { success: true, data: json.vsrs.map(parseVSR) };
     } else {
       const response = await get("/api/vsr", createAuthHeader(firebaseToken));
       const json = (await response.json()) as VSRListJson;

frontend/src/app/staff/vsr/page.tsx

@@ -39,7 +39,9 @@ export default function VSRTableView() {
 
   const [selectedVsrIds, setSelectedVsrIds] = useState<string[]>([]);
   const [deleteVsrModalOpen, setDeleteVsrModalOpen] = useState(false);
+
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+  const [filteredZipCodes, setFilteredZipCodes] = useState<string[]>([]);
 
   useRedirectToLoginIfNotSignedIn();
 
@@ -48,27 +50,46 @@ export default function VSRTableView() {
   /**
    * Fetches the list of all VSRs from the backend and updates our vsrs state.
    */
-  const fetchVSRs = () => {
+  const fetchVSRs = (zipCodes = null) => {
     if (!firebaseUser) {
       return;
     }
 
-    setLoadingVsrs(true);
-    firebaseUser?.getIdToken().then((firebaseToken) => {
-      getAllVSRs(firebaseToken).then((result) => {
-        if (result.success) {
-          setVsrs(result.data);
-        } else {
-          if (result.error === "Failed to fetch") {
-            setTableError(VSRTableError.CANNOT_FETCH_VSRS_NO_INTERNET);
+    if (zipCodes !== null) {
+      setLoadingVsrs(true);
+      firebaseUser?.getIdToken().then((firebaseToken) => {
+        getAllVSRs(firebaseToken, zipCodes).then((result) => {
+          if (result.success) {
+            setVsrs(result.data);
           } else {
-            console.error(`Error retrieving VSRs: ${result.error}`);
-            setTableError(VSRTableError.CANNOT_FETCH_VSRS_INTERNAL);
+            if (result.error === "Failed to fetch") {
+              setTableError(VSRTableError.CANNOT_FETCH_VSRS_NO_INTERNET);
+            } else {
+              console.error(`Error retrieving VSRs: ${result.error}`);
+              setTableError(VSRTableError.CANNOT_FETCH_VSRS_INTERNAL);
+            }
           }
-        }
-        setLoadingVsrs(false);
+          setLoadingVsrs(false);
+        });
       });
-    });
+    } else {
+      setLoadingVsrs(true);
+      firebaseUser?.getIdToken().then((firebaseToken) => {
+        getAllVSRs(firebaseToken).then((result) => {
+          if (result.success) {
+            setVsrs(result.data);
+          } else {
+            if (result.error === "Failed to fetch") {
+              setTableError(VSRTableError.CANNOT_FETCH_VSRS_NO_INTERNET);
+            } else {
+              console.error(`Error retrieving VSRs: ${result.error}`);
+              setTableError(VSRTableError.CANNOT_FETCH_VSRS_INTERNAL);
+            }
+          }
+          setLoadingVsrs(false);
+        });
+      });
+    }
   };
 
   // Fetch the VSRs from the backend once the Firebase user loads.
@@ -197,10 +218,6 @@ export default function VSRTableView() {
                 onClick={() => setIsFilterModalOpen(true)}
               />
             )}
-            <FilterModal
-              isOpen={isFilterModalOpen}
-              onClose={() => setIsFilterModalOpen(false)}
-            ></FilterModal>
             <Button
               variant="primary"
               outlined={false}
@@ -239,6 +256,13 @@ export default function VSRTableView() {
         }}
         vsrIds={selectedVsrIds}
       />
+      <FilterModal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        onZipCodesEntered={(zipCodes: string[]) => {
+          setFilteredZipCodes(zipCodes);
+        }}
+      />
     </div>
   );
 }

frontend/src/components/VSRTable/FilterModal/index.tsx

@@ -1,24 +1,67 @@
 import styles from "@/components/VSRTable/FilterModal/styles.module.css";
+import { useState } from "react";
 import Image from "next/image";
 import ReactDOM from "react-dom";
+import { BaseModal } from "@/components/shared/BaseModal";
+import { Button } from "@/components/shared/Button";
+import TextField from "@/components/shared/input/TextField";
 
 interface FilterModalProps {
   isOpen: boolean;
   onClose: () => void;
+  onZipCodesEntered: (zipCodes: string[]) => void;
 }
 
-const FilterModal = ({ isOpen, onClose }: FilterModalProps) => {
+const FilterModal = ({ isOpen, onClose, onZipCodesEntered }: FilterModalProps) => {
   if (!isOpen) return null;
 
-  return ReactDOM.createPortal(
-    <div className={styles.overlay}>
-      <div className={styles.modal}>
-        <button onClick={onClose} className={styles.closeButton}>
-          X
-        </button>
-      </div>
-    </div>,
-    document.body,
+  const [zipCodes, setZipCodes] = useState<string[]>([]);
+
+  const handleZipCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setZipCodes(e.target.value.split(",").map((zip) => zip.trim())); // Assuming zip codes are comma-separated
+  };
+
+  const handleApplyFilter = () => {
+    // Pass the entered zip codes to the parent component when the user applies the filter
+    onZipCodesEntered(zipCodes);
+    onClose(); // Close the modal
+  };
+
+  return (
+    <>
+      <BaseModal
+        isOpen={isOpen}
+        onClose={onClose}
+        title=""
+        content={
+          <TextField
+            label="Zip Code(s)"
+            variant="outlined"
+            placeholder="e.g. 92093"
+            onChange={handleZipCodeChange}
+            required={false}
+          />
+        }
+        bottomRow={
+          <div className={styles.buttonContainer}>
+            <Button
+              variant="error"
+              outlined
+              text="Reset Selection"
+              onClick={onClose}
+              className={styles.button}
+            />
+            <Button
+              variant="primary"
+              outlined={false}
+              text="Apply Filters"
+              onClick={handleApplyFilter}
+              className={styles.button}
+            />
+          </div>
+        }
+      />
+    </>
   );
 };
 

frontend/src/components/VSRTable/FilterModal/styles.module.css

@@ -22,3 +22,16 @@
   background: "none";
   cursor: "pointer";
 }
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}
+.button {
+  width: 100%;
+  padding: 12px 24px;
+  text-align: center;
+  font-family: "Lora";
+  font-size: 24px;
+  font-weight: 700;
+}