feat: SW-276 Optimized code

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -21,11 +21,12 @@ import {
 export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
   const intl = useIntl()
   const adultsLabel = intl.formatMessage({ id: "Adults" })
-  const { trigger, setValue } = useFormContext()
+  const { setValue } = useFormContext()
   const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
-    (state) => state.rooms[roomIndex]
+    (state) => ({ ...state.rooms[roomIndex] })
   )
-  const { increaseAdults, decreaseAdults } = useGuestsRoomsStore()
+  const increaseAdults = useGuestsRoomsStore.use.increaseAdults()
+  const decreaseAdults = useGuestsRoomsStore.use.decreaseAdults()
 
   function increaseAdultsCount(roomIndex: number) {
     if (adults < 6) {
@@ -45,9 +46,10 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
         if (toUpdateIndex != -1) {
           setValue(
             `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
-            children[toUpdateIndex].age < 3 ? 1 : 2
+            children[toUpdateIndex].age < 3
+              ? BedTypeEnum.IN_CRIB
+              : BedTypeEnum.IN_EXTRA_BED
           )
-          trigger()
         }
       }
     }

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -30,13 +30,13 @@ export default function ChildInfoSelector({
   const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex]
   )
-  const {
-    isValidated,
-    updateChildAge,
-    updateChildBed,
-    increaseChildInAdultsBed,
-    decreaseChildInAdultsBed,
-  } = useGuestsRoomsStore()
+  const isValidated = useGuestsRoomsStore.use.isValidated()
+  const updateChildAge = useGuestsRoomsStore.use.updateChildAge()
+  const updateChildBed = useGuestsRoomsStore.use.updateChildBed()
+  const increaseChildInAdultsBed =
+    useGuestsRoomsStore.use.increaseChildInAdultsBed()
+  const decreaseChildInAdultsBed =
+    useGuestsRoomsStore.use.decreaseChildInAdultsBed()
 
   const ageList = Array.from(Array(13).keys()).map((age) => ({
     label: `${age}`,
@@ -48,6 +48,7 @@ export default function ChildInfoSelector({
     setValue(`rooms.${roomIndex}.children.${index}.age`, age)
     const availableBedTypes = getAvailableBeds(age)
     updateSelectedBed(availableBedTypes[0].value)
+    trigger("rooms")
   }
 
   function updateSelectedBed(bed: number) {
@@ -58,7 +59,6 @@ export default function ChildInfoSelector({
     }
     updateChildBed(bed, roomIndex, index)
     setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
-    trigger()
   }
 
   const allBedTypes: ChildBed[] = [
@@ -101,7 +101,7 @@ export default function ChildInfoSelector({
             aria-label={ageLabel}
             value={child.age}
             onSelect={(key) => {
-              updateSelectedAge(parseInt(key.toString()))
+              updateSelectedAge(key as number)
             }}
             name={`rooms.${roomIndex}.children.${index}.age`}
             placeholder={ageLabel}
@@ -115,7 +115,7 @@ export default function ChildInfoSelector({
               aria-label={bedLabel}
               value={child.bed}
               onSelect={(key) => {
-                updateSelectedBed(parseInt(key.toString()))
+                updateSelectedBed(key as number)
               }}
               name={`rooms.${roomIndex}.children.${index}.age`}
               placeholder={bedLabel}

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -21,8 +21,11 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
   const { setValue, trigger } = useFormContext<BookingWidgetSchema>()
-  const { children } = useGuestsRoomsStore((state) => state.rooms[roomIndex])
-  const { increaseChildren, decreaseChildren } = useGuestsRoomsStore()
+  const children = useGuestsRoomsStore(
+    (state) => state.rooms[roomIndex].children
+  )
+  const increaseChildren = useGuestsRoomsStore.use.increaseChildren()
+  const decreaseChildren = useGuestsRoomsStore.use.decreaseChildren()
 
   function increaseChildrenCount(roomIndex: number) {
     if (children.length < 5) {
@@ -36,11 +39,9 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   }
   function decreaseChildrenCount(roomIndex: number) {
     if (children.length > 0) {
-      decreaseChildren(roomIndex)
-      let newChildrenList = JSON.parse(JSON.stringify(children))
-      newChildrenList.pop()
+      const newChildrenList = decreaseChildren(roomIndex)
       setValue(`rooms.${roomIndex}.children`, newChildrenList)
-      trigger()
+      trigger("rooms")
     }
   }
 

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
-import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
 import { CloseLarge } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
@@ -26,7 +25,7 @@ export default function GuestsRoomsPicker({
 
   const { getFieldState } = useFormContext<BookingWidgetSchema>()
 
-  const rooms = useGuestsRoomsStore((state) => state.rooms)
+  const rooms = useGuestsRoomsStore.use.rooms()
 
   // Not in MVP
   // const { increaseRoom, decreaseRoom } = guestsRoomsStore()

components/GuestsRoomsPicker/index.tsx

@@ -15,8 +15,10 @@ 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 } =
-    useGuestsRoomsStore()
+  const rooms = useGuestsRoomsStore.use.rooms()
+  const adultCount = useGuestsRoomsStore.use.adultCount()
+  const childCount = useGuestsRoomsStore.use.childCount()
+  const setIsValidated = useGuestsRoomsStore.use.setIsValidated()
   const ref = useRef<HTMLDivElement | null>(null)
   function handleOnClick() {
     setIsOpen((prevIsOpen) => !prevIsOpen)