Merge branch 'develop' into issue-17

Author: callmekatootie

client/src/components/FiltersSideMenu/filters.js

@@ -230,12 +230,18 @@ export default function SearchTabFilters({ locations, achievements }) {
       />
       {search.isFilterActive(FILTERS.LOCATIONS) && (
         <div className={utilityStyles.mt32}>
-          <Collapsible title="Location" collapsed={false}>
+          <Collapsible
+            onCollapsed={(isCollapsed) =>
+              filterData("", locations, "name", setLocationsData)
+            }
+            title="Location"
+            collapsed={false}
+          >
             <SearchBox
               placeholder="Search for a location"
               name={"location search"}
               onChange={(q) =>
-                filterData(q, locations, "name", setLocationsData)
+                filterData(q.trim(), locations, "name", setLocationsData)
               }
             />
             <TagList
@@ -290,12 +296,17 @@ export default function SearchTabFilters({ locations, achievements }) {
       )}
       {search.isFilterActive(FILTERS.ACHIEVEMENTS) && (
         <div className={utilityStyles.mt32}>
-          <Collapsible title="Achievements">
+          <Collapsible
+            title="Achievements"
+            onCollapsed={(isCollapsed) =>
+              filterData("", achievements, "name", setAchievementsData)
+            }
+          >
             <SearchBox
               placeholder="Search for an achievement"
               name={"achievements search"}
               onChange={(q) =>
-                filterData(q, achievements, "name", setAchievementsData)
+                filterData(q.trim(), achievements, "name", setAchievementsData)
               }
             />
             <TagList

client/src/components/Header/index.jsx

@@ -97,7 +97,7 @@ export default function Header({
         </div>
         <div
           className={style.accountMenu}
-          onClick={() => setShowAccountDropdown(!showAccountDropdown)}
+          onMouseDown={() => setShowAccountDropdown(!showAccountDropdown)}
         >
           {user.nickname}
           {organization ? <>&nbsp;({organization.name})</> : ""}

client/src/components/SuggestionBox/index.jsx

@@ -86,7 +86,7 @@ export default function SuggestionBox({
   const [suggestions, setSuggestions] = React.useState([]);
   const [value, setValue] = React.useState("");
 
-  const onChange = (event, { newValue }) => setValue(newValue);
+  const onChange = (event, { newValue }) => setValue(newValue.trim());
 
   const onSuggestionsFetchRequested = async ({ value }) => {
     if (purpose === "skills") {

client/src/components/collapsible/index.js

@@ -9,20 +9,30 @@ import iconStyles from "../../styles/icons.module.css";
  * childre: children component
  * collapse: if set to true the component is collapsed
  */
-export default function Collapsible({ title, children, collapsed = false }) {
+export default function Collapsible({
+  title,
+  children,
+  collapsed = false,
+  onCollapsed,
+}) {
   const [isCollapsed, setIsCollapsed] = useState(collapsed);
 
   const mainStyle = isCollapsed
     ? styles.collapsibleContainerCollapsed
     : styles.collapsibleContainer;
 
+  const handleCollapseChange = () => {
+    setIsCollapsed(!isCollapsed);
+    if (onCollapsed) onCollapsed(isCollapsed);
+  };
+
   return (
     <div className={mainStyle}>
       <div className={styles.collapsibleHeader}>
         <div className={styles.collapsibleTitle}>{title}</div>
         <div
           className={styles.collapsibleChevronContainer}
-          onClick={() => setIsCollapsed(!isCollapsed)}
+          onClick={handleCollapseChange}
         >
           {isCollapsed ? (
             <div className={iconStyles.chevronDownG}></div>

client/src/components/editFiltersPopup/index.js

@@ -52,7 +52,7 @@ export default function EditFiltersPopup({ onCancel, onDone }) {
   );
   const [filterGroups, setFilterGroups] = useState(initialFilters);
   const [selectedFilters, setSelectedFilters] = useState(initialSelection);
-  const [sections, setSections] = useState(initialSections, initialSections);
+  const [sections, setSections] = useState(initialSections);
 
   const handleCancel = () => {
     if (onCancel) {
@@ -65,6 +65,41 @@ export default function EditFiltersPopup({ onCancel, onDone }) {
       onDone(selectedFilters);
     }
     search.setFilters(searchFilters);
+    removeDataFromDisabledFilters(searchFilters);
+  };
+
+  const removeDataFromDisabledFilters = (searchFilters) => {
+    const companyAttrIdsToBeRemoved = [];
+    for (const [key, value] of Object.entries(searchFilters)) {
+      if (value.group === "General attributes") {
+        if (!value.active) {
+          removeGeneralAttr(value.text);
+        }
+      } else {
+        if (!value.active) {
+          companyAttrIdsToBeRemoved.push(key);
+        }
+      }
+    }
+    search.clearSelectCompanyAttributes(companyAttrIdsToBeRemoved);
+  };
+
+  const removeGeneralAttr = (text) => {
+    if (text === "Location") {
+      search.selectLocations([]);
+    }
+    if (text === "Skills") {
+      search.selectSkills([]);
+    }
+    if (text === "Achievements") {
+      search.selectAchievements([]);
+    }
+    if (text === "Availability") {
+      search.selectAvailability({
+        isAvailableSelected: false,
+        isUnavailableSelected: false,
+      });
+    }
   };
 
   const handleFilterValueChanged = (filter, newValue) => {
@@ -73,27 +108,32 @@ export default function EditFiltersPopup({ onCancel, onDone }) {
       if (index === -1) {
         setSelectedFilters([filter, ...selectedFilters]);
         setSearchFilters({
-          ...search.filters,
-          [filter]: { ...search.filters[filter], active: true },
+          ...searchFilters,
+          [filter]: { ...searchFilters[filter], active: true },
         });
       }
     } else {
       if (index !== -1) {
         setSelectedFilters(selectedFilters.filter((_, i) => i !== index));
         setSearchFilters({
-          ...search.filters,
-          [filter]: { ...search.filters[filter], active: false },
+          ...searchFilters,
+          [filter]: { ...searchFilters[filter], active: false },
         });
       }
     }
   };
 
   const handleSearch = (q) => {
     if (q.length === 0) {
-      setFilterGroups(initialFilters);
+      const [filteredSections, filteredGroups] = getInitialFilters(
+        searchFilters,
+        () => true
+      );
+      setSections(filteredSections);
+      setFilterGroups(filteredGroups);
     } else if (q.length >= 3) {
       const [filteredSections, filteredGroups] = getInitialFilters(
-        { ...search.filters },
+        searchFilters,
         (f) => {
           return f.text.toLowerCase().includes(q.toLowerCase());
         }
@@ -203,10 +243,10 @@ function PopupSection({ title, filters, onFilterValueChange }) {
     <>
       <PopupSectionTitle text={title} />
       <div>
-        {filters.map((filter, index) => {
+        {filters.map((filter) => {
           return (
             <PopupSectionRow
-              key={index}
+              key={filter.id}
               text={filter.name}
               filterActivated={filter.isActive}
               id={filter.id}

client/src/lib/search.js

@@ -94,6 +94,14 @@ function useProvideSearch() {
     });
   };
 
+  const clearSelectCompanyAttributes = (ids) => {
+    const selectedCmpAttr = { ...selectedCompanyAttributes };
+    for (let id of ids) {
+      selectedCmpAttr[id] = [];
+    }
+    setSelectedCompanyAttributes(selectedCmpAttr);
+  };
+
   const getCompanyAttrActiveFilter = () => {
     const companyAttrActiveFilters = [];
     for (const filter in filters) {
@@ -120,6 +128,7 @@ function useProvideSearch() {
     selectAvailability: setSelectedAvailability,
     selectedCompanyAttributes,
     selectCompanyAttributes: setSelectedCompanyAttributes,
+    clearSelectCompanyAttributes,
     popupShown,
     showPopup,
     filters,