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,32 @@ 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 +255,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={search.getAttributeId(FILTERS.LOCATIONS)}
             />
+            {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 +359,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

@@ -4,6 +4,7 @@ import config from "../../config";
 import api from "../../services/api";
 import style from "./style.module.scss";
 import _ from "lodash";
+import { useSearch, FILTERS } from "../../lib/search";
 
 const NO_RESULTS_FOUND = "no results found";
 const DELAY_SEARCH = 300;
@@ -95,13 +96,19 @@ export default function SuggestionBox({
   placeholder,
   onSelect,
 }) {
+  const search = useSearch();
   const apiClient = api();
   const [suggestions, setSuggestions] = React.useState([]);
   const [value, setValue] = React.useState("");
 
   const onChange = (event, { newValue }) => setValue(newValue.trim());
 
   const onSuggestionsFetchRequested = async ({ value }) => {
+    if (purpose === "locations") {
+      if (!companyAttrId) {
+        companyAttrId = search.getAttributeId(FILTERS.LOCATIONS);
+      }
+    }
     if (purpose === "skills") {
       let data = await getSkillsSuggestions(apiClient, value);
 
@@ -128,6 +135,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/config.js

@@ -37,4 +37,7 @@ export default {
     clientId: process.env.REACT_APP_AUTH0_CLIENTID,
     audience: process.env.REACT_APP_AUTH0_AUDIENCE,
   },
+
+  REACT_APP_ATTRIBUTE_ID_LOCATION:
+    process.env.REACT_APP_ATTRIBUTE_ID_LOCATION || "location",
 };

client/src/lib/search.js

@@ -66,6 +66,10 @@ function useProvideSearch() {
     setPopupShown(true);
   };
 
+  const getAttributeId = (filter) => {
+    return filters[filter].id;
+  };
+
   const isFilterActive = (filter) => {
     return filters[filter].active;
   };
@@ -133,6 +137,7 @@ function useProvideSearch() {
     showPopup,
     filters,
     setFilters,
+    getAttributeId,
     isFilterActive,
     activateFilter,
     deactivateFilter,

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);
       }
     })();
@@ -119,6 +116,9 @@ export default function SearchGlobal({ keyword }) {
             group: "Company attributes",
             active: false,
           };
+          if (companyAttr.name === config.REACT_APP_ATTRIBUTE_ID_LOCATION) {
+            filtersWithCompanyAttrs[FILTERS.LOCATIONS].id = companyAttr.id;
+          }
         });
 
         if (isSubscribed) {
@@ -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 &&
@@ -209,10 +209,12 @@ export default function SearchGlobal({ keyword }) {
       pageChanged = true;
     }
 
-    if (_.isEqual(prevCriteria, criteria)
-      && prevKeyword === keyword
-      && prevOrderBy === orderBy
-      && pageChanged === false) {
+    if (
+      _.isEqual(prevCriteria, criteria) &&
+      prevKeyword === keyword &&
+      prevOrderBy === orderBy &&
+      pageChanged === false
+    ) {
       return;
     } else {
       setPrevCriteria(criteria);
@@ -302,7 +304,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,
 };