Fix modal content filters

refs #49
franthormel · Aug 18, 2024 · c5b28c2 · c5b28c2
1 parent 5caf46e
commit c5b28c2
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 13 deletions.
diff --git a/app/listings/filter-beds-baths.tsx b/app/listings/filter-beds-baths.tsx
@@ -9,6 +9,8 @@ import { BEDS_BATHS_DEFAULT, BEDS_BATHS_FILTER } from "./constants"
 import { ListingsContext } from "./provider"
 
 export default function ListingsFiltersBedsBaths() {
+
+    // TODO: (Beds/baths filter) Make sure values are the same
     const [beds, setBeds] = useState<number>(BEDS_BATHS_DEFAULT)
     const [baths, setBaths] = useState<number>(BEDS_BATHS_DEFAULT)
 

diff --git a/app/listings/filter-price.tsx b/app/listings/filter-price.tsx
@@ -16,6 +16,7 @@ export default function ListingsFilterPrice() {
     const minPricePlaceholder = "None"
     const maxPricePlaceholder = CURRENCY_FORMATTER.format(PRICE_MAX_FILTER)
 
+    // TODO: (Price filter) Make sure values are the same
     const [minPrice, setMinPrice] = useState<number>(PRICE_MIN_FILTER)
     const [maxPrice, setMaxPrice] = useState<number>(PRICE_MAX_FILTER)
 

diff --git a/app/listings/filters-area.tsx b/app/listings/filters-area.tsx
@@ -15,6 +15,7 @@ import { ListingsContext } from "./provider"
 export default function ListingsFilterArea() {
     const maxAreaPlaceholder = formatAppend(AREA_MAX_INPUT, "sqm.")
 
+    // TODO: (Area filter) Make sure values are the same
     const [minArea, setMinArea] = useState<number>(AREA_MIN_FILTER)
     const [maxArea, setMaxArea] = useState<number>(AREA_MAX_FILTER)
 

diff --git a/app/listings/search-filters-modal-content.tsx b/app/listings/search-filters-modal-content.tsx
@@ -1,29 +1,48 @@
+import ButtonsSegmentedLabelled from "@/components/buttons-segmented/labelled";
 import ButtonFilled from "@/components/buttons/filled";
+import FormInput from "@/components/form-input";
 import FormInputReset from "@/components/form-input/reset";
-import ListingsFiltersBedsBaths from "./filter-beds-baths";
-import ListingsFilterPrice from "./filter-price";
-import ListingsFilterArea from "./filters-area";
+import { BEDS_BATHS_FILTER } from "./constants";
 
 export default function ListingsSearchFiltersModalContent() {
-    // TODO: Fix display of search filters
+    // TODO: Add input actions
     return (
         <div className="flex flex-col gap-8 p-8">
             <header className="text-2xl font-bold">
                 Filters
             </header>
             {/* Price */}
-            <div className="max-w-[80%]">
-                <ListingsFilterPrice />
+            {/* TODO: (Price filter) Make sure values are the same */}
+            <div className="max-w-[80%] gap-5">
+                <FormInput label="Minimum Price"
+                    name="price-min"
+                    type="number" />
+                <FormInput label="Maximum Price"
+                    name="price-max"
+                    type="number" />
             </div>
-            {/* Beds/Baths */}
-            <div className="flex">
-                <ListingsFiltersBedsBaths />
+            {/* TODO: (Beds/baths filter) Make sure values are the same */}
+            <div className="flex flex-col gap-5">
+                <ButtonsSegmentedLabelled label="Beds"
+                    values={BEDS_BATHS_FILTER}
+                    activeIndex={0} />
+                <ButtonsSegmentedLabelled label="Baths"
+                    values={BEDS_BATHS_FILTER}
+                    activeIndex={0} />
             </div>
             {/* Area */}
-            <div className="max-w-[80%]">
-                <ListingsFilterArea />
+            {/* TODO: (Area filter) Make sure values are the same */}
+            <div className="max-w-[80%] gap-5">
+                <div className="max-w-[80%]">
+                    <FormInput label="Minimum Area"
+                        name="area-min"
+                        type="number" />
+                    <FormInput label="Maximum Area"
+                        name="area-min"
+                        type="number" />
+                </div>
             </div>
-            {/* Reset and Search buttons */}
+            {/* TODO: Reset and Search buttons */}
             <div className="flex justify-center gap-10">
                 <FormInputReset />
                 <ButtonFilled text="Search" />

diff --git a/lib/validation/listing/validators.ts b/lib/validation/listing/validators.ts
@@ -1,6 +1,6 @@
-import { NUMBER_FORMATTER } from "@/lib/formatter/number";
 import { z } from "zod";
 import { CURRENCY_FORMATTER } from "../../formatter/currency";
+import { NUMBER_FORMATTER } from "../../formatter/number";
 
 // Price
 const PRICE_MIN = Number(process.env.LISTING_PRICE_MIN ?? 100);