Merge pull request #371 from ReDI-School/fix/whereDropdown

Fix/where dropdown
ReDI-School · Dec 9, 2024 · aa00b70 · aa00b70
2 parents a6616a6 + 95445a3
commit aa00b70
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 24 deletions.
diff --git a/server/src/data/places.json b/server/src/data/places.json
@@ -922,7 +922,7 @@
   {
     "id": 8,
     "title": "Nice room with ensuite bathroom",
-    "host": "Hosted by Lisa",
+    "host": "Hosted by Wadi Musa",
     "price": "$70 per night",
     "images": [
       "https://a0.muscache.com/im/pictures/031ee4ab-2b53-4b77-895f-31a58c121259.jpg?im_w=1200",
@@ -933,7 +933,7 @@
     ],
     "productSummary": {
       "accommodation": "Entire rental unit",
-      "address": "Beverly Hills, USA",
+      "address": "Wadi Musa, Ma'an Governorate, Jordan",
       "categories": ["TINY_HOMES"],
       "guests": { "key": "guest", "value": 8 },
       "bedrooms": { "key": "bedroom", "value": 4 },
@@ -1000,7 +1000,7 @@
       }
     ],
     "hostSummary": {
-      "hostName": "Lisa",
+      "hostName": "Wadi Musa",
       "hostingDuration": 5,
       "role": "Superhosts",
       "profilePicUrl": "https://a0.muscache.com/im/pictures/user/User/original/79ce66a9-ea58-4956-a585-c40bdaa01046.jpeg?im_w=240"
@@ -1033,8 +1033,8 @@
     "mapView": {
       "lon": 13.24118749634843,
       "lat": 52.437529182378114,
-      "address": "Beverly Hills, California, USA",
-      "addressDescription": "A prime location in the heart of Beverly Hills."
+      "address": "Wadi Musa, Ma'an Governorate, Jordan",
+      "addressDescription": "A prime location in the heart of Jordan."
     },
     "reservations": [
       {
@@ -1640,8 +1640,8 @@
   },
   {
     "id": 14,
-    "title": "USA, New York, Manhattan",
-    "host": "Hosted by John",
+    "title": "House in nature lodge in Phanom, Thailand",
+    "host": "Hosted by Waritsara",
     "price": "$250 per night",
     "images": [
       "https://a0.muscache.com/im/pictures/869c2655-7faa-4a50-9e0b-a331a5aec718.jpg?im_w=1200",
@@ -1652,7 +1652,7 @@
     ],
     "productSummary": {
       "accommodation": "Entire apartment",
-      "address": "New York, USA",
+      "address": "Phanom, Thailand",
       "guests": { "key": "guest", "value": 4 },
       "bedrooms": { "key": "bedroom", "value": 2 },
       "beds": { "key": "bed", "value": 2 },
@@ -1709,7 +1709,7 @@
       }
     ],
     "hostSummary": {
-      "hostName": "John",
+      "hostName": "Waritsara",
       "hostingDuration": 4,
       "role": "Superhost",
       "profilePicUrl": "https://a0.muscache.com/im/pictures/user/44e649e1-efcc-425f-897b-f2792b62f472.jpg?im_w=240"
@@ -1742,7 +1742,7 @@
     "mapView": {
       "lon": -73.985428,
       "lat": 40.748817,
-      "address": "New York, Manhattan, USA",
+      "address": "Phanom, Thailand",
       "addressDescription": "Located near famous landmarks in Manhattan."
     },
     "reservations": []

diff --git a/src/components/DestinationPopUp/DestinationButton/DestinationButton.module.css b/src/components/DestinationPopUp/DestinationButton/DestinationButton.module.css
@@ -8,7 +8,7 @@
     color: black;
 }
 .buttonContainer:hover {
-    background-color: #7c7e7f;
+    background-color: #dbdbdb;
     border-radius: 0.5rem;
 }
 .buttonContainer img {

diff --git a/src/components/DestinationPopUp/DestinationPopUp.module.css b/src/components/DestinationPopUp/DestinationPopUp.module.css
@@ -11,15 +11,14 @@
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     padding-bottom: 1.5rem;
-    overflow: scroll;
 }
 .title {
     display: flex;
     align-items: flex-start;
     font-weight: 800;
     color: black;
-    padding: 1.25rem;
-    width: 90%;
+    padding: 20px 0 20px 7px;
+    width: 100%;
 }
 .regionContainer{
     grid-row-gap: 0%;

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
@@ -200,13 +200,26 @@ const SearchBar = ({ searchType, onSearch }) => {
     };
   }, [showCalendar, showWhoDropdown, closing, windowWidth]);
 
+  useEffect(() => {
+    if (location && showCalendar) {
+      setSelectedBlock("checkIn");
+    }
+  }, [location, showCalendar]);
 
   const handleSearch = () => {
     const validateCount = (count) => (count && !isNaN(count) ? count : 0);
     const validateDate = (date) => (date && !isNaN(new Date(date).getTime()) ? date : null);
 
+    const transformLocation = (location) => {
+      if (location === "United States") return "USA";
+      if (location === "Middle East") return "Jordan";
+      if (location === "Southeast Asia") return "Thailand";
+      if (location === "I'm flexible") return '';
+      return location;
+    };
+
     const searchParams = {
-      location,
+      location: transformLocation(location),
       checkIn: validateDate(checkInToServer),
       checkOut: validateDate(checkOutToServer),
       adults: validateCount(adultsCount),
@@ -219,11 +232,13 @@ const SearchBar = ({ searchType, onSearch }) => {
   };
 
   const handelDestinationClick = () =>{
-    setHandelDestinationPopUp(!handelDestinationPopUp);
+    setHandelDestinationPopUp(true);
   }
   const handelDestination = (destination) =>{
     setLocation(destination);
+    setShowCalendar(true);
   }
+
   return (
     <>
       <div className={`${styles.searchBar} ${focusedSearchBar ? styles.focused : ''}`} ref={searchBarRef}>
@@ -234,7 +249,11 @@ const SearchBar = ({ searchType, onSearch }) => {
                     `}
           onMouseEnter={() => handleMouseHover("location", true)}
           onMouseLeave={() => handleMouseHover("location", false)}
-          onClick={() => handleBlockClick("where")}  
+          onClick={() => {
+            handleBlockClick("where")
+            handelDestinationClick()
+          }}
+          ref={destinationRef}
         >
           <div className={styles.locationContentWrapper} onClick={handelDestinationClick}>
             <span className={styles.label}>Where</span>
@@ -244,10 +263,17 @@ const SearchBar = ({ searchType, onSearch }) => {
               placeholder="Search destinations"
               value={location}
               onChange={(e) => setLocation(e.target.value)}
+              onKeyDown={(e) => {
+                // handleSearch(); //Uncomment in case we want autosearch
+                if (e.key === 'Enter') {
+                  setHandelDestinationPopUp(false);
+                  setShowCalendar(true);
+                }
+              }}    
             />
           </div>
           { handelDestinationPopUp && 
-            <div className={styles.popupContainer} ref={destinationRef}>
+            <div className={styles.popupContainer}>
               <DestinationPopUp title={"Search by region"} onClick={(e)=>handelDestination(e)}/>
             </div>
           }
@@ -491,6 +517,7 @@ const SearchBar = ({ searchType, onSearch }) => {
               onClick={(e) => {
                 e.stopPropagation()
                 handleSearch()
+                setShowWhoDropdown(false)
               }}
               className={styles.circleButton}
             >

diff --git a/src/components/SearchPanel/SearchPanel.jsx b/src/components/SearchPanel/SearchPanel.jsx
@@ -20,7 +20,7 @@ const SearchPanel = () => {
     // Search handler for desktop
     const handleAirbnbSearch = ({ location: region, checkIn, checkOut, adults, children, infants, pets }) => {
         const searchQueries = {
-            region,
+            ...(region && { region }),
             checkIn,
             checkOut,
             adults,
@@ -30,11 +30,17 @@ const SearchPanel = () => {
         };
 
         if (region) {
+            searchQueries.region = region;
             navigate({
-                pathname: `/s/${region}/homes`,
-                search: createSearchParams(searchQueries).toString(),
+              pathname: `/s/${region}/homes`,
+              search: createSearchParams(searchQueries).toString(),
             });
-        }
+          } else {
+            navigate({
+              pathname: `/`, 
+              search: createSearchParams(searchQueries).toString(),
+            });
+          }
     };
 
     // Search handler for mobile

diff --git a/src/components/SearchPanel/SearchPanel.test.jsx b/src/components/SearchPanel/SearchPanel.test.jsx
@@ -82,13 +82,16 @@ describe('SearchPanel Component', () => {
     });
 
 
-    it('should not call navigate when region is not set and search button is clicked ', () => {
+    it('should navigate to root with search params when region is not set and search button is clicked', () => {
         //given
         const searchButton = screen.getByText('Search');
         //when
         fireEvent.click(searchButton);
         //then
-        expect(navigate).not.toHaveBeenCalled();
+        expect(navigate).toHaveBeenCalledWith({
+            pathname: '/',
+            search: 'checkIn=2023-01-01&checkOut=2023-01-07&adults=4&children=3&infants=2&pets=1'
+        });
     });
 
     it('should call navigate with correct parameters when region is set and search button is clicked', () => {