Merge pull request #590 from topcoder-platform/issues/timor/163

fixes issue#163

Author: callmekatootie

client/src/components/FiltersSideMenu/filters.js

@@ -230,7 +230,13 @@ 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"}
@@ -290,7 +296,12 @@ 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"}

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>