todo: Add Area search filter

refs #49
franthormel · Aug 17, 2024 · 03babd2 · 03babd2
1 parent fe78717
commit 03babd2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/app/listings/constants.ts b/app/listings/constants.ts
@@ -13,3 +13,13 @@ export const BEDS_BATHS_FILTER = ["Any", "1", "2", "3", "4", "5+"];
  * * Default value is `Any`
  */
 export const BEDS_BATHS_DEFAULT = 0;
+
+export const AREA_DEFAULT_INPUT_MIN_FILTER = 0;
+/**
+ * Placeholder value for maximum area input field.
+ */
+export const AREA_DEFAULT_MAX_FILTER = 1_000;
+/**
+ * Maximum input value for the maximum area input field.
+ */
+export const AREA_INPUT_MAX_FILTER = 1_000_000;
diff --git a/app/listings/filters-area.tsx b/app/listings/filters-area.tsx
@@ -6,12 +6,10 @@ import Dropdown from "@/components/dropdown"
 import FormInput from "@/components/form-input"
 import { formatAppend } from "@/lib/formatter/number"
 import { useState } from "react"
+import { AREA_DEFAULT_MAX_FILTER } from "./constants"
 
 export default function ListingsFilterArea() {
-    const DEFAULT_MAX = 20
-
-    const minAreaPlaceholder = "None"
-    const maxAreaPlaceholder = formatAppend(DEFAULT_MAX, "sqm.")
+    const maxAreaPlaceholder = formatAppend(AREA_DEFAULT_MAX_FILTER, "sqm.")
 
     const [displayDropdown, setDisplayDropdown] = useState<boolean>(false)
 
@@ -27,7 +25,7 @@ export default function ListingsFilterArea() {
                 <div className="flex w-24 flex-col gap-5 xl:w-56">
                     <FormInput label="Minimum Area"
                         name="area-min"
-                        placeholder={minAreaPlaceholder} />
+                        placeholder="None" />
                     <FormInput label="Maximum Area"
                         name="area-min"
                         placeholder={maxAreaPlaceholder} />

diff --git a/app/listings/provider.tsx b/app/listings/provider.tsx
@@ -1,21 +1,24 @@
 "use client"
 
 import { createContext, useState } from "react"
-import { BEDS_BATHS_DEFAULT, PRICE_MAX_FILTER, PRICE_MIN_FILTER, STARTING_PAGE } from "./constants"
+import { AREA_DEFAULT_INPUT_MIN_FILTER, AREA_DEFAULT_MAX_FILTER, BEDS_BATHS_DEFAULT, PRICE_MAX_FILTER, PRICE_MIN_FILTER, STARTING_PAGE } from "./constants"
 
 type ContextTypeNumber = {
     value: number,
     change: (value: number) => void
 }
 
+type ContenTypeNumberRange = {
+    min: ContextTypeNumber,
+    max: ContextTypeNumber
+}
+
 interface ListingsContextInterface {
     searchFilters: {
-        price: {
-            min: ContextTypeNumber,
-            max: ContextTypeNumber
-        },
+        price: ContenTypeNumberRange,
         beds: ContextTypeNumber,
-        baths: ContextTypeNumber
+        baths: ContextTypeNumber,
+        area: ContenTypeNumberRange
     },
     pagination: {
         changeToPreviousPage: () => void,
@@ -44,6 +47,16 @@ export const ListingsContext = createContext<ListingsContextInterface>({
             value: BEDS_BATHS_DEFAULT,
             change: (value) => { }
         },
+        area: {
+            min: {
+                value: AREA_DEFAULT_INPUT_MIN_FILTER,
+                change: (value) => { }
+            },
+            max: {
+                value: AREA_DEFAULT_MAX_FILTER,
+                change: (value) => { }
+            }
+        },
     },
     pagination: {
         changeToPreviousPage: () => { },
@@ -62,6 +75,9 @@ export default function ListingsProvider({ children }: { children: React.ReactNo
     const [bedsFilter, setBedsFilter] = useState<number>(BEDS_BATHS_DEFAULT)
     const [bathsFilter, setBathsFilter] = useState<number>(BEDS_BATHS_DEFAULT)
 
+    const [minAreaFilter, setMinAreaFilter] = useState<number>(AREA_DEFAULT_INPUT_MIN_FILTER)
+    const [maxAreaFilter, setMaxAreaFilter] = useState<number>(AREA_DEFAULT_MAX_FILTER)
+
     const [currentPage, setCurrentPage] = useState<number>(STARTING_PAGE);
 
     const stateValue: ListingsContextInterface = {
@@ -91,6 +107,20 @@ export default function ListingsProvider({ children }: { children: React.ReactNo
                 change: (value) => {
                     setBathsFilter(value)
                 }
+            },
+            area: {
+                min: {
+                    value: minAreaFilter,
+                    change: (value) => {
+                        setMinAreaFilter(value)
+                    }
+                },
+                max: {
+                    value: maxAreaFilter,
+                    change: (value) => {
+                        setMaxAreaFilter(value)
+                    }
+                }
             }
         },
         pagination: {

diff --git a/app/listings/search-filters-modal-content.tsx b/app/listings/search-filters-modal-content.tsx
@@ -5,6 +5,7 @@ import ListingsFilterPrice from "./filter-price";
 import ListingsFilterArea from "./filters-area";
 
 export default function ListingsSearchFiltersModalContent() {
+    // TODO: Fix display of search filters
     return (
         <div className="flex flex-col gap-8 p-8">
             <header className="text-2xl font-bold">