Skip to content
This repository has been archived by the owner on Mar 20, 2024. It is now read-only.

Commit

Permalink
Merge branch 'main' into bug/default-image
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheDanMiller
TheDanMiller authored Mar 19, 2024
2 parents 1a904a1 + 4bcfac3 commit 14acc8e
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 151 deletions.
18 changes: 2 additions & 16 deletions src/app/components/form/DropdownField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -43,7 +30,6 @@ export const DropdownField = ({
type Props = {
id: string;
label: string;
required: boolean;
name: string;
options: DropdownOptions[];
hint?: FieldHint;
Expand Down
24 changes: 20 additions & 4 deletions src/app/components/layout/Browse.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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 (
<>
Expand All @@ -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) => (
Expand Down
216 changes: 95 additions & 121 deletions src/app/components/modals/FilterModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
);
Expand Down
12 changes: 9 additions & 3 deletions src/app/testing/jest/frontend/DetailsPage.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ 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,
};

const testContext: InstitutionContextShape = {
institutionsArray: [mockCollege],
filteredInstitutions: [mockCollege],
institutionsObject: {},
setFilteredInstitutions: () => {},
};

const testDetailsPageComponent = () => (
Expand All @@ -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();
});
});
});
9 changes: 3 additions & 6 deletions src/app/testing/jest/frontend/components/cards/CollegeCard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,20 @@ 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);
});

test("On click, view more link fires tracking event", async () => {
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);
});
});
Expand Down
2 changes: 1 addition & 1 deletion src/app/utils/analytics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 14acc8e

Please sign in to comment.