Fix modal content filters

refs #49
franthormel · Aug 19, 2024 · 34e8822 · 34e8822
1 parent 5caf46e
commit 34e8822
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 35 deletions.
diff --git a/app/listings/constants.ts b/app/listings/constants.ts
@@ -1,4 +1,4 @@
-export const LISTINGS_PER_PAGE = 5;
+export const LISTINGS_PER_PAGE = 15;
 export const STARTING_PAGE = 1;
 
 export const PRICE_MIN_FILTER = 0;

diff --git a/app/listings/filter-beds-baths.tsx b/app/listings/filter-beds-baths.tsx
@@ -9,10 +9,12 @@ import { BEDS_BATHS_DEFAULT, BEDS_BATHS_FILTER } from "./constants"
 import { ListingsContext } from "./provider"
 
 export default function ListingsFiltersBedsBaths() {
-    const [beds, setBeds] = useState<number>(BEDS_BATHS_DEFAULT)
-    const [baths, setBaths] = useState<number>(BEDS_BATHS_DEFAULT)
-
     const context = useContext(ListingsContext)
+
+    // TODO: (Beds/baths filter) Make sure values are the same
+    const [beds, setBeds] = useState<number>(context.searchFilters.beds.value)
+    const [baths, setBaths] = useState<number>(context.searchFilters.baths.value)
+
     const [displayDropdown, setDisplayDropdown] = useState<boolean>(false)
 
     return (

diff --git a/app/listings/filter-price.tsx b/app/listings/filter-price.tsx
@@ -13,11 +13,13 @@ import { PRICE_MAX_FILTER, PRICE_MIN_FILTER } from "./constants"
 import { ListingsContext } from "./provider"
 
 export default function ListingsFilterPrice() {
-    const minPricePlaceholder = "None"
     const maxPricePlaceholder = CURRENCY_FORMATTER.format(PRICE_MAX_FILTER)
 
-    const [minPrice, setMinPrice] = useState<number>(PRICE_MIN_FILTER)
-    const [maxPrice, setMaxPrice] = useState<number>(PRICE_MAX_FILTER)
+    const context = useContext(ListingsContext)
+
+    // TODO: (Price filter) Make sure values are the same
+    const [minPrice, setMinPrice] = useState<number>(context.searchFilters.price.min.value)
+    const [maxPrice, setMaxPrice] = useState<number>(context.searchFilters.price.max.value)
 
     const [minPriceError, setMinPriceError] = useState<string | undefined>(undefined)
     const [maxPriceError, setMaxPriceError] = useState<string | undefined>(undefined)
@@ -26,7 +28,6 @@ export default function ListingsFilterPrice() {
     const [minPriceValidator, setMinPriceValidator] = useState<ZodNumber>(defaultValidator)
     const [maxPriceValidator, setMaxPriceValidator] = useState<ZodNumber>(defaultValidator)
 
-    const context = useContext(ListingsContext)
     const [displayDropdown, setDisplayDropdown] = useState<boolean>(false)
 
     return (
@@ -42,7 +43,7 @@ export default function ListingsFilterPrice() {
                     <FormInput label="Minimum Price"
                         name="price-min"
                         type="number"
-                        placeholder={minPricePlaceholder}
+                        placeholder="None"
                         value={minPrice}
                         min={PRICE_MIN_FILTER}
                         max={maxPrice}

diff --git a/app/listings/filters-area.tsx b/app/listings/filters-area.tsx
@@ -15,8 +15,11 @@ import { ListingsContext } from "./provider"
 export default function ListingsFilterArea() {
     const maxAreaPlaceholder = formatAppend(AREA_MAX_INPUT, "sqm.")
 
-    const [minArea, setMinArea] = useState<number>(AREA_MIN_FILTER)
-    const [maxArea, setMaxArea] = useState<number>(AREA_MAX_FILTER)
+    const context = useContext(ListingsContext)
+
+    // TODO: (Area filter) Make sure values are the same
+    const [minArea, setMinArea] = useState<number>(context.searchFilters.area.min.value)
+    const [maxArea, setMaxArea] = useState<number>(context.searchFilters.area.max.value)
 
     const [minAreaError, setMinAreaError] = useState<string | undefined>(undefined)
     const [maxAreaError, setMaxAreaError] = useState<string | undefined>(undefined)
@@ -25,7 +28,6 @@ export default function ListingsFilterArea() {
     const [minAreaValidator, setMinAreaValidator] = useState<ZodNumber>(defaultValidator)
     const [maxAreaValidator, setMaxAreaValidator] = useState<ZodNumber>(defaultValidator)
 
-    const context = useContext(ListingsContext)
     const [displayDropdown, setDisplayDropdown] = useState<boolean>(false)
 
     return (
@@ -52,7 +54,6 @@ export default function ListingsFilterArea() {
 
                             if (result.success) {
                                 setMinAreaError(undefined)
-                                // Only change value if validation is successful
                                 setMaxAreaValidator(customizeAreaValidator(value, AREA_MAX_FILTER))
                                 setMinArea(value)
                             } else {
@@ -74,7 +75,6 @@ export default function ListingsFilterArea() {
 
                             if (result.success) {
                                 setMaxAreaError(undefined)
-                                // Only change value if validation is successful
                                 setMinAreaValidator(customizeAreaValidator(AREA_MIN_FILTER, value))
                                 setMaxArea(value)
                             } else {

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 />
+        <div className="flex flex-col gap-16 p-8">
+            <div className="flex flex-col gap-8">
+                <header className="text-2xl font-bold">
+                    Filters
+                </header>
+                {/* Price */}
+                {/* 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>
+                {/* 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 */}
+                {/* TODO: (Area filter) Make sure values are the same */}
+                <div className="max-w-[80%] gap-5">
+                    <FormInput label="Minimum Area"
+                        name="area-min"
+                        type="number" />
+                    <FormInput label="Maximum Area"
+                        name="area-min"
+                        type="number" />
+                </div>
             </div>
-            {/* Beds/Baths */}
-            <div className="flex">
-                <ListingsFiltersBedsBaths />
-            </div>
-            {/* Area */}
-            <div className="max-w-[80%]">
-                <ListingsFilterArea />
-            </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);