From 4bcfac30934760f50b3f51ac93eb9dc7883b9120 Mon Sep 17 00:00:00 2001
From: Brax Excell <braxton.excell@gmail.com>
Date: Tue, 19 Mar 2024 18:29:48 -0500
Subject: [PATCH] filters persist now (#184)

---
 src/app/components/form/DropdownField.tsx     |  18 +-
 src/app/components/layout/Browse.tsx          |  24 +-
 src/app/components/modals/FilterModal.tsx     | 216 ++++++++----------
 .../jest/frontend/DetailsPage.test.tsx        |  12 +-
 .../components/cards/CollegeCard.test.tsx     |   9 +-
 src/app/utils/analytics.tsx                   |   2 +-
 6 files changed, 130 insertions(+), 151 deletions(-)

diff --git a/src/app/components/form/DropdownField.tsx b/src/app/components/form/DropdownField.tsx
index 601a8e6..aa91c5c 100644
--- a/src/app/components/form/DropdownField.tsx
+++ b/src/app/components/form/DropdownField.tsx
@@ -3,25 +3,12 @@
 import { FieldHint, DropdownOptions } from "../../types";
 import { Field } from "formik";
 
-export const DropdownField = ({
-  id,
-  label,
-  required,
-  name,
-  options,
-  hint,
-}: Props) => {
-  const fieldLabel = required ? `${label} *` : `${label}`;
+export const DropdownField = ({ id, label, name, options, hint }: Props) => {
   return (
     <>
       <label className="usa-label" htmlFor={id}>
-        {fieldLabel}
+        {label}
       </label>
-      {hint && (
-        <div className="usa-hint" id={hint.id}>
-          {hint.text}
-        </div>
-      )}
       <Field
         className="usa-select"
         id={id}
@@ -43,7 +30,6 @@ export const DropdownField = ({
 type Props = {
   id: string;
   label: string;
-  required: boolean;
   name: string;
   options: DropdownOptions[];
   hint?: FieldHint;
diff --git a/src/app/components/layout/Browse.tsx b/src/app/components/layout/Browse.tsx
index 6694ffc..532071f 100644
--- a/src/app/components/layout/Browse.tsx
+++ b/src/app/components/layout/Browse.tsx
@@ -8,14 +8,17 @@ import {
   FilterModal,
   InstitutionContext,
   Spinner,
+  USWDSForm,
 } from "../../components";
 // utils
+import { filterInstitutions } from "../../utils/filtering";
 import { College } from "../../types";
 // icons
 import arrow_upward from "../../assets/icons/arrow_upward.svg";
 
 export const Browse = () => {
-  const { filteredInstitutions } = useContext(InstitutionContext);
+  const { filteredInstitutions, institutionsArray, setFilteredInstitutions } =
+    useContext(InstitutionContext);
   const [scrollPosition, setScrollPosition] = useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
@@ -31,6 +34,19 @@ export const Browse = () => {
     setIsModalVisible(true);
   };
 
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const applyFilters = async (filters: any) => {
+    const filteredInstitutions = filterInstitutions(
+      institutionsArray!,
+      filters,
+    );
+    setFilteredInstitutions(filteredInstitutions);
+    closeModal();
+  };
+
   if (!filteredInstitutions) return <Spinner />;
   return (
     <>
@@ -45,9 +61,9 @@ export const Browse = () => {
           </Button>
         </div>
       )}
-      {isModalVisible && (
-        <FilterModal closeHandler={() => setIsModalVisible(false)} />
-      )}
+      <USWDSForm initialValues={{}} submit={applyFilters}>
+        {isModalVisible && <FilterModal closeHandler={closeModal} />}
+      </USWDSForm>
       {filteredInstitutions?.length > 0 ? (
         <ul className="usa-card-group">
           {filteredInstitutions.map((school: College) => (
diff --git a/src/app/components/modals/FilterModal.tsx b/src/app/components/modals/FilterModal.tsx
index a6dbce8..ecbbda2 100644
--- a/src/app/components/modals/FilterModal.tsx
+++ b/src/app/components/modals/FilterModal.tsx
@@ -1,44 +1,21 @@
 "use client";
 
-import { MouseEventHandler, useContext } from "react";
-import Image from "next/image";
+import { MouseEventHandler } from "react";
 //components
+import Image from "next/image";
 import {
   Button,
   ButtonGroup,
   ModalFooter,
   ModalHeading,
 } from "@trussworks/react-uswds";
-import { CheckboxField, DropdownField, USWDSForm } from "../../components";
-// utils
-import { InstitutionContext } from "../institutions/InstitutionProvider";
-import { filterInstitutions } from "../../utils/filtering";
+import { CheckboxField, DropdownField } from "../../components";
 //assets
 import close from "../../assets/icons/close.svg";
 //types
 import { CollegeType, stateOptions } from "../../types";
 
 export const FilterModal = ({ closeHandler }: Props) => {
-  const { institutionsArray, setFilteredInstitutions } =
-    useContext(InstitutionContext);
-  // const [filterState, setFilterState] = useState<Object | undefined>(undefined);
-
-  const closeModal = () => {
-    closeHandler();
-    // TODO: Add tracking
-  };
-
-  // TODO: Add tracking
-  const applyFilters = async (filters: any) => {
-    // TODO: persist filters
-    const filteredInstitutions = filterInstitutions(
-      institutionsArray!,
-      filters,
-    );
-    setFilteredInstitutions(filteredInstitutions);
-    closeHandler();
-  };
-
   return (
     <div
       role="dialog"
@@ -47,102 +24,99 @@ export const FilterModal = ({ closeHandler }: Props) => {
       aria-describedby="modal-1-description"
     >
       <div data-testid="modalOverlay" className="usa-modal-overlay">
-        <USWDSForm initialValues={{}} submit={applyFilters}>
-          <div className="usa-modal usa-modal--lg" tabIndex={-1}>
-            <ModalHeading>Filter schools</ModalHeading>
-            <div className="filter_section">
-              <p className="filter_section-heading">Location</p>
-              <DropdownField
-                id="filter-state"
-                name="filter-state"
-                label="State"
-                required={false}
-                options={stateOptions}
-              />
-            </div>
-            <div className="filter_section">
-              <p className="filter_section-heading">Type</p>
-              <CheckboxField
-                id="filter-type"
-                name="filter-type"
-                options={[
-                  { id: CollegeType.PUBLIC, label: CollegeType.PUBLIC },
-                  { id: CollegeType.PRIVATE_NP, label: CollegeType.PRIVATE_NP },
-                  { id: CollegeType.PRIVATE_FP, label: CollegeType.PRIVATE_FP },
-                ]}
-              />
-            </div>
-            <div className="filter_section">
-              <p className="filter_section-heading">Undergraduate population</p>
-              <CheckboxField
-                id="filter-undergrad-pop"
-                name="filter-undergrad-pop"
-                options={[
-                  { id: "<2", label: "Less than 2,000" },
-                  { id: "2-5", label: "2,000 - 5,000" },
-                  { id: "5-10", label: "5,000 - 10,000" },
-                  { id: "10-20", label: "10,000 - 20,000" },
-                  { id: ">20", label: "20,000 +" },
-                ]}
-              />
-            </div>
-            <div className="filter_section">
-              <p className="filter_section-heading">Graduation rate</p>
-              <CheckboxField
-                id="filter-grad-rate"
-                name="filter-grad-rate"
-                options={[
-                  { id: ">90", label: "More than 90%" },
-                  { id: "60-90", label: "60% - 90%" },
-                  { id: "30-60", label: "30% - 60%" },
-                  { id: "<30", label: "Less than 30%" },
-                ]}
-              />
-            </div>
-            <div className="filter_section">
-              <p className="filter_section-heading">Average cost per year</p>
-              <CheckboxField
-                id="filter-avg-cost-per-year"
-                name="filter-avg-cost-per-year"
-                options={[
-                  { id: "<10$", label: "Less than $10,000" },
-                  { id: "10-20$", label: "$10,000 - $20,000" },
-                  { id: "20-40$", label: "$20,000 - $40,000" },
-                  { id: "40-60$", label: "$40,000 - $60,000" },
-                  { id: ">60$", label: "More than $60,000" },
-                ]}
-              />
-            </div>
-            <ModalFooter>
-              <ButtonGroup>
-                <Button type="submit">Apply Filters</Button>
-                <Button
-                  type="button"
-                  onClick={closeModal}
-                  unstyled
-                  className="padding-105 text-center"
-                >
-                  Close
-                </Button>
-              </ButtonGroup>
-            </ModalFooter>
-            <button
-              type="button"
-              className="usa-button usa-modal__close filter_close"
-              aria-label="Close this window"
-              data-close-modal
-              onClick={closeModal as MouseEventHandler}
-            >
-              <Image
-                src={close}
-                className="filter-modal_icon-image"
-                height="30"
-                width="30"
-                alt="close icon"
-              />
-            </button>
+        <div className="usa-modal usa-modal--lg" tabIndex={-1}>
+          <ModalHeading>Filter schools</ModalHeading>
+          <div className="filter_section">
+            <p className="filter_section-heading">Location</p>
+            <DropdownField
+              id="filter-state"
+              name="filter-state"
+              label="State"
+              options={stateOptions}
+            />
+          </div>
+          <div className="filter_section">
+            <p className="filter_section-heading">Type</p>
+            <CheckboxField
+              id="filter-type"
+              name="filter-type"
+              options={[
+                { id: CollegeType.PUBLIC, label: CollegeType.PUBLIC },
+                { id: CollegeType.PRIVATE_NP, label: CollegeType.PRIVATE_NP },
+                { id: CollegeType.PRIVATE_FP, label: CollegeType.PRIVATE_FP },
+              ]}
+            />
+          </div>
+          <div className="filter_section">
+            <p className="filter_section-heading">Undergraduate population</p>
+            <CheckboxField
+              id="filter-undergrad-pop"
+              name="filter-undergrad-pop"
+              options={[
+                { id: "<2", label: "Less than 2,000" },
+                { id: "2-5", label: "2,000 - 5,000" },
+                { id: "5-10", label: "5,000 - 10,000" },
+                { id: "10-20", label: "10,000 - 20,000" },
+                { id: ">20", label: "20,000 +" },
+              ]}
+            />
+          </div>
+          <div className="filter_section">
+            <p className="filter_section-heading">Graduation rate</p>
+            <CheckboxField
+              id="filter-grad-rate"
+              name="filter-grad-rate"
+              options={[
+                { id: ">90", label: "More than 90%" },
+                { id: "60-90", label: "60% - 90%" },
+                { id: "30-60", label: "30% - 60%" },
+                { id: "<30", label: "Less than 30%" },
+              ]}
+            />
+          </div>
+          <div className="filter_section">
+            <p className="filter_section-heading">Average cost per year</p>
+            <CheckboxField
+              id="filter-avg-cost-per-year"
+              name="filter-avg-cost-per-year"
+              options={[
+                { id: "<10$", label: "Less than $10,000" },
+                { id: "10-20$", label: "$10,000 - $20,000" },
+                { id: "20-40$", label: "$20,000 - $40,000" },
+                { id: "40-60$", label: "$40,000 - $60,000" },
+                { id: ">60$", label: "More than $60,000" },
+              ]}
+            />
           </div>
-        </USWDSForm>
+          <ModalFooter>
+            <ButtonGroup>
+              <Button type="submit">Apply Filters</Button>
+              <Button
+                type="button"
+                onClick={closeHandler as MouseEventHandler}
+                unstyled
+                className="padding-105 text-center"
+              >
+                Close
+              </Button>
+            </ButtonGroup>
+          </ModalFooter>
+          <button
+            type="button"
+            className="usa-button usa-modal__close filter_close"
+            aria-label="Close this window"
+            data-close-modal
+            onClick={closeHandler as MouseEventHandler}
+          >
+            <Image
+              src={close}
+              className="filter-modal_icon-image"
+              height="30"
+              width="30"
+              alt="close icon"
+            />
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/testing/jest/frontend/DetailsPage.test.tsx b/src/app/testing/jest/frontend/DetailsPage.test.tsx
index 12efcc2..da33ad0 100644
--- a/src/app/testing/jest/frontend/DetailsPage.test.tsx
+++ b/src/app/testing/jest/frontend/DetailsPage.test.tsx
@@ -4,6 +4,7 @@ import InstitutionDetails from "@/src/app/[id]/page";
 import { InstitutionContext } from "@/src/app/components";
 import { InstitutionContextShape } from "@/src/app/components/institutions/InstitutionProvider";
 import { mockCollege } from "../setupJest";
+import { act } from "react-dom/test-utils";
 
 const testParams = {
   id: 0,
@@ -11,6 +12,9 @@ const testParams = {
 
 const testContext: InstitutionContextShape = {
   institutionsArray: [mockCollege],
+  filteredInstitutions: [mockCollege],
+  institutionsObject: {},
+  setFilteredInstitutions: () => {},
 };
 
 const testDetailsPageComponent = () => (
@@ -33,8 +37,10 @@ describe("Test InstitutionDetails Page", () => {
 
 describe("Test InstitutionDetails Page accessibility", () => {
   it("Should not have basic accessibility issues", async () => {
-    const { container } = render(testDetailsPageComponent());
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
+    await act(async () => {
+      const { container } = render(testDetailsPageComponent());
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
   });
 });
diff --git a/src/app/testing/jest/frontend/components/cards/CollegeCard.test.tsx b/src/app/testing/jest/frontend/components/cards/CollegeCard.test.tsx
index bb97e74..5597eea 100644
--- a/src/app/testing/jest/frontend/components/cards/CollegeCard.test.tsx
+++ b/src/app/testing/jest/frontend/components/cards/CollegeCard.test.tsx
@@ -50,13 +50,12 @@ describe("Test CollegeCard", () => {
       "Apply",
     );
   });
+
   test("On click, apply link fires tracking event", async () => {
     const mixpanelTrackSpy = jest.spyOn(mixpanel, "track");
     const applyButton = screen.getByRole("link", { name: /apply/i });
     expect(applyButton).toBeVisible();
-    await act(async () => {
-      await userEvent.click(applyButton);
-    });
+    await userEvent.click(applyButton);
     expect(mixpanelTrackSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -64,9 +63,7 @@ describe("Test CollegeCard", () => {
     const mixpanelTrackSpy = jest.spyOn(mixpanel, "track");
     const viewMoreButton = screen.getByRole("link", { name: /View more/i });
     expect(viewMoreButton).toBeVisible();
-    await act(async () => {
-      await userEvent.click(viewMoreButton);
-    });
+    await userEvent.click(viewMoreButton);
     expect(mixpanelTrackSpy).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/app/utils/analytics.tsx b/src/app/utils/analytics.tsx
index 3029492..f28d012 100644
--- a/src/app/utils/analytics.tsx
+++ b/src/app/utils/analytics.tsx
@@ -6,7 +6,7 @@ export const InitAnalytics = () => {
   useEffect(() => {
     const isProd = process.env.NODE_ENV === "production";
     mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN || "", {
-      debug: !isProd,
+      debug: true,
       ignore_dnt: !isProd,
       track_pageview: "full-url",
       persistence: "localStorage",