Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

changes for #15 #618

Merged
merged 7 commits into from
Jul 28, 2020
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 45 additions & 25 deletions client/src/components/FiltersSideMenu/filters.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

/**
Expand All @@ -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();
Expand Down Expand Up @@ -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));

Expand Down Expand Up @@ -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}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

config.STANDARD_USER_ATTRIBUTES.location will have the value location and not the attribute id.

As mentioned here - #15 (comment)

Currently, on page load, after selecting org, we get the list of attributes located in that org (see the network requests made after org selection)
In this list, there will be an attribute with name "location" - case sensitive. Read it off the REACT_APP_ATTRIBUTE_ID_LOCATION environment variable which will have the value of location.
Note the id of this attribute - DO NOT hardcode the attribute id, as it is different for different orgs.

So the expectation is that AFTER we get the attributes on page load, we fetch the attribute id of the attribute named location - this name is being read from config.STANDARD_USER_ATTRIBUTES.location.

You will NOT get the id from that configuration - you will get the name, in this case, location. You need to get the id of this attribute from the list of attributes that are returned on page load (after org selection).

/>
{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>
)}
Expand Down Expand Up @@ -334,7 +355,6 @@ export default function SearchTabFilters({ locations, achievements }) {
}

SearchTabFilters.propTypes = {
locations: PT.array,
achievements: PT.array,
};

Expand Down
5 changes: 2 additions & 3 deletions client/src/components/FiltersSideMenu/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
2 changes: 2 additions & 0 deletions client/src/components/SuggestionBox/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
7 changes: 2 additions & 5 deletions client/src/pages/Search/Global.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
})();
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -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}>
Expand Down
34 changes: 0 additions & 34 deletions client/src/services/static-data.js
Original file line number Diff line number Diff line change
@@ -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" },
Expand All @@ -42,6 +9,5 @@ async function getAchievements() {
}

export default {
getLocations,
getAchievements,
};