Convert beds baths option to enum

refs #49
franthormel · Aug 23, 2024 · 34e841e · 34e841e
1 parent 9739dcc
commit 34e841e
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 32 deletions.
diff --git a/app/listings/constants.ts b/app/listings/constants.ts
@@ -1,4 +1,4 @@
-import { ListingsSearchFilters } from "./types";
+import { BedsBathsOption, ListingsSearchFilters } from "./types";
 
 export const LISTINGS_PER_PAGE = 15;
 export const STARTING_PAGE = 1;
@@ -10,8 +10,15 @@ const PRICE_MAX_FILTER = 100_000_000;
  * The values to be used is its index.
  * For example, the `Any` label's value is `0`
  */
-export const BEDS_BATHS_OPTIONS = ["Any", "1", "2", "3", "4", "5+"];
-const BEDS_BATHS_DEFAULT = 0;
+export const BEDS_BATHS_OPTIONS = [
+  BedsBathsOption.ANY,
+  BedsBathsOption.ONE,
+  BedsBathsOption.TWO,
+  BedsBathsOption.THREE,
+  BedsBathsOption.FOUR,
+  BedsBathsOption.MORE_THAN_FIVE,
+];
+const BEDS_BATHS_DEFAULT = BedsBathsOption.ANY;
 
 const AREA_MIN_FILTER = 0;
 const AREA_MAX_FILTER = 1_000_000;

diff --git a/app/listings/filter-beds-baths.tsx b/app/listings/filter-beds-baths.tsx
@@ -7,15 +7,16 @@ import Dropdown from "@/components/dropdown"
 import { useContext, useEffect, useState } from "react"
 import { BEDS_BATHS_OPTIONS, DEFAULT_LIST_FILTERS } from "./constants"
 import { ListingsContext } from "./provider"
