changes for #15

Author: phongnt

client/src/components/FiltersSideMenu/filters.js

@@ -15,6 +15,7 @@ import { useModal } from "../../lib/modal";
 
 import styles from "./filters.module.css";
 import utilityStyles from "../../styles/utility.module.css";
+import config from "../../config";
 
 /**
  * SearchTabFilters - component containing all the filters on the search tab page
@@ -23,7 +24,6 @@ import utilityStyles from "../../styles/utility.module.css";
  */
 export default function SearchTabFilters({ locations, achievements }) {
   const search = useSearch();
-  const [locationsData, setLocationsData] = useState(locations);
   const [achievementsData, setAchievementsData] = useState(achievements);
 
   /**
@@ -49,7 +49,6 @@ export default function SearchTabFilters({ locations, achievements }) {
   };
 
   useEffect(() => {
-    setLocationsData(locations);
     setAchievementsData(achievements);
   }, [locations, achievements]);
 
@@ -134,6 +133,28 @@ export default function SearchTabFilters({ locations, achievements }) {
     }
   };
 
+  const addLocationToFilter = (location) => {
+    const locationFilters = JSON.parse(JSON.stringify(search.selectedLocations));
+
+    if (locationFilters.findIndex((s) => s.id === location.id) !== -1) {
+      return;
+    }
+    locationFilters.push({ name: location.value, id: location.id });
+    search["selectLocations"](locationFilters);
+  };
+
+  const removeLocationFromFilter = (location) => {
+    const locationFilters = JSON.parse(JSON.stringify(search.selectedLocations));
+    const index = locationFilters.findIndex((s) => s.id === location.id);
+
+    if (index === -1) {
+      return;
+    }
+
+    locationFilters.splice(index, 1);
+    search["selectLocations"](locationFilters);
+  };
+
   const addSkillToFilter = (skill) => {
     const skillFilters = JSON.parse(JSON.stringify(search.selectedSkills));
 
@@ -230,27 +251,27 @@ export default function SearchTabFilters({ locations, achievements }) {
       />
       {search.isFilterActive(FILTERS.LOCATIONS) && (
         <div className={utilityStyles.mt32}>
-          <Collapsible
-            onCollapsed={(isCollapsed) =>
-              filterData("", locations, "name", setLocationsData)
-            }
-            title="Location"
-            collapsed={false}
-          >
-            <SearchBox
-              placeholder="Search for a location"
-              name={"location search"}
-              onChange={(q) =>
-                filterData(q.trim(), locations, "name", setLocationsData)
-              }
-            />
-            <TagList
-              key="l"
-              tags={locationsData}
-              selected={search.selectedLocations}
-              selector={"selectLocations"}
-              noResultsText={"No location found"}
+          <Collapsible title="Location">
+            <SuggestionBox
+              placeholder={"Search for a location"}
+              onSelect={addLocationToFilter}
+              purpose="locations"
+              companyAttrId={config.STANDARD_USER_ATTRIBUTES.location}
             />
+            {search.selectedLocations.length > 0 && (
+              <div className={utilityStyles.mt16}>
+                {search.selectedLocations.map((location) => {
+                  return (
+                    <Pill
+                      key={location.id}
+                      name={location.name}
+                      removable={true}
+                      onRemove={() => removeLocationFromFilter(location)}
+                    />
+                  );
+                })}
+              </div>
+            )}
           </Collapsible>
         </div>
       )}

client/src/components/SuggestionBox/index.jsx

@@ -128,6 +128,8 @@ export default function SuggestionBox({
   const onSuggestionSelected = (event, { suggestion }) => {
     if (purpose === "skills") {
       if (suggestion.name !== NO_RESULTS_FOUND) onSelect(suggestion);
+    } else if (purpose === "locations") {
+      if (suggestion.name !== NO_RESULTS_FOUND) onSelect(suggestion);
     } else {
       if (suggestion.name !== NO_RESULTS_FOUND)
         onSelect(companyAttrId, suggestion);

client/src/pages/Search/Global.jsx

@@ -145,7 +145,7 @@ export default function SearchGlobal({ keyword }) {
       searchContext.filters[FILTERS.LOCATIONS].active &&
       searchContext.selectedLocations.length > 0
     ) {
-      criteria.locations = searchContext.selectedLocations;
+      criteria.locations = searchContext.selectedLocations.map((l) => l.name);
     }
     if (
       searchContext.filters[FILTERS.SKILLS].active &&