feat: 🎸 add input field for searchText

yeukfei02 · Jul 13, 2022 · 00c3068 · 00c3068
1 parent e3cdbc8
commit 00c3068
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 43 deletions.
diff --git a/src/components/cardView/CardView.tsx b/src/components/cardView/CardView.tsx
@@ -107,10 +107,12 @@ function CardView(props: any): JSX.Element {
     });
   }
 
-  const handleExpandClick = () => {
+  const handleExpandClick = async () => {
     setExpanded(!expanded);
 
-    if (!expanded) getRestaurantsDetailsReviewById(id);
+    if (!expanded) {
+      await getRestaurantsDetailsReviewById(id);
+    }
   };
 
   const getRestaurantsDetailsReviewById = async (id: string) => {

diff --git a/src/components/favourites/Favourites.tsx b/src/components/favourites/Favourites.tsx
@@ -122,8 +122,8 @@ function Favourites(): JSX.Element {
     return renderDiv;
   };
 
-  const reloadFavourites = () => {
-    getFavourites();
+  const reloadFavourites = async () => {
+    await getFavourites();
   };
 
   const renderFavourites = () => {

diff --git a/src/components/mainPage/MainPage.tsx b/src/components/mainPage/MainPage.tsx
@@ -68,6 +68,7 @@ function MainPage(): JSX.Element {
 
   const [selectedTermList, setSelectedTermList] = useState<any[]>([]);
   const [selectedTerm, setSelectedTerm] = useState<any>(null);
+  const [inputValue, setInputValue] = useState<string>('');
   const [selectedMicLanguageList, setSelectedMicLanguageList] = useState<any[]>([]);
   const [selectedMicLanguage, setSelectedMicLanguage] = useState<any>(null);
   const [radioButtonValue, setRadioButtonValue] = useState<string>('');
@@ -270,10 +271,10 @@ function MainPage(): JSX.Element {
     }
   };
 
-  const findRestaurantsByLocation = async (selectedTerm: string, location: any) => {
+  const findRestaurantsByLocation = async (searchText: string, location: any) => {
     const response = await axios.get(`${rootUrl}/restaurant/find-restaurants-by-location`, {
       params: {
-        term: selectedTerm,
+        term: searchText,
         location: location,
       },
       headers: {
@@ -295,10 +296,10 @@ function MainPage(): JSX.Element {
     }
   };
 
-  const findRestaurantsByLatLong = async (selectedTerm: string, latitude: number, longitude: number) => {
+  const findRestaurantsByLatLong = async (searchText: string, latitude: number, longitude: number) => {
     const response = await axios.get(`${rootUrl}/restaurant/find-restaurants-by-lat-long`, {
       params: {
-        term: selectedTerm,
+        term: searchText,
         latitude: latitude,
         longitude: longitude,
       },
@@ -323,6 +324,7 @@ function MainPage(): JSX.Element {
 
   const handleChange = (selectedTerm: any) => {
     setSelectedTerm(selectedTerm);
+    setInputValue('');
   };
 
   const handleMicLanguageSelectDropdownChange = (selectedMicLanguage: any) => {
@@ -333,6 +335,11 @@ function MainPage(): JSX.Element {
     setRadioButtonValue(e.target.value);
   };
 
+  const handleInputChange = (e: any) => {
+    setSelectedTerm(null);
+    setInputValue(e.target.value);
+  };
+
   const handleLocationChange = (e: any) => {
     setLocation(e.target.value);
   };
@@ -368,28 +375,46 @@ function MainPage(): JSX.Element {
   );
 
   const renderSelectDropdown = () => {
-    let selectDropdown: any = null;
-
-    if (_.isEqual(window.location.pathname, '/')) {
-      selectDropdown = (
-        <div>
-          <Select
-            styles={selectStyles}
-            placeholder={t('selectTheFoodYouWant')}
-            value={selectedTerm}
-            onChange={handleChange}
-            options={selectedTermList}
-            isClearable={true}
-            formatGroupLabel={formatGroupLabel}
-          />
-          <div className="my-3"></div>
-        </div>
-      );
-    }
-
+    const selectDropdown = (
+      <div>
+        <Select
+          styles={selectStyles}
+          placeholder={t('selectTheFoodYouWant')}
+          value={selectedTerm}
+          onChange={handleChange}
+          options={selectedTermList}
+          isClearable={true}
+          formatGroupLabel={formatGroupLabel}
+        />
+        <div className="my-3"></div>
+      </div>
+    );
     return selectDropdown;
   };
 
+  const renderInput = () => {
+    const input = (
+      <div>
+        <TextField
+          id="outlined-full-width"
+          label="Food"
+          placeholder="Enter food here..."
+          helperText="Food name"
+          fullWidth
+          margin="normal"
+          variant="outlined"
+          InputLabelProps={{
+            shrink: true,
+          }}
+          value={inputValue}
+          onChange={e => handleInputChange(e)}
+        />
+        <div className="my-3"></div>
+      </div>
+    );
+    return input;
+  };
+
   const renderRadioButton = () => {
     const radioButtonDiv = (
       <div>
@@ -734,16 +759,23 @@ function MainPage(): JSX.Element {
     return randomFoodCategory;
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     setRandomFoodTerm('');
     setResultList([]);
     localStorage.setItem('resultList', '');
     setSubmitButtonClicked(true);
 
     if (_.isEqual(radioButtonValue, 'places')) {
       if (!_.isEmpty(location)) {
-        const term = !_.isEmpty(selectedTerm) ? selectedTerm.label : '';
-        findRestaurantsByLocation(term, location);
+        let searchText = '';
+        if (!_.isEmpty(selectedTerm)) {
+          searchText = selectedTerm.label;
+        }
+        if (!_.isEmpty(inputValue)) {
+          searchText = inputValue;
+        }
+
+        await findRestaurantsByLocation(searchText, location);
         setOpenSuccessAlert(false);
         setOpenErrorAlert(false);
         setMessage('');
@@ -752,8 +784,15 @@ function MainPage(): JSX.Element {
 
     if (_.isEqual(radioButtonValue, 'useCurrentLocation')) {
       if (latitude !== 0 && longitude !== 0) {
-        const term = !_.isEmpty(selectedTerm) ? selectedTerm.label : '';
-        findRestaurantsByLatLong(term, latitude, longitude);
+        let searchText = '';
+        if (!_.isEmpty(selectedTerm)) {
+          searchText = selectedTerm.label;
+        }
+        if (!_.isEmpty(inputValue)) {
+          searchText = inputValue;
+        }
+
+        await findRestaurantsByLatLong(searchText, latitude, longitude);
         setOpenSuccessAlert(false);
         setOpenErrorAlert(false);
         setMessage('');
@@ -807,14 +846,14 @@ function MainPage(): JSX.Element {
           });
           setFormattedRandomFoodList(formattedRandomFoodList);
 
-          getRandomResult(formattedRandomFoodList);
+          await getRandomResult(formattedRandomFoodList);
         }
       } else {
         setOpenErrorAlert(true);
         setMessage('Get categories error!');
       }
     } else {
-      getRandomResult(formattedRandomFoodList);
+      await getRandomResult(formattedRandomFoodList);
     }
   };
 
@@ -828,11 +867,11 @@ function MainPage(): JSX.Element {
     setResultList(sortedByDistanceResultList);
   };
 
-  const getRandomResult = (formattedRandomFoodList: any[]) => {
-    const selectedTerm = _.sample(formattedRandomFoodList);
-    setRandomFoodTerm(selectedTerm);
-    if (!_.isEmpty(selectedTerm) && latitude !== 0 && longitude !== 0) {
-      findRestaurantsByLatLong(selectedTerm, latitude, longitude);
+  const getRandomResult = async (formattedRandomFoodList: any[]) => {
+    const searchText = _.sample(formattedRandomFoodList);
+    setRandomFoodTerm(searchText);
+    if (!_.isEmpty(searchText) && latitude !== 0 && longitude !== 0) {
+      await findRestaurantsByLatLong(searchText, latitude, longitude);
       setOpenSuccessAlert(false);
       setMessage('');
     }
@@ -861,6 +900,7 @@ function MainPage(): JSX.Element {
             <img src={require('../../images/logo2.png')} className="img-fluid" alt="logo" width="100%" />
           </div>
           {renderSelectDropdown()}
+          {renderInput()}
           {renderRadioButton()}
           {renderLocationInput()}
           {/*renderLatitudeAndLongitudeInput()*/}

diff --git a/src/components/randomFood/RandomFood.tsx b/src/components/randomFood/RandomFood.tsx
@@ -220,14 +220,14 @@ function RandomFood(): JSX.Element {
     return renderDiv;
   };
 
-  const handleRefresh = () => {
+  const handleRefresh = async () => {
     setResultList([]);
     setRefreshButtonClicked(true);
 
     const selectedTerm = _.sample(randomFoodList);
     setSelectedTerm(selectedTerm);
     if (latitude !== 0 && longitude !== 0) {
-      findRestaurantsByLatLong(useRandomFoodCategory, selectedTerm, latitude, longitude);
+      await findRestaurantsByLatLong(useRandomFoodCategory, selectedTerm, latitude, longitude);
       setOpenSuccessAlert(true);
       setMessage('Refresh success!');
     }

diff --git a/src/components/randomFoodMapView/RandomFoodMapView.tsx b/src/components/randomFoodMapView/RandomFoodMapView.tsx
@@ -130,7 +130,7 @@ function RandomFoodMapView(): JSX.Element {
     }
   };
 
-  const handleRefresh = () => {
+  const handleRefresh = async () => {
     setNameList([]);
     setLocationStrList([]);
     setCoordinatesList([]);
@@ -139,7 +139,7 @@ function RandomFoodMapView(): JSX.Element {
     const selectedTerm = _.sample(randomFoodList);
     setSelectedTerm(selectedTerm);
     if (!_.isEmpty(selectedTerm) && latitude !== 0 && longitude !== 0) {
-      findRestaurantsByLatLong(selectedTerm, latitude, longitude);
+      await findRestaurantsByLatLong(selectedTerm, latitude, longitude);
       setOpenSuccessAlert(true);
       setMessage('Refresh success!');
     }