feat: SW-276 Optimized code

components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css

@@ -1,6 +1,6 @@
 .container {
   display: grid;
-  grid-template-columns: auto auto auto auto;
+  grid-template-columns: repeat(4, auto);
   align-items: center;
 }
 

components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx

@@ -15,18 +15,14 @@ export default function AdultSelector({
   const adultsLabel = intl.formatMessage({ id: "Adults" })
 
   function decreaseAdults() {
-    if (adults <= 1) {
+    if (adults > 1) {
-      return
+      updateAdults(adults - 1)
     }
-    adults = adults - 1
-    updateAdults(adults)
   }
   function increaseAdults() {
-    if (adults > 5) {
+    if (adults < 6) {
-      return
+      updateAdults(adults + 1)
     }
-    adults = adults + 1
-    updateAdults(adults)
   }
 
   return (

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx

@@ -39,7 +39,7 @@ export default function ChildInfoSelector({
     { label: "12", value: 12 },
   ]
 
-  function handleOnSelect(selectedKey: any, childInfo: string) {
+  function handleOnSelect(selectedKey: number, childInfo: string) {
     if (childInfo == "age") {
       child.age = selectedKey
     } else if (childInfo == "bed") {
@@ -58,7 +58,7 @@ export default function ChildInfoSelector({
           aria-label={ageLabel}
           value={child.age}
           onSelect={(key) => {
-            handleOnSelect(key, "age")
+            handleOnSelect(parseInt(key.toString()), "age")
           }}
           name="age"
           placeholder={ageLabel}
@@ -73,7 +73,7 @@ export default function ChildInfoSelector({
             aria-label={bedLabel}
             value={child.bed}
             onSelect={(key) => {
-              handleOnSelect(key, "bed")
+              handleOnSelect(parseInt(key.toString()), "bed")
             }}
             name="bed"
             placeholder={bedLabel}

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/child-selector.module.css

@@ -1,6 +1,6 @@
 .container {
   display: grid;
-  grid-template-columns: auto auto auto auto;
+  grid-template-columns: repeat(4, auto);
   align-items: center;
 }
 

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx

@@ -23,19 +23,17 @@ export default function ChildSelector({
   const childrenLabel = intl.formatMessage({ id: "Children" })
 
   function decreaseChildren() {
-    if (roomChildren.length < 1) {
+    if (roomChildren.length > 0) {
-      return
+      roomChildren.pop()
+      updateChildren(roomChildren)
     }
-    roomChildren.pop()
-    updateChildren(roomChildren)
   }
 
   function increaseChildren() {
-    if (roomChildren.length > 5) {
+    if (roomChildren.length < 5) {
-      return
+      roomChildren.push({ age: -1, bed: -1 })
+      updateChildren(roomChildren)
     }
-    roomChildren.push({ age: -1, bed: -1 })
-    updateChildren(roomChildren)
   }
 
   function updateChildInfo(child: Child, index: number) {

components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useIntl } from "react-intl"
 
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -81,10 +81,10 @@ export default function GuestsRoomsPicker({
               Remove Room
             </Button>
           ) : null} */}
-          <Divider></Divider>
+          <Divider />
         </section>
       ))}
-      <div className={styles.footer}>
+      <footer className={styles.footer}>
         {/*  Not in MVP
         {selectedGuests.length < 4 ? (
           <Button intent="text" onClick={addRoom}>
@@ -94,7 +94,7 @@ export default function GuestsRoomsPicker({
         <Button onClick={closePicker} disabled={!isValid}>
           {doneLabel}
         </Button>
-      </div>
+      </footer>
     </>
   )
 }

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -36,5 +36,5 @@
   display: grid;
   gap: var(--Spacing-x1);
   grid-template-columns: auto;
-  margin: 10px 0 0;
+  margin-top: 10px;
 }