+import { BedsBathsOption } from "./types"
 
 export default function ListingsFiltersBedsBaths() {
     const context = useContext(ListingsContext)
 
     const contextBeds = context.searchFilters.beds.value;
     const contextBaths = context.searchFilters.baths.value;
 
-    const [beds, setBeds] = useState<number>(contextBeds)
-    const [baths, setBaths] = useState<number>(contextBaths)
+    const [beds, setBeds] = useState<BedsBathsOption>(contextBeds)
+    const [baths, setBaths] = useState<BedsBathsOption>(contextBaths)
 
     // Update the local values when the other filter values also change
     useEffect(() => {
@@ -27,6 +28,7 @@ export default function ListingsFiltersBedsBaths() {
     }, [contextBaths])
 
     const [displayDropdown, setDisplayDropdown] = useState<boolean>(false)
+    const options = Object.values(BedsBathsOption)
 
     return (
         <div className="hidden lg:flex">
@@ -40,15 +42,15 @@ export default function ListingsFiltersBedsBaths() {
                 <div className="flex w-64 flex-col gap-5 lg:w-72">
                     <ButtonsSegmentedLabelled label="Beds"
                         values={BEDS_BATHS_OPTIONS}
-                        activeIndex={beds}
-                        onCick={(index) => {
-                            setBeds(index)
+                        activeIndex={options.indexOf(beds)}
+                        onCick={(value, index) => {
+                            setBeds(options.at(index)!)
                         }} />
                     <ButtonsSegmentedLabelled label="Baths"
                         values={BEDS_BATHS_OPTIONS}
-                        activeIndex={baths}
-                        onCick={(index) => {
-                            setBaths(index)
+                        activeIndex={options.indexOf(baths)}
+                        onCick={(value, index) => {
+                            setBaths(options.at(index)!)
                         }} />
                     <div className="flex justify-evenly">
                         <ButtonSmallText text="Reset"

diff --git a/app/listings/provider.tsx b/app/listings/provider.tsx
@@ -2,7 +2,7 @@
 
 import { createContext, useState } from "react"
 import { DEFAULT_LIST_FILTERS, STARTING_PAGE } from "./constants"
-import { ContextTypeNumber, ListingSort, ListingsSearchFilters } from "./types"
+import { BedsBathsOption, ListingContextType, ListingSort, ListingsSearchFilters } from "./types"
 
 interface ListingsContextInterface {
     searchFilters: ListingsSearchFilters,
@@ -13,7 +13,7 @@ interface ListingsContextInterface {
     pagination: {
         changeToPreviousPage: () => void,
         changeToNextPage: () => void,
-        currentPage: ContextTypeNumber
+        currentPage: ListingContextType<number>
     }
 }
 
@@ -37,8 +37,8 @@ export default function ListingsProvider({ children }: { children: React.ReactNo
     const [minPriceFilter, setMinPriceFilter] = useState<number>(DEFAULT_LIST_FILTERS.price.min.value)
     const [maxPriceFilter, setMaxPriceFilter] = useState<number>(DEFAULT_LIST_FILTERS.price.max.value)
 
-    const [bedsFilter, setBedsFilter] = useState<number>(DEFAULT_LIST_FILTERS.beds.value)
-    const [bathsFilter, setBathsFilter] = useState<number>(DEFAULT_LIST_FILTERS.baths.value)
+    const [bedsFilter, setBedsFilter] = useState<BedsBathsOption>(DEFAULT_LIST_FILTERS.beds.value)
+    const [bathsFilter, setBathsFilter] = useState<BedsBathsOption>(DEFAULT_LIST_FILTERS.baths.value)
 
     const [minAreaFilter, setMinAreaFilter] = useState<number>(DEFAULT_LIST_FILTERS.area.min.value)
     const [maxAreaFilter, setMaxAreaFilter] = useState<number>(DEFAULT_LIST_FILTERS.area.max.value)

diff --git a/app/listings/search-filters-modal-content.tsx b/app/listings/search-filters-modal-content.tsx
@@ -12,6 +12,7 @@ import { useContext, useEffect, useState } from "react";
 import { ZodNumber } from "zod";
 import { BEDS_BATHS_OPTIONS, DEFAULT_LIST_FILTERS } from "./constants";
 import { ListingsContext } from "./provider";
+import { BedsBathsOption } from "./types";
 
 interface ListingsSearchFiltersModalContentProps {
     onSearch?: () => void
@@ -31,8 +32,8 @@ export default function ListingsSearchFiltersModalContent(props: ListingsSearchF
     const contextPriceMax = context.searchFilters.price.max.value
 
     // Local values
-    const [beds, setBeds] = useState<number>(contextBeds)
-    const [baths, setBaths] = useState<number>(contextBaths)
+    const [beds, setBeds] = useState<BedsBathsOption>(contextBeds)
+    const [baths, setBaths] = useState<BedsBathsOption>(contextBaths)
     const [areaMin, setAreaMin] = useState<number>(contextAreaMin)
     const [areaMax, setAreaMax] = useState<number>(contextAreaMax)
     const [priceMin, setPriceMin] = useState<number>(contextPriceMin)
@@ -58,6 +59,8 @@ export default function ListingsSearchFiltersModalContent(props: ListingsSearchF
     const [priceMinValidator, setPriceMinValidator] = useState<ZodNumber>(defaultPriceValidator)
     const [priceMaxValidator, setPriceMaxValidator] = useState<ZodNumber>(defaultPriceValidator)
 
+    const options = Object.values(BedsBathsOption)
+
     // Updates the local values when the other filter values also change
     useEffect(() => {
         setBeds(contextBeds)
@@ -143,15 +146,15 @@ export default function ListingsSearchFiltersModalContent(props: ListingsSearchF
                 <div className="flex flex-col gap-5">
                     <ButtonsSegmentedLabelled label="Beds"
                         values={BEDS_BATHS_OPTIONS}
-                        activeIndex={beds}
-                        onCick={(index) => {
-                            setBeds(index)
+                        activeIndex={options.indexOf(beds)}
+                        onCick={(value, index) => {
+                            setBeds(options.at(index)!)
                         }} />
                     <ButtonsSegmentedLabelled label="Baths"
                         values={BEDS_BATHS_OPTIONS}
-                        activeIndex={baths}
-                        onCick={(index) => {
-                            setBaths(index)
+                        activeIndex={options.indexOf(baths)}
+                        onCick={(value, index) => {
+                            setBaths(options.at(index)!)
                         }} />
                 </div>
                 {/* Area */}

diff --git a/app/listings/types.ts b/app/listings/types.ts
@@ -101,19 +101,28 @@ export class ListingSortCompareFunctions {
   }
 }
 
-export type ContextTypeNumber = {
-  value: number;
-  change: (value: number) => void;
+export type ListingContextType<Type> = {
+  value: Type;
+  change: (value: Type) => void;
 };
 
 type ContenTypeNumberRange = {
-  min: ContextTypeNumber;
-  max: ContextTypeNumber;
+  min: ListingContextType<number>;
+  max: ListingContextType<number>;
 };
 
 export interface ListingsSearchFilters {
   price: ContenTypeNumberRange;
-  beds: ContextTypeNumber;
-  baths: ContextTypeNumber;
+  beds: ListingContextType<BedsBathsOption>;
+  baths: ListingContextType<BedsBathsOption>;
   area: ContenTypeNumberRange;
 }
+
+export enum BedsBathsOption {
+  ANY = "Any",
+  ONE = "1",
+  TWO = "2",
+  THREE = "3",
+  FOUR = "4",
+  MORE_THAN_FIVE = "5+",
+}
diff --git a/components/buttons-segmented/index.tsx b/components/buttons-segmented/index.tsx
@@ -5,7 +5,7 @@ export interface ButtonsSegmentedProps {
      * Where `n` is the number of entries in `values` minus one (1).
      */
     activeIndex: number
-    onCick?: (index: number) => void
+    onCick?: (value: string, index: number) => void
 }
 
 export default function ButtonsSegmented(props: ButtonsSegmentedProps) {
@@ -23,7 +23,7 @@ export default function ButtonsSegmented(props: ButtonsSegmentedProps) {
                             ${!indexIsActive && 'hover:bg-amber-200'} `}
                         onClick={(e) => {
                             if (props.onCick) {
-                                props.onCick(index)
+                                props.onCick(value, index)
                             }
                         }}>
                         {value}