Refactor the FilterBox component to enhance TypeScript type safety with explicit props, states, and refined filter handling logic.

Author: Simon1375

benchexec/tablegenerator/react-table/src/components/FilterBox/FilterBox.tsx

@@ -12,33 +12,73 @@ import { faClose, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import equals from "deep-equal";
 import { decodeFilter, isNil } from "../../utils/utils";
+
 const classNames = require("classnames");
 
-export default class FilterBox extends React.PureComponent {
-  listeners: any;
-  resetFilterHook: any;
-  constructor(props: any) {
+type IdFilter = {
+  id: "id";
+  values: any[];
+};
+
+type ValueFilter = {
+  id: string;
+  value: any;
+};
+
+type ReactTableFilter = IdFilter | ValueFilter;
+
+type ColumnFilter = {
+  title: string;
+  values: any[];
+};
+
+type ToolFilters = Array<ColumnFilter | undefined>;
+
+interface FilterableTool {
+  name: string;
+  columns: any[];
+}
+
+interface FilterBoxProps {
+  filtered?: ReactTableFilter[];
+  ids: Record<string, unknown>;
+  addTypeToFilter: (filters: ReactTableFilter[]) => void;
+  setFilter: (filters: ReactTableFilter[], replace: boolean) => void;
+  hiddenCols?: any[][];
+  visible: boolean;
+  hide: () => void;
+  headerComponent?: React.ReactNode;
+  filterable: FilterableTool[];
+}
+
+interface FilterBoxState {
+  filters: ToolFilters[];
+  idFilters?: any[] | null;
+}
+
+export default class FilterBox extends React.PureComponent<FilterBoxProps, FilterBoxState> {
+  listeners: Array<() => void>;
+  resetFilterHook: (fun: () => void) => void;
+
+  constructor(props: FilterBoxProps) {
     super(props);
 
     const { filtered } = props;
 
     this.listeners = [];
 
-    this.resetFilterHook = (fun: any) => this.listeners.push(fun);
+    this.resetFilterHook = (fun: () => void) => this.listeners.push(fun);
 
     this.state = {
       filters: this.createFiltersFromReactTableStructure(filtered),
       idFilters: this.retrieveIdFilters(filtered),
     };
   }
 
-  componentDidUpdate(prevProps: any) {
-    // @ts-expect-error TS(2339): Property 'filtered' does not exist on type 'Readon... Remove this comment to see the full error message
+  componentDidUpdate(prevProps: FilterBoxProps) {
     if (!equals(prevProps.filtered, this.props.filtered)) {
       this.setState({
-        // @ts-expect-error TS(2339): Property 'filtered' does not exist on type 'Readon... Remove this comment to see the full error message
         filters: this.createFiltersFromReactTableStructure(this.props.filtered),
-        // @ts-expect-error TS(2339): Property 'filtered' does not exist on type 'Readon... Remove this comment to see the full error message
         idFilters: this.retrieveIdFilters(this.props.filtered),
       });
     }
@@ -50,121 +90,138 @@ export default class FilterBox extends React.PureComponent {
   }
 
   resetIdFilters() {
-    const empty = null; //Object.keys(this.props.ids).map(() => null);
+    const empty: any[] | null = null; //Object.keys(this.props.ids).map(() => null);
     this.setState({ idFilters: empty });
-    // @ts-expect-error TS(2339): Property 'filters' does not exist on type 'Readonl... Remove this comment to see the full error message
     this.sendFilters({ filter: this.state.filters, idFilter: empty });
   }
 
   resetAllContainers() {
-    this.listeners.forEach((fun: any) => fun());
+    this.listeners.forEach((fun) => fun());
   }
 
-  retrieveIdFilters(filters: any) {
-    const possibleIdFilter = filters.find((filter: any) => filter.id === "id");
+  retrieveIdFilters(filters: ReactTableFilter[] | undefined): any[] | undefined {
+    if (!filters || !filters.length) {
+      return [];
+    }
+
+    const possibleIdFilter = filters.find(
+      (filter): filter is IdFilter =>
+        filter.id === "id" && (filter as IdFilter).values !== undefined,
+    );
     return possibleIdFilter ? possibleIdFilter.values : [];
   }
 
-  createFiltersFromReactTableStructure(filters: any) {
+  createFiltersFromReactTableStructure(filters: ReactTableFilter[] | undefined): ToolFilters[] {
     if (!filters || !filters.length) {
       return [];
     }
 
-    const out: any = [];
+    const outByTool: Record<string, ToolFilters> = {};
 
-    for (const { id, value } of filters.flat()) {
-      if (id === "id") {
+    const flattened: ReactTableFilter[] = Array.isArray((filters as any)[0])
+      ? (filters as any).flat()
+      : filters;
+
+    for (const f of flattened) {
+      if (f.id === "id") {
         continue;
       }
-      const { tool, name: title, column } = decodeFilter(id);
-      const toolArr = out[tool] || [];
-      if (!toolArr[column]) {
-        toolArr[column] = { title, values: [value] };
+
+      const { id, value } = f as ValueFilter;
+      const { tool, name, column } = decodeFilter(id) as {
+        tool: string | number;
+        name: string;
+        column: string | number;
+      };
+      const title = name;
+
+      const columnIndex = Number(column);
+      if (!Number.isFinite(columnIndex)) {
+        continue;
+      }
+
+      const toolId = String(tool);
+      const toolArr: ToolFilters = outByTool[toolId] || [];
+
+      if (!toolArr[columnIndex]) {
+        toolArr[columnIndex] = { title, values: [value] };
       } else {
-        toolArr[column].values.push(value);
+        toolArr[columnIndex]!.values.push(value);
       }
-      out[tool] = toolArr;
+      outByTool[toolId] = toolArr;
     }
-    return out;
+    return Object.values(outByTool);
   }
 
   flattenFilterStructure() {
-    // @ts-expect-error TS(2339): Property 'filters' does not exist on type 'Readonl... Remove this comment to see the full error message
-    return Object.values(Object.values(this.state.filters));
+    return Object.values(this.state.filters).flat();
   }
 
-  sendFilters({ filter, idFilter }: any) {
-    const newFilter = [
+  sendFilters({ filter, idFilter }: { filter: ToolFilters[]; idFilter?: any[] | null }) {
+    const newFilter: ReactTableFilter[] = [
       ...filter
-        .map((tool: any, toolIdx: any) => {
-          if (tool === null || tool === undefined) {
+        .map((tool, toolIdx) => {
+          if (!tool) {
             return null;
           }
-          return tool.map((col: any, colIdx: any) => {
-            return col.values.map((val: any) => ({
+          return tool.map((col, colIdx) => {
+            if (!col) {
+              return null;
+            }
+            return col.values.map((val) => ({
               id: `${toolIdx}_${col.title}_${colIdx}`,
               value: val,
             }));
           });
         })
         .flat(3)
-        .filter((i: any) => i !== null && i !== undefined),
+        .filter((i): i is ValueFilter => i !== null && i !== undefined),
     ];
+
     if (idFilter && idFilter.length > 0) {
       newFilter.push({ id: "id", values: idFilter });
     }
 
-    // @ts-expect-error TS(2339): Property 'addTypeToFilter' does not exist on type ... Remove this comment to see the full error message
     this.props.addTypeToFilter(newFilter);
-    // @ts-expect-error TS(2339): Property 'setFilter' does not exist on type 'Reado... Remove this comment to see the full error message
     this.props.setFilter(newFilter, true);
   }
 
-  updateFilters(toolIdx: any, columnIdx: any, data: any) {
+  updateFilters(toolIdx: number, columnIdx: number, data: ColumnFilter) {
     //this.props.setFilter(newFilter);
-    // @ts-expect-error TS(2339): Property 'filters' does not exist on type 'Readonl... Remove this comment to see the full error message
     const newFilters = [...this.state.filters];
-    // @ts-expect-error TS(2339): Property 'idFilters' does not exist on type 'Reado... Remove this comment to see the full error message
     const idFilter = this.state.idFilters;
     newFilters[toolIdx] = newFilters[toolIdx] || [];
-    newFilters[toolIdx][columnIdx] = data;
+    newFilters[toolIdx]![columnIdx] = data;
     this.setState({ filters: newFilters });
     this.sendFilters({ filter: newFilters, idFilter });
   }
 
   updateIdFilters(data: any) {
-    // @ts-expect-error TS(2339): Property 'ids' does not exist on type 'Readonly<{}... Remove this comment to see the full error message
-    const mapped = Object.keys(this.props.ids).map((i) => data[i]);
+    const ids = this.props.ids || {};
+    const mapped = Object.keys(ids).map((i) => (data as any)[i]);
 
     const newFilter = mapped.some((item) => item !== "" && !isNil(item))
       ? mapped
       : undefined;
 
     this.setState({ idFilters: newFilter });
-
-    // @ts-expect-error TS(2339): Property 'filters' does not exist on type 'Readonl... Remove this comment to see the full error message
     this.sendFilters({ filter: this.state.filters, idFilter: newFilter });
   }
 
   render() {
-    // @ts-expect-error TS(2339): Property 'hiddenCols' does not exist on type 'Read... Remove this comment to see the full error message
     const hiddenCols = this.props.hiddenCols || [];
     return (
       <div
         className={classNames("filterBox", {
-          // @ts-expect-error TS(2339): Property 'visible' does not exist on type 'Readonl... Remove this comment to see the full error message
           "filterBox--hidden": !this.props.visible,
         })}
       >
         <div className="filterBox--header">
           <FontAwesomeIcon
             icon={faClose}
             className="filterBox--header--icon"
-            // @ts-expect-error TS(2339): Property 'hide' does not exist on type 'Readonly<{... Remove this comment to see the full error message
             onClick={this.props.hide}
           />
-          // @ts-expect-error TS(2339): Property 'headerComponent' does not
-          exist on type ... Remove this comment to see the full error message
           {this.props.headerComponent}
           <FontAwesomeIcon
             icon={faTrash}
@@ -175,24 +232,18 @@ export default class FilterBox extends React.PureComponent {
 
         <div className="filter-card--container">
           <TaskFilterCard
-            // @ts-expect-error TS(2322): Type '{ ids: any; updateFilters: (data: any) => vo... Remove this comment to see the full error message
             ids={this.props.ids}
             updateFilters={(data: any) => this.updateIdFilters(data)}
             resetFilterHook={this.resetFilterHook}
-            // @ts-expect-error TS(2339): Property 'idFilters' does not exist on type 'Reado... Remove this comment to see the full error message
             filters={this.state.idFilters}
           />
-          // @ts-expect-error TS(2339): Property 'filterable' does not exist on
-          type 'Read... Remove this comment to see the full error message
           {this.props.filterable.map((tool: any, idx: any) => {
             return (
               <FilterContainer
-                // @ts-expect-error TS(2322): Type '{ resetFilterHook: any; updateFilters: (data... Remove this comment to see the full error message
                 resetFilterHook={this.resetFilterHook}
                 updateFilters={(data: any, columnIndex: any) =>
                   this.updateFilters(idx, columnIndex, data)
                 }
-                // @ts-expect-error TS(2339): Property 'filters' does not exist on type 'Readonl... Remove this comment to see the full error message
                 currentFilters={this.state.filters[idx] || []}
                 toolName={tool.name}
                 filters={tool.columns}