Allow frontend filtering by neighborhood

sites/public/lib/hooks.ts

@@ -1,10 +1,10 @@
-import { useContext, useEffect, useRef } from "react"
+import { useContext, useEffect } from "react"
 import { useRouter } from "next/router"
+import axios from "axios"
 import useSWR from "swr"
-import { isInternalLink, AuthContext } from "@bloom-housing/ui-components"
+import { isInternalLink } from "@bloom-housing/ui-components"
 import { AppSubmissionContext } from "./AppSubmissionContext"
 import { ParsedUrlQuery } from "querystring"
-import { ListingsService } from "@bloom-housing/backend-core/types"
 
 export const useRedirectToPrevPage = (defaultPath = "/") => {
   const router = useRouter()
@@ -33,22 +33,35 @@ export const useFormConductor = (stepName: string) => {
   return context
 }
 
-const listingsFetcher = function (listingsService: ListingsService) {
-  return (_url: string, page: number, limit: number) => {
-    const params = {
-      page,
-      limit,
-    }
-    return listingsService?.list(params)
+// TODO: consolidate filter definitions (#253)
+export interface FilterOptions {
+  preferredUnit?: string
+  accessibility?: string
+  community?: string
+  neighborhood?: string
+}
+
+function filterStringFromFilters(filters: FilterOptions) {
+  if (!filters || filters.neighborhood == "") return ""
+
+  // Only `neighborhood` filter is currently supported.
+  return `&filter[$comparison]==&filter[neighborhood]=${filters.neighborhood}`
+}
+
+const listingsFetcher = function () {
+  return async (url: string, page: number, limit: number, filters: FilterOptions) => {
+    const res = await axios.get(
+      `${url}?page=${page}&limit=${limit}${filterStringFromFilters(filters)}`
+    )
+    return res.data
   }
 }
 
 // TODO: move this so it can be shared with the partner site.
-export function useListingsData(pageIndex: number, limit = 10) {
-  const { listingsService } = useContext(AuthContext)
+export function useListingsData(pageIndex: number, limit = 10, filters: FilterOptions) {
   const { data, error } = useSWR(
-    [`${process.env.listingServiceUrl}`, pageIndex, limit],
-    listingsFetcher(listingsService)
+    [`${process.env.listingServiceUrl}`, pageIndex, limit, filters],
+    listingsFetcher()
   )
 
   return {

sites/public/pages/listings.tsx

@@ -2,68 +2,81 @@ import Head from "next/head"
 import {
   ListingsList,
   PageHeader,
+  AgPagination,
   Button,
   AppearanceSizeType,
   Modal,
-  Drawer,
   AppearanceStyleType,
-  AppearanceBorderType,
   t,
   Select,
-  AgPagination,
   Form,
+  SelectOption,
 } from "@bloom-housing/ui-components"
 import { useForm } from "react-hook-form"
 import Layout from "../layouts/application"
 import { MetaTags } from "../src/MetaTags"
 import React, { useEffect, useState } from "react"
 import { useRouter } from "next/router"
-import { useListingsData } from "../lib/hooks"
+import { FilterOptions, useListingsData } from "../lib/hooks"
 
 const ListingsPage = () => {
   const router = useRouter()
 
-  /* Pagination state */
+  // Pagination state
   const [currentPage, setCurrentPage] = useState<number>(1)
+  const [filterState, setFilterState] = useState<FilterOptions>(null)
   const itemsPerPage = 10
 
-  function setPage(page: number) {
-    if (page != currentPage) {
+  // Filter state
+  const [filterModalVisible, setFilterModalVisible] = useState<boolean>(false)
+
+  // TODO: Select options should come from the database (#252)
+  const preferredUnitOptions = ["", "1", "2", "3", "4", "studio"]
+  const accessibilityOptions = ["", "n", "y"]
+  const communityOptions = ["", "general", "senior", "assisted"]
+  const neighborhoodOptions: SelectOption[] = [
+    { value: "", label: "" },
+    { value: "Foster City", label: "Foster City" },
+  ]
+
+  function setPageAndFilterState(page: number, filters = filterState) {
+    if (page != currentPage || filters != filterState) {
+      setCurrentPage(page)
+      setFilterState(filters)
+      // TODO(abbiefarr): update the url with filter data (#240)
       void router.push(
         {
           pathname: "/listings",
-          query: { page: page },
+          query: {
+            page: page,
+          },
         },
         undefined,
         { shallow: true }
       )
-      setCurrentPage(page)
     }
   }
 
-  // Checks if the url is updated manually.
+  // Checks for changes in url params.
   useEffect(() => {
     if (router.query.page && Number(router.query.page) != currentPage) {
       setCurrentPage(Number(router.query.page))
     }
-  }, [currentPage, router.query.page])
+    // TODO(abbiefarr): update filter params if the url is manually updated (#240)
+  }, [router.query])
 
-  const { listingsData, listingsLoading } = useListingsData(currentPage, itemsPerPage)
+  const { listingsData, listingsLoading } = useListingsData(currentPage, itemsPerPage, filterState)
 
   const pageTitle = `${t("pageTitle.rent")} - ${t("nav.siteTitle")}`
   const metaDescription = t("pageDescription.welcome", { regionName: t("region.name") })
   const metaImage = "" // TODO: replace with hero image
-  const [filterModalVisible, setFilterModalVisible] = useState<boolean>(false)
-  const [filterDrawerVisible, setFilterDrawerVisible] = useState<boolean>(false)
 
-  const preferredUnitOptions = ["1", "2", "3", "4", "studio"]
-  const accessibilityOptions = ["n", "y"]
-  const communityOptions = ["general", "senior", "assisted"]
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { handleSubmit, register } = useForm()
-  const onSubmit = () => {
-    // Not yet implemented.
+  const onSubmit = (data: FilterOptions) => {
+    setFilterModalVisible(false)
+    setPageAndFilterState(/*page=*/ 1, data)
   }
 
   return (
@@ -76,92 +89,67 @@ const ListingsPage = () => {
       <Modal
         open={filterModalVisible}
         title={t("listingFilters.modalTitle")}
-        actions={[
-          <Button
-            onClick={() => setFilterModalVisible(false)}
-            styleType={AppearanceStyleType.primary}
-          >
-            Apply
-          </Button>,
-          <Button
-            onClick={() => setFilterModalVisible(false)}
-            styleType={AppearanceStyleType.secondary}
-            border={AppearanceBorderType.borderless}
-          >
-            Close
-          </Button>,
-        ]}
+        actions={[]}
         hideCloseIcon
       >
         <Form onSubmit={handleSubmit(onSubmit)}>
           <div className="form-card__group">
             <p className="field-note mb-4">{t("listingFilters.modalHeader")}</p>
             <Select
-              id="filter.unitOptions"
-              name="filter.unitOptions"
+              id="unitOptions"
+              name="preferredUnit"
               label={t("listingFilters.unitOptions.label")}
-              validation={{ required: true }}
               register={register}
               controlClassName="control"
               options={preferredUnitOptions}
               keyPrefix="listingFilters.unitOptions.unitOptionsTypes"
+              defaultValue={filterState?.preferredUnit}
             />
             <Select
-              id="filter.accessibilityOptions"
-              name="filter.accessibilityOptions"
+              id="accessibilityOptions"
+              name="accessibility"
               label={t("listingFilters.accessibilityOptions.label")}
-              validation={{ required: true }}
               register={register}
               controlClassName="control"
               options={accessibilityOptions}
               keyPrefix="listingFilters.accessibilityOptions.accessibilityOptionsTypes"
+              defaultValue={filterState?.accessibility}
             />
             <Select
-              id="filter.communityOptions"
-              name="filter.communityOptions"
+              id="communityOptions"
+              name="community"
               label={t("listingFilters.communityOptions.label")}
-              validation={{ required: true }}
               register={register}
               controlClassName="control"
               options={communityOptions}
               keyPrefix="listingFilters.communityOptions.communityOptionsTypes"
+              defaultValue={filterState?.community}
+            />
+            <Select
+              id="neighborhoodOptions"
+              name="neighborhood"
+              label={t("listingFilters.neighborhoodOptions.label")}
+              register={register}
+              controlClassName="control"
+              options={neighborhoodOptions}
+              defaultValue={filterState?.neighborhood}
             />
           </div>
+          <div className="text-center mt-6">
+            <Button styleType={AppearanceStyleType.primary}>Apply Filters</Button>
+          </div>
+          <div className="text-center mt-6">
+            <a href="#" onClick={() => setFilterModalVisible(false)}>
+              {t("t.cancel")}
+            </a>
+          </div>
         </Form>
       </Modal>
-      <Drawer
-        open={filterDrawerVisible}
-        title="Drawer Title"
-        onClose={() => setFilterDrawerVisible(false)}
-        actions={[
-          <Button
-            key={0}
-            onClick={() => setFilterDrawerVisible(false)}
-            styleType={AppearanceStyleType.primary}
-          >
-            Submit
-          </Button>,
-          <Button
-            key={1}
-            onClick={() => setFilterDrawerVisible(false)}
-            styleType={AppearanceStyleType.secondary}
-            border={AppearanceBorderType.borderless}
-          >
-            Cancel
-          </Button>,
-        ]}
-      >
-        <p>Placeholder for future text</p>
-      </Drawer>
       <div className="max-w-3xl m-auto">
         <Button size={AppearanceSizeType.small} onClick={() => setFilterModalVisible(true)}>
           {/* TODO:avaleske make this a string */}
           Filter listings
         </Button>
-        <Button size={AppearanceSizeType.small} onClick={() => setFilterDrawerVisible(true)}>
-          {/* TODO:avaleske make this a string */}
-          Filter listings (drawer)
-        </Button>
       </div>
       {!listingsLoading && (
         <div>
@@ -171,14 +159,12 @@ const ListingsPage = () => {
             totalPages={listingsData?.meta.totalPages}
             currentPage={currentPage}
             itemsPerPage={itemsPerPage}
-            sticky={true}
-            quantityLabel={t("listings.totalListings")}
-            setCurrentPage={setPage}
+            quantityLabel={t("applications.totalApplications")}
+            setCurrentPage={setPageAndFilterState}
           />
         </div>
       )}
     </Layout>
   )
 }
-
 export default ListingsPage

ui-components/src/locales/general.json

@@ -1236,6 +1236,9 @@
         "senior": "Senior",
         "assisted": "Assisted"
       }
+    },
+    "neighborhoodOptions":{
+      "label": "Neighborhood:"
     }
   },
   "eligibility": {