diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx index 3ad7a08..4c3f87c 100644 --- a/src/components/Checkbox/index.jsx +++ b/src/components/Checkbox/index.jsx @@ -11,6 +11,7 @@ import iconCheckM from "assets/icons/checkmark-medium.png"; import iconCheckS from "assets/icons/checkmark-small.png"; function Checkbox({ checked, onChange, size, errorMsg }) { + const [changeCount, setChangeCount] = useState(0); const [checkedInternal, setCheckedInternal] = useState(checked); let sizeStyle = size === "lg" ? "lgSize" : null; const imgSrc = @@ -19,12 +20,15 @@ function Checkbox({ checked, onChange, size, errorMsg }) { sizeStyle = size === "xs" ? "xsSize" : "smSize"; } const delayedOnChange = useRef( - _.debounce((q, cb) => cb(q), process.env.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef + _.debounce((q, cb) => { + cb(q); + setChangeCount((n) => n + 1); + }, process.env.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef ).current; useEffect(() => { setCheckedInternal(checked); - }, [checked]); + }, [changeCount, checked]); return ( <label styleName={`container ${sizeStyle}`}> diff --git a/src/containers/Filter/ChallengeFilter/index.jsx b/src/containers/Filter/ChallengeFilter/index.jsx index d28ff5b..228215e 100644 --- a/src/containers/Filter/ChallengeFilter/index.jsx +++ b/src/containers/Filter/ChallengeFilter/index.jsx @@ -214,6 +214,8 @@ const ChallengeFilter = ({ <span key={subCommunity.communityName}> <Checkbox checked={ + // select all if query filters neither events nor groups + events.length + groups.length === 0 || events.includes( utils.challenge.getCommunityEvent(subCommunity) ) || @@ -225,32 +227,42 @@ const ChallengeFilter = ({ const isTCOEvent = utils.challenge.isTCOEventCommunity( subCommunity ); - let filterChange; + const filterChange = { events, groups }; + + if (events.length + groups.length === 0) { + // select all if query filters neither events nor groups + filterChange.events = challengeSubCommunities + .filter(utils.challenge.isTCOEventCommunity) + .map(utils.challenge.getCommunityEvent); + filterChange.groups = challengeSubCommunities + .filter(utils.challenge.isGroupCommunity) + .map(utils.challenge.getCommunityGroup); + } if (isTCOEvent) { - const newEvents = checked - ? events.concat( - utils.challenge.getCommunityEvent(subCommunity) - ) - : events.filter( - (event) => - event !== - utils.challenge.getCommunityEvent(subCommunity) - ); - filterChange = { events: newEvents }; + const scEvent = utils.challenge.getCommunityEvent( + subCommunity + ); + filterChange.events = checked + ? _.union(filterChange.events, [scEvent]) + : _.without(filterChange.events, scEvent); } else { - const newGroups = checked - ? groups.concat( - utils.challenge.getCommunityGroup(subCommunity) - ) - : groups.filter( - (group) => - group !== - utils.challenge.getCommunityGroup(subCommunity) - ); - filterChange = { groups: newGroups }; + const scGroup = utils.challenge.getCommunityGroup( + subCommunity + ); + filterChange.groups = checked + ? _.union(filterChange.groups, [scGroup]) + : _.without(filterChange.groups, scGroup); } + // clear community filters if all sub-communities are selected + if ( + filterChange.groups.length + filterChange.events.length >= + challengeSubCommunities.length + ) { + filterChange.events = []; + filterChange.groups = []; + } updateFilter(filterChange); }} />