Enhance WithFilterCriteria and TaskAnalysisTable components

- Added a mounted state check in WithFilterCriteria to prevent state updates on unmounted components.
- Implemented initial mount check in TaskAnalysisTable to optimize state handling during updates.
- Refactored filter handling logic in TaskAnalysisTable for improved clarity and performance.

Author: CollinBeczak

src/components/HOCs/WithFilterCriteria/WithFilterCriteria.jsx

@@ -299,7 +299,9 @@ export default function WithFilterCriteria(
       this.props
         .augmentClusteredTasks(challengeId, false, criteria, pageSize, false, ignoreLocked)
         .then(() => {
-          this.setState({ loading: false });
+          if (this._isMounted) {
+            this.setState({ loading: false });
+          }
         });
     }, 800);
 
@@ -338,6 +340,7 @@ export default function WithFilterCriteria(
     }
 
     componentDidMount() {
+      this._isMounted = true;
       this.initialLoadTriggered = false;
 
       if (
@@ -353,6 +356,11 @@ export default function WithFilterCriteria(
       }
     }
 
+    componentWillUnmount() {
+      this._isMounted = false;
+      this.debouncedTasksFetch.cancel();
+    }
+
     componentDidUpdate(prevProps, prevState) {
       const challengeId = this.props.challenge?.id || this.props.challengeId;
       const prevChallengeId = prevProps?.challenge?.id || prevProps?.challengeId;

src/components/TaskAnalysisTable/TaskAnalysisTable.jsx

@@ -76,6 +76,7 @@ export const TaskAnalysisTableInternal = (props) => {
 
   const prevSortByRef = useRef(null);
   const prevFiltersRef = useRef(null);
+  const isInitialMount = useRef(true);
 
   const columnFilterKeys = [
     "id",
@@ -91,28 +92,25 @@ export const TaskAnalysisTableInternal = (props) => {
 
   const handleStateChange = useCallback(
     ({ sortBy, filters, pageIndex }) => {
-      const tableFilters = columnFilterKeys.reduce((acc, key) => {
-        acc[key] = undefined;
-        return acc;
-      }, {});
-
-      filters.forEach((filter) => {
-        let value = filter.value;
-
-        if (value === null || value === undefined || value === "") {
-          return;
-        }
-
-        if (
-          (filter.id === "mappedOn" ||
-            filter.id === "reviewedAt" ||
-            filter.id === "metaReviewedAt") &&
-          value instanceof Date
-        ) {
-          value = value.toISOString().split("T")[0];
+      const tableFilters = { ...props.criteria?.filters };
+
+      columnFilterKeys.forEach((key) => {
+        const filterEntry = filters.find((f) => f.id === key);
+        if (filterEntry) {
+          let value = filterEntry.value;
+          if (value === null || value === undefined || value === "") {
+            tableFilters[key] = undefined;
+          } else if (
+            (key === "mappedOn" || key === "reviewedAt" || key === "metaReviewedAt") &&
+            value instanceof Date
+          ) {
+            tableFilters[key] = value.toISOString().split("T")[0];
+          } else {
+            tableFilters[key] = value;
+          }
+        } else {
+          tableFilters[key] = undefined;
         }
-
-        tableFilters[filter.id] = value;
       });
 
       const newSortCriteria =
@@ -318,6 +316,10 @@ export const TaskAnalysisTableInternal = (props) => {
   }, [criteriaSortForTable, setSortBy]);
 
   useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
     if (!isSyncingRef.current) {
       handleStateChange({ sortBy, filters, pageIndex: props.page ?? 0 });
     }