May 1, 2021 · May 13, 2021
diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx
 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 =
    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
              <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)
                    ) ||
                    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);
                  }}
                />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 =
Expand All		@@ -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}`}>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)
		) \|\|
Expand All		@@ -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);
		}}
		/>
Expand Down