feat: SW-276 Optimized code

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")
     }
   }