fix: issue #47

issue id - #47

Author: praveeno

src/containers/Challenges/Listing/index.jsx

@@ -24,6 +24,7 @@ const Listing = ({
   startDateEnd,
   updateFilter,
   bucket,
+  tags,
   getChallenges,
 }) => {
   const sortByOptions = utils.createDropdownOptions(
@@ -106,7 +107,7 @@ const Listing = ({
             <ChallengeItem
               challenge={challenge}
               onClickTag={(tag) => {
-                const filterChange = { search: tag };
+                const filterChange = { tags: [...tags, tag] };
                 updateFilter(filterChange);
                 getChallenges(filterChange);
               }}

src/containers/Challenges/index.jsx

@@ -17,6 +17,7 @@ const Challenges = ({
   getChallenges,
   updateFilter,
   bucket,
+  tags,
 }) => {
   const [initialized, setInitialized] = useState(false);
 
@@ -40,6 +41,7 @@ const Challenges = ({
           startDateEnd={startDateEnd}
           updateFilter={updateFilter}
           bucket={bucket}
+          tags={tags}
           getChallenges={getChallenges}
         />
       )}
@@ -58,6 +60,7 @@ Challenges.propTypes = {
   getChallenges: PT.func,
   updateFilter: PT.func,
   bucket: PT.string,
+  tags: PT.arrayOf(PT.string),
 };
 
 const mapStateToProps = (state) => ({
@@ -70,6 +73,7 @@ const mapStateToProps = (state) => ({
   startDateEnd: state.filter.challenge.startDateEnd,
   challenges: state.challenges.challengesFiltered,
   bucket: state.filter.challenge.bucket,
+  tags: state.filter.challenge.tags,
 });
 
 const mapDispatchToProps = {

src/containers/Filter/ChallengeFilter/index.jsx

@@ -27,7 +27,7 @@ const ChallengeFilter = ({
   saveFilter,
   clearFilter,
 }) => {
-  const tagOptions = utils.createDropdownTermOptions(challengeTags);
+  const tagOptions = utils.createDropdownTermOptions(challengeTags, tags);
   const bucketOptions = utils.createRadioOptions(challengeBuckets, bucket);
 
   const [filter, setFilter] = useState(
@@ -42,7 +42,6 @@ const ChallengeFilter = ({
     })
   );
 
-  utils.setSelectedDropdownTermOptions(tagOptions, filter.tags);
 
   return (
     <div styleName="filter">
@@ -110,10 +109,12 @@ const ChallengeFilter = ({
             const selectedTagOptions = utils.getSelectedDropdownTermsOptions(
               newTagOptions
             );
-            setFilter({
+            const filterChange = {
               ...filter,
               tags: selectedTagOptions.map((tagOption) => tagOption.label),
-            });
+            }
+            setFilter(filterChange);
+            saveFilter(filterChange);
           }}
         />
       </div>

src/utils/index.js

@@ -47,7 +47,7 @@ export function setSelectedDropdownOptions(options, selectedValues) {
 export function createDropdownTermOptions(values, selectedValues) {
   return values.map((value) => ({
     label: `${value}`,
-    selected: !!selectedValues && selectedValues.includes[value],
+    selected: !!selectedValues && selectedValues.includes(value),
   }));
 }