From f1f1434c9dd063c3d205b70e4c32a5d352e7a239 Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Thu, 10 Oct 2024 13:44:33 +0200 Subject: [PATCH] feat: SW-276 Optimized code --- .../Forms/BookingWidget/FormContent/index.tsx | 3 +- .../GuestsRoomsPicker/AdultSelector/index.tsx | 18 +++++---- .../ChildSelector/ChildInfoSelector.tsx | 39 +++++++------------ .../GuestsRoomsPicker/ChildSelector/index.tsx | 6 +-- .../GuestsRoomsPicker/GuestsRoomsPicker.tsx | 8 ++-- components/GuestsRoomsPicker/index.tsx | 5 ++- stores/guests-rooms.ts | 11 +++--- types/components/bookingWidget/enums.ts | 6 +-- 8 files changed, 45 insertions(+), 51 deletions(-) diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx index 4c50474bd..40c7533b4 100644 --- a/components/Forms/BookingWidget/FormContent/index.tsx +++ b/components/Forms/BookingWidget/FormContent/index.tsx @@ -5,12 +5,11 @@ import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import DatePicker from "@/components/DatePicker" +import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker" import { SearchIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" -import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker" import Caption from "@/components/TempDesignSystem/Text/Caption" -import Input from "./Input" import Search from "./Search" import Voucher from "./Voucher" diff --git a/components/GuestsRoomsPicker/AdultSelector/index.tsx b/components/GuestsRoomsPicker/AdultSelector/index.tsx index ef00e9332..579794ca8 100644 --- a/components/GuestsRoomsPicker/AdultSelector/index.tsx +++ b/components/GuestsRoomsPicker/AdultSelector/index.tsx @@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { guestsRoomsStore } from "@/stores/guests-rooms" +import { useGuestsRoomsStore } from "@/stores/guests-rooms" import { MinusIcon, PlusIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" @@ -13,15 +13,19 @@ import Caption from "@/components/TempDesignSystem/Text/Caption" import styles from "./adult-selector.module.css" import { BedTypeEnum } from "@/types/components/bookingWidget/enums" -import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker" +import { + AdultSelectorProps, + Child, +} from "@/types/components/bookingWidget/guestsRoomsPicker" export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) { const intl = useIntl() const adultsLabel = intl.formatMessage({ id: "Adults" }) - const { setValue } = useFormContext() - const { adults, children, childrenInAdultsBed } = - guestsRoomsStore().rooms[roomIndex] - const { increaseAdults, decreaseAdults } = guestsRoomsStore() + const { register, setValue } = useFormContext() + const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore( + (state) => state.rooms[roomIndex] + ) + const { increaseAdults, decreaseAdults } = useGuestsRoomsStore() function increaseAdultsCount(roomIndex: number) { if (adults < 6) { @@ -36,7 +40,7 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) { setValue(`rooms.${roomIndex}.adults`, adults - 1) if (childrenInAdultsBed > adults) { const toUpdateIndex = children.findIndex( - (child, index) => child.bed == BedTypeEnum["In adults bed"] + (child: Child) => child.bed == BedTypeEnum.IN_ADULTS_BED ) if (toUpdateIndex != -1) { setValue( diff --git a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx index bf64e7dd7..332a29a89 100644 --- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx +++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx @@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { guestsRoomsStore } from "@/stores/guests-rooms" +import { useGuestsRoomsStore } from "@/stores/guests-rooms" import { ErrorCircleIcon } from "@/components/Icons" import Select from "@/components/TempDesignSystem/Select" @@ -27,30 +27,21 @@ export default function ChildInfoSelector({ const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" }) const bedLabel = intl.formatMessage({ id: "Bed" }) const { setValue } = useFormContext() - const { adults, childrenInAdultsBed } = guestsRoomsStore().rooms[roomIndex] + const { adults, childrenInAdultsBed } = useGuestsRoomsStore( + (state) => state.rooms[roomIndex] + ) const { isValidated, updateChildAge, updateChildBed, increaseChildInAdultsBed, decreaseChildInAdultsBed, - } = guestsRoomsStore() + } = useGuestsRoomsStore() - const ageList = [ - { label: "0", value: 0 }, - { label: "1", value: 1 }, - { label: "2", value: 2 }, - { label: "3", value: 3 }, - { label: "4", value: 4 }, - { label: "5", value: 5 }, - { label: "6", value: 6 }, - { label: "7", value: 7 }, - { label: "8", value: 8 }, - { label: "9", value: 9 }, - { label: "10", value: 10 }, - { label: "11", value: 11 }, - { label: "12", value: 12 }, - ] + const ageList = Array.from(Array(13).keys()).map((age) => ({ + label: `${age}`, + value: age, + })) function updateSelectedAge(age: number) { updateChildAge(age, roomIndex, index) @@ -62,9 +53,9 @@ export default function ChildInfoSelector({ } function updateSelectedBed(bed: number) { - if (bed == BedTypeEnum["In adults bed"]) { + if (bed == BedTypeEnum.IN_ADULTS_BED) { increaseChildInAdultsBed(roomIndex) - } else if (child.bed == BedTypeEnum["In adults bed"]) { + } else if (child.bed == BedTypeEnum.IN_ADULTS_BED) { decreaseChildInAdultsBed(roomIndex) } updateChildBed(bed, roomIndex, index) @@ -74,15 +65,15 @@ export default function ChildInfoSelector({ const allBedTypes: ChildBed[] = [ { label: intl.formatMessage({ id: "In adults bed" }), - value: BedTypeEnum["In adults bed"], + value: BedTypeEnum.IN_ADULTS_BED, }, { label: intl.formatMessage({ id: "In crib" }), - value: BedTypeEnum["In crib"], + value: BedTypeEnum.IN_CRIB, }, { label: intl.formatMessage({ id: "In extra bed" }), - value: BedTypeEnum["In extra bed"], + value: BedTypeEnum.IN_EXTRA_BED, }, ] @@ -136,7 +127,7 @@ export default function ChildInfoSelector({ {isValidated && child.age < 0 ? ( - {intl.formatMessage({ id: "Child age is required" })} + {ageReqdErrMsg} ) : null} diff --git a/components/GuestsRoomsPicker/ChildSelector/index.tsx b/components/GuestsRoomsPicker/ChildSelector/index.tsx index c22c6a639..226d3f4b0 100644 --- a/components/GuestsRoomsPicker/ChildSelector/index.tsx +++ b/components/GuestsRoomsPicker/ChildSelector/index.tsx @@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { guestsRoomsStore } from "@/stores/guests-rooms" +import { useGuestsRoomsStore } from "@/stores/guests-rooms" import { MinusIcon, PlusIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" @@ -20,8 +20,8 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) { const intl = useIntl() const childrenLabel = intl.formatMessage({ id: "Children" }) const { setValue } = useFormContext() - const children = guestsRoomsStore().rooms[roomIndex].children - const { increaseChildren, decreaseChildren, childCount } = guestsRoomsStore() + const { children } = useGuestsRoomsStore((state) => state.rooms[roomIndex]) + const { increaseChildren, decreaseChildren } = useGuestsRoomsStore() function increaseChildrenCount(roomIndex: number) { if (children.length < 5) { diff --git a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx index a8e694010..c24967285 100644 --- a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx +++ b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx @@ -1,7 +1,7 @@ "use client" import { useIntl } from "react-intl" -import { guestsRoomsStore } from "@/stores/guests-rooms" +import { useGuestsRoomsStore } from "@/stores/guests-rooms" import { guestRoomsSchema } from "../Forms/BookingWidget/schema" import { CloseLarge } from "../Icons" @@ -21,8 +21,8 @@ export default function GuestsRoomsPicker({ const intl = useIntl() const doneLabel = intl.formatMessage({ id: "Done" }) - const guestsData = guestsRoomsStore().rooms - const guestRoomsValidData = guestRoomsSchema.safeParse(guestsData) + const rooms = useGuestsRoomsStore((state) => state.rooms) + const guestRoomsValidData = guestRoomsSchema.safeParse(rooms) const isInValid = !guestRoomsValidData.success const roomLabel = intl.formatMessage({ id: "Room" }) @@ -36,7 +36,7 @@ export default function GuestsRoomsPicker({ - {guestsData.map((room, index) => ( + {rooms.map((room, index) => (
diff --git a/components/GuestsRoomsPicker/index.tsx b/components/GuestsRoomsPicker/index.tsx index 000fe4c87..8a1b4361d 100644 --- a/components/GuestsRoomsPicker/index.tsx +++ b/components/GuestsRoomsPicker/index.tsx @@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react" import { useIntl } from "react-intl" -import { guestsRoomsStore } from "@/stores/guests-rooms" +import { useGuestsRoomsStore } from "@/stores/guests-rooms" import { guestRoomsSchema } from "@/components/Forms/BookingWidget/schema" import Body from "@/components/TempDesignSystem/Text/Body" @@ -15,7 +15,8 @@ import styles from "./guests-rooms-picker.module.css" export default function GuestsRoomsPickerForm() { const intl = useIntl() const [isOpen, setIsOpen] = useState(false) - const { rooms, adultCount, childCount, setIsValidated } = guestsRoomsStore() + const { rooms, adultCount, childCount, setIsValidated } = + useGuestsRoomsStore() const ref = useRef(null) function handleOnClick() { setIsOpen((prevIsOpen) => !prevIsOpen) diff --git a/stores/guests-rooms.ts b/stores/guests-rooms.ts index b5062b923..909e2f08c 100644 --- a/stores/guests-rooms.ts +++ b/stores/guests-rooms.ts @@ -30,7 +30,7 @@ interface GuestsRooms { setIsValidated: (status: boolean) => void } -export const guestsRoomsStore = create((set, get) => ({ +export const useGuestsRoomsStore = create((set, get) => ({ rooms: [ { adults: 1, @@ -58,13 +58,13 @@ export const guestsRoomsStore = create((set, get) => ({ state.rooms[roomIndex].adults ) { const toUpdateIndex = state.rooms[roomIndex].children.findIndex( - (child) => child.bed == BedTypeEnum["In adults bed"] + (child) => child.bed == BedTypeEnum.IN_ADULTS_BED ) if (toUpdateIndex != -1) { state.rooms[roomIndex].children[toUpdateIndex].bed = state.rooms[roomIndex].children[toUpdateIndex].age < 3 - ? BedTypeEnum["In crib"] - : BedTypeEnum["In extra bed"] + ? BedTypeEnum.IN_CRIB + : BedTypeEnum.IN_EXTRA_BED state.rooms[roomIndex].childrenInAdultsBed = state.rooms[roomIndex].adults } @@ -87,8 +87,7 @@ export const guestsRoomsStore = create((set, get) => ({ const roomChildren = state.rooms[roomIndex].children if ( roomChildren.length && - roomChildren[roomChildren.length - 1].bed == - BedTypeEnum["In adults bed"] + roomChildren[roomChildren.length - 1].bed == BedTypeEnum.IN_ADULTS_BED ) { state.rooms[roomIndex].childrenInAdultsBed = state.rooms[roomIndex].childrenInAdultsBed - 1 diff --git a/types/components/bookingWidget/enums.ts b/types/components/bookingWidget/enums.ts index 9fd14a9af..ae63ad571 100644 --- a/types/components/bookingWidget/enums.ts +++ b/types/components/bookingWidget/enums.ts @@ -1,5 +1,5 @@ export enum BedTypeEnum { - "In adults bed" = 0, - "In crib" = 1, - "In extra bed" = 2, + IN_ADULTS_BED = 0, + IN_CRIB = 1, + IN_EXTRA_BED = 2, }