changes for #15

client/src/components/FiltersSideMenu/filters.js

@@ -15,15 +15,15 @@ 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
  * locations: the values for the location filter options
  * achievements: the values for the achievements filter options
  */
-export default function SearchTabFilters({ locations, achievements }) {
+export default function SearchTabFilters({ achievements }) {
   const search = useSearch();
-  const [locationsData, setLocationsData] = useState(locations);
   const [achievementsData, setAchievementsData] = useState(achievements);
 
   /**
@@ -49,9 +49,8 @@ export default function SearchTabFilters({ locations, achievements }) {
   };
 
   useEffect(() => {
-    setLocationsData(locations);
     setAchievementsData(achievements);
-  }, [locations, achievements]);
+  }, [achievements]);
 
   const filterData = (query, initialValues, property, setState) => {
     const q = query.toLowerCase();
@@ -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>
       )}
@@ -334,7 +355,6 @@ export default function SearchTabFilters({ locations, achievements }) {
 }
 
 SearchTabFilters.propTypes = {
-  locations: PT.array,
   achievements: PT.array,
 };
 

client/src/components/FiltersSideMenu/index.jsx

@@ -4,15 +4,14 @@ import PT from "prop-types";
 import style from "./style.module.scss";
 import SearchTabFilters from "./filters";
 
-export default function FiltersSideMenu({ locations, achievements }) {
+export default function FiltersSideMenu({ achievements }) {
   return (
     <div className={style.container}>
-      <SearchTabFilters locations={locations} achievements={achievements} />
+      <SearchTabFilters achievements={achievements} />
     </div>
   );
 }
 
 FiltersSideMenu.propTypes = {
-  locations: PT.array.isRequired,
   achievements: PT.array.isRequired,
 };

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

@@ -50,7 +50,6 @@ export default function SearchGlobal({ keyword }) {
   const apiClient = api();
   const searchContext = useSearch();
   const [isSearching, setIsSearching] = React.useState(false);
-  const [locations, setLocations] = React.useState([]);
   const [achievements, setAchievements] = React.useState([]);
   const [users, setUsers] = React.useState([]);
   const [page, setPage] = React.useState(1);
@@ -85,11 +84,9 @@ export default function SearchGlobal({ keyword }) {
     let isSubscribed = true;
 
     (async () => {
-      const locations = await staticData.getLocations();
       const achievements = await staticData.getAchievements();
 
       if (isSubscribed) {
-        setLocations(locations);
         setAchievements(achievements);
       }
     })();
@@ -145,7 +142,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 &&
@@ -302,7 +299,7 @@ export default function SearchGlobal({ keyword }) {
   return (
     <>
       <div className={style.sideMenu}>
-        <FiltersSideMenu locations={locations} achievements={achievements} />
+        <FiltersSideMenu achievements={achievements} />
       </div>
       {!isSearching && users.length > 0 && (
         <div className={style.rightSide}>

client/src/services/static-data.js

@@ -1,36 +1,3 @@
-async function getLocations() {
-  const mockLocationTags = [
-    { name: "London" },
-    { name: "New York" },
-    { name: "East Carmen" },
-    { name: "Savanahville" },
-    { name: "Lake Audra" },
-    { name: "Elainaville" },
-    { name: "Howellstad" },
-    { name: "West Reneefort" },
-    { name: "Vanside" },
-    { name: "East Jonatan" },
-    { name: "Gottliebton" },
-    { name: "Ervinchester" },
-    { name: "Matteoburgh" },
-    { name: "Curtmouth" },
-    { name: "North Raphaelleton" },
-    { name: "Laishaside" },
-    { name: "West Trystanmouth" },
-    { name: "West Torrey" },
-    { name: "Abernathystad" },
-    { name: "Danland" },
-    { name: "Lednertown" },
-    { name: "Athenamouth" },
-    { name: "North Abagailport" },
-    { name: "North Andres" },
-    { name: "New Herbert" },
-    { name: "Bergstrombury" },
-    { name: "West Santinoside" },
-  ];
-  return mockLocationTags;
-}
-
 async function getAchievements() {
   const mockAchievementsTags = [
     { name: "Informatika" },
@@ -42,6 +9,5 @@ async function getAchievements() {
 }
 
 export default {
-  getLocations,
   getAchievements,
 };