From 03babd273e4119c7d0b7d6a85dca36c4385bf0da Mon Sep 17 00:00:00 2001
From: Francis Anthony <fcaboyo@gmail.com>
Date: Sat, 17 Aug 2024 14:27:39 +0800
Subject: [PATCH] todo: Add Area search filter

refs #49
---
 app/listings/constants.ts                     | 10 +++++
 app/listings/filters-area.tsx                 |  8 ++--
 app/listings/provider.tsx                     | 42 ++++++++++++++++---
 app/listings/search-filters-modal-content.tsx |  1 +
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/app/listings/constants.ts b/app/listings/constants.ts
index df37aec9..2497a2bf 100644
--- 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
index ef04553c..c9fad675 100644
--- 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
index dfa18ea0..0b44e03a 100644
--- 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
index 71dca089..302a2160 100644
--- 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">