Client: Stricter typing

client/src/pages/filaments/create.tsx

@@ -4,6 +4,8 @@ import { Create, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
+import { IVendor } from "../vendors/model";
+import { IFilament } from "./model";
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -12,7 +14,7 @@ interface CreateOrCloneProps {
 export const FilamentCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
-  const { formProps, saveButtonProps, formLoading } = useForm();
+  const { formProps, saveButtonProps, formLoading } = useForm<IFilament>();
 
   if (props.mode === "clone" && formProps.initialValues) {
     // Fix the vendor_id
@@ -21,7 +23,7 @@ export const FilamentCreate: React.FC<
     }
   }
 
-  const { selectProps } = useSelect({
+  const { selectProps } = useSelect<IVendor>({
     resource: "vendor",
     optionLabel: "name",
   });

client/src/pages/filaments/edit.tsx

@@ -12,11 +12,13 @@ import {
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
+import { IVendor } from "../vendors/model";
+import { IFilament } from "./model";
 
 export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps } = useForm();
+  const { formProps, saveButtonProps } = useForm<IFilament>();
 
-  const { selectProps } = useSelect({
+  const { selectProps } = useSelect<IVendor>({
     resource: "vendor",
     optionLabel: "name",
   });

client/src/pages/filaments/list.tsx

@@ -14,12 +14,16 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { IFilament } from "./model";
 import {
-  filterPopulator,
-  genericFilterer,
   genericSorter,
-  getFiltersForField,
   getSortOrderForField,
+  typeSorters,
 } from "../../utils/sorting";
+import {
+  genericFilterer,
+  getFiltersForField,
+  typeFilters,
+  useListFiltersForField,
+} from "../../utils/filtering";
 import { FilterOutlined } from "@ant-design/icons";
 import {
   useInitialTableState,
@@ -28,6 +32,10 @@ import {
 
 dayjs.extend(utc);
 
+interface IFilamentCollapsed extends IFilament {
+  vendor_name: string | null;
+}
+
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   // Load initial state
   const initialState = useInitialTableState("filamentList");
@@ -49,26 +57,31 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
       },
     });
 
+  // Type the sorters and filters
+  const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
+  const typedFilters = typeFilters<IFilamentCollapsed>(filters);
+
   // Store state in local storage
   useStoreInitialState("filamentList", { sorters, filters });
 
-  // Copy dataSource to avoid mutating the original
+  // Collapse the dataSource to a mutable list and add a filament_name field
-  const dataSource = [...(tableProps.dataSource || [])];
+  const dataSource: IFilamentCollapsed[] = (tableProps.dataSource ?? []).map(
-
+    (element) => {
-  // Add a vendor_name field to the dataSource
+      let vendor_name: string | null;
-  dataSource.forEach((element) => {
+      if (element.vendor) {
-    if (element.vendor) {
+        vendor_name = element.vendor.name;
-      element.vendor_name = element.vendor.name;
+      } else {
-    } else {
+        vendor_name = null;
-      element.vendor_name = null;
+      }
+      return { ...element, vendor_name };
     }
-  });
+  );
 
   // Filter dataSource by the filters
-  const filteredDataSource = dataSource.filter(genericFilterer(filters));
+  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
 
   // Sort dataSource by the sorters
-  filteredDataSource.sort(genericSorter(sorters));
+  filteredDataSource.sort(genericSorter(typedSorters));
 
   return (
     <List
@@ -98,43 +111,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="id"
           title="Id"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "id")}
+          sortOrder={getSortOrderForField(typedSorters, "id")}
         />
         <Table.Column
           dataIndex="vendor_name"
           title="Vendor"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "vendor_name")}
+          sortOrder={getSortOrderForField(typedSorters, "vendor_name")}
-          filters={filterPopulator(dataSource, "vendor_name")}
+          filters={useListFiltersForField(dataSource, "vendor_name")}
-          filteredValue={getFiltersForField(filters, "vendor_name")}
+          filteredValue={getFiltersForField(typedFilters, "vendor_name")}
         />
         <Table.Column
           dataIndex="name"
           title="Name"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "name")}
+          sortOrder={getSortOrderForField(typedSorters, "name")}
-          filters={filterPopulator(dataSource, "name")}
+          filters={useListFiltersForField(dataSource, "name")}
-          filteredValue={getFiltersForField(filters, "name")}
+          filteredValue={getFiltersForField(typedFilters, "name")}
         />
         <Table.Column
           dataIndex="material"
           title="Material"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "material")}
+          sortOrder={getSortOrderForField(typedSorters, "material")}
-          filters={filterPopulator(dataSource, "material")}
+          filters={useListFiltersForField(dataSource, "material")}
-          filteredValue={getFiltersForField(filters, "material")}
+          filteredValue={getFiltersForField(typedFilters, "material")}
         />
         <Table.Column
           dataIndex="price"
           title="Price"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "price")}
+          sortOrder={getSortOrderForField(typedSorters, "price")}
         />
         <Table.Column
           dataIndex="density"
           title="Density"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "density")}
+          sortOrder={getSortOrderForField(typedSorters, "density")}
           render={(value) => (
             <NumberFieldUnit
               value={value}
@@ -149,7 +162,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="diameter"
           title="Diameter"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "diameter")}
+          sortOrder={getSortOrderForField(typedSorters, "diameter")}
           render={(value) => (
             <NumberFieldUnit
               value={value}
@@ -164,7 +177,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="weight"
           title="Weight"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "weight")}
+          sortOrder={getSortOrderForField(typedSorters, "weight")}
           render={(value) => {
             if (value === null || value === undefined) {
               return <></>;
@@ -184,7 +197,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="spool_weight"
           title="Spool Weight"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "spool_weight")}
+          sortOrder={getSortOrderForField(typedSorters, "spool_weight")}
           render={(value) => {
             if (value === null || value === undefined) {
               return <></>;
@@ -204,15 +217,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="article_number"
           title="Article Number"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "article_number")}
+          sortOrder={getSortOrderForField(typedSorters, "article_number")}
-          filters={filterPopulator(dataSource, "article_number")}
+          filters={useListFiltersForField(dataSource, "article_number")}
-          filteredValue={getFiltersForField(filters, "article_number")}
+          filteredValue={getFiltersForField(typedFilters, "article_number")}
         />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "registered")}
+          sortOrder={getSortOrderForField(typedSorters, "registered")}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -225,7 +238,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["comment"]}
           title="Comment"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "comment")}
+          sortOrder={getSortOrderForField(typedSorters, "comment")}
         />
         <Table.Column
           title="Actions"

client/src/pages/filaments/model.tsx

@@ -16,5 +16,4 @@ export interface IFilament {
   settings_extruder_temp?: number;
   settings_bed_temp?: number;
   color_hex?: string;
-  [key: string]: unknown;
 }

client/src/pages/filaments/show.tsx

@@ -5,13 +5,14 @@ import { Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { IFilament } from "./model";
 
 dayjs.extend(utc);
 
 const { Title } = Typography;
 
 export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
-  const { queryResult } = useShow();
+  const { queryResult } = useShow<IFilament>();
   const { data, isLoading } = queryResult;
 
   const record = data?.data;

client/src/pages/spools/create.tsx

@@ -5,6 +5,7 @@ import { Form, Input, DatePicker, Select, InputNumber } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
+import { ISpool } from "./model";
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -13,7 +14,7 @@ interface CreateOrCloneProps {
 export const SpoolCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
-  const { formProps, saveButtonProps, formLoading } = useForm();
+  const { formProps, saveButtonProps, formLoading } = useForm<ISpool>();
 
   if (props.mode === "clone" && formProps.initialValues) {
     // Clear out the values that we don't want to clone

client/src/pages/spools/edit.tsx

@@ -5,9 +5,10 @@ import { Form, Input, DatePicker, Select, InputNumber } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
+import { ISpool } from "./model";
 
 export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps } = useForm();
+  const { formProps, saveButtonProps } = useForm<ISpool>();
 
   const { queryResult } = useSelect<IFilament>({
     resource: "filament",

client/src/pages/spools/list.tsx

@@ -14,12 +14,16 @@ import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import {
-  filterPopulator,
-  genericFilterer,
   genericSorter,
-  getFiltersForField,
   getSortOrderForField,
+  typeSorters,
 } from "../../utils/sorting";
+import {
+  genericFilterer,
+  getFiltersForField,
+  typeFilters,
+  useListFiltersForField,
+} from "../../utils/filtering";
 import { ISpool } from "./model";
 import {
   useInitialTableState,
@@ -29,6 +33,10 @@ import { FilterOutlined } from "@ant-design/icons";
 
 dayjs.extend(utc);
 
+interface ISpoolCollapsed extends ISpool {
+  filament_name: string;
+}
+
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   // Load initial state
   const initialState = useInitialTableState("spoolList");
@@ -50,26 +58,31 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
       },
     });
 
+  // Type the sorters and filters
+  const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
+  const typedFilters = typeFilters<ISpoolCollapsed>(filters);
+
   // Store state in local storage
   useStoreInitialState("spoolList", { sorters, filters });
 
-  // Copy dataSource to avoid mutating the original
+  // Collapse the dataSource to a mutable list and add a filament_name field
-  const dataSource = [...(tableProps.dataSource || [])];
+  const dataSource: ISpoolCollapsed[] = (tableProps.dataSource ?? []).map(
-
+    (element) => {
-  // Add a filament_name field to the dataSource
+      let filament_name: string;
-  dataSource.forEach((element) => {
+      if (element.filament.vendor && "name" in element.filament.vendor) {
-    if (element.filament.vendor && "name" in element.filament.vendor) {
+        filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
-      element.filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
+      } else {
-    } else {
+        filament_name = element.filament.name ?? element.filament.id.toString();
-      element.filament_name = element.filament.name;
+      }
+      return { ...element, filament_name };
     }
-  });
+  );
 
   // Filter dataSource by the filters
-  const filteredDataSource = dataSource.filter(genericFilterer(filters));
+  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
 
   // Sort dataSource by the sorters
-  filteredDataSource.sort(genericSorter(sorters));
+  filteredDataSource.sort(genericSorter(typedSorters));
 
   return (
     <List
@@ -99,21 +112,21 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="id"
           title="Id"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "id")}
+          sortOrder={getSortOrderForField(typedSorters, "id")}
         />
         <Table.Column
           dataIndex="filament_name"
           title="Filament"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "filament_name")}
+          sortOrder={getSortOrderForField(typedSorters, "filament_name")}
-          filters={filterPopulator(dataSource, "filament_name")}
+          filters={useListFiltersForField(dataSource, "filament_name")}
-          filteredValue={getFiltersForField(filters, "filament_name")}
+          filteredValue={getFiltersForField(typedFilters, "filament_name")}
         />
         <Table.Column
           dataIndex="used_weight"
           title="Used Weight"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "used_weight")}
+          sortOrder={getSortOrderForField(typedSorters, "used_weight")}
           render={(value) => {
             return (
               <NumberFieldUnit
@@ -130,7 +143,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="remaining_weight"
           title="Estimated Remaining Weight"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "remaining_weight")}
+          sortOrder={getSortOrderForField(typedSorters, "remaining_weight")}
           render={(value) => {
             if (value === null || value === undefined) {
               return <TextField value="Unknown" />;
@@ -150,23 +163,23 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="location"
           title="Location"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "location")}
+          sortOrder={getSortOrderForField(typedSorters, "location")}
-          filters={filterPopulator(dataSource, "location")}
+          filters={useListFiltersForField(dataSource, "location")}
-          filteredValue={getFiltersForField(filters, "location")}
+          filteredValue={getFiltersForField(typedFilters, "location")}
         />
         <Table.Column
           dataIndex="lot_nr"
           title="Lot Nr"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "lot_nr")}
+          sortOrder={getSortOrderForField(typedSorters, "lot_nr")}
-          filters={filterPopulator(dataSource, "lot_nr")}
+          filters={useListFiltersForField(dataSource, "lot_nr")}
-          filteredValue={getFiltersForField(filters, "lot_nr")}
+          filteredValue={getFiltersForField(typedFilters, "lot_nr")}
         />
         <Table.Column
           dataIndex={["first_used"]}
           title="First Used"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "first_used")}
+          sortOrder={getSortOrderForField(typedSorters, "first_used")}
           render={(value) => (
             <DateField
               hidden={!value}
@@ -180,7 +193,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["last_used"]}
           title="Last Used"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "last_used")}
+          sortOrder={getSortOrderForField(typedSorters, "last_used")}
           render={(value) => (
             <DateField
               hidden={!value}
@@ -194,7 +207,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["comment"]}
           title="Comment"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "comment")}
+          sortOrder={getSortOrderForField(typedSorters, "comment")}
         />
         <Table.Column
           title="Actions"

client/src/pages/spools/model.tsx

@@ -11,5 +11,4 @@ export interface ISpool {
   location?: string;
   lot_nr?: string;
   comment?: string;
-  [key: string]: unknown;
 }

client/src/pages/spools/show.tsx

@@ -5,13 +5,14 @@ import { Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { ISpool } from "./model";
 
 dayjs.extend(utc);
 
 const { Title } = Typography;
 
 export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
-  const { queryResult } = useShow();
+  const { queryResult } = useShow<ISpool>();
   const { data, isLoading } = queryResult;
 
   const record = data?.data;

client/src/pages/vendors/create.tsx

@@ -3,6 +3,7 @@ import { IResourceComponentsProps } from "@refinedev/core";
 import { Create, useForm } from "@refinedev/antd";
 import { Form, Input } from "antd";
 import TextArea from "antd/es/input/TextArea";
+import { IVendor } from "./model";
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -11,7 +12,7 @@ interface CreateOrCloneProps {
 export const VendorCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
-  const { formProps, saveButtonProps, formLoading } = useForm();
+  const { formProps, saveButtonProps, formLoading } = useForm<IVendor>();
 
   return (
     <Create

client/src/pages/vendors/edit.tsx

@@ -4,9 +4,10 @@ import { Edit, useForm } from "@refinedev/antd";
 import { Form, Input, DatePicker } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
+import { IVendor } from "./model";
 
 export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps } = useForm();
+  const { formProps, saveButtonProps } = useForm<IVendor>();
 
   return (
     <Edit saveButtonProps={saveButtonProps}>

client/src/pages/vendors/list.tsx

@@ -12,10 +12,11 @@ import { Table, Space, Button } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import {
-  genericFilterer,
   genericSorter,
   getSortOrderForField,
+  typeSorters,
 } from "../../utils/sorting";
+import { genericFilterer, typeFilters } from "../../utils/filtering";
 import { IVendor } from "./model";
 import {
   useInitialTableState,
@@ -46,6 +47,10 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
       },
     });
 
+  // Type the sorters and filters
+  const typedSorters = typeSorters<IVendor>(sorters);
+  const typedFilters = typeFilters<IVendor>(filters);
+
   // Store state in local storage
   useStoreInitialState("vendorList", { sorters, filters });
 
@@ -53,10 +58,10 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const dataSource = [...(tableProps.dataSource || [])];
 
   // Filter dataSource by the filters
-  const filteredDataSource = dataSource.filter(genericFilterer(filters));
+  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
 
   // Sort dataSource by the sorters
-  filteredDataSource.sort(genericSorter(sorters));
+  filteredDataSource.sort(genericSorter(typedSorters));
 
   return (
     <List
@@ -86,19 +91,19 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="id"
           title="Id"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "id")}
+          sortOrder={getSortOrderForField(typedSorters, "id")}
         />
         <Table.Column
           dataIndex="name"
           title="Name"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "name")}
+          sortOrder={getSortOrderForField(typedSorters, "name")}
         />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "registered")}
+          sortOrder={getSortOrderForField(typedSorters, "registered")}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -111,7 +116,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["comment"]}
           title="Comment"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "comment")}
+          sortOrder={getSortOrderForField(typedSorters, "comment")}
         />
         <Table.Column
           title="Actions"

client/src/pages/vendors/model.tsx

@@ -3,5 +3,4 @@ export interface IVendor {
   registered: string;
   name: string;
   comment?: string;
-  [key: string]: unknown;
 }

client/src/pages/vendors/show.tsx

@@ -4,13 +4,14 @@ import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { IVendor } from "./model";
 
 dayjs.extend(utc);
 
 const { Title } = Typography;
 
 export const VendorShow: React.FC<IResourceComponentsProps> = () => {
-  const { queryResult } = useShow();
+  const { queryResult } = useShow<IVendor>();
   const { data, isLoading } = queryResult;
 
   const record = data?.data;

client/src/utils/filtering.ts

@@ -0,0 +1,112 @@
+import { CrudFilter, CrudOperators } from "@refinedev/core";
+import { ColumnFilterItem } from "antd/es/table/interface";
+
+interface TypedCrudFilter<Obj> {
+    field: keyof Obj;
+    operator: Exclude<CrudOperators, "or" | "and">;
+    value: string[];
+}
+
+export function typeFilters<Obj>(filters: CrudFilter[]): TypedCrudFilter<Obj>[] {
+    return filters as TypedCrudFilter<Obj>[]; // <-- Unsafe cast
+}
+
+/**
+ * Returns a filtering function that can be used to filter an array of objects based on the provided filters.
+ * @param filters An array of `CrudFilter` objects that define the filtering criteria.
+ * @returns A function that returns a boolean value based on whether the provided object matches the filtering criteria.
+ */
+export function genericFilterer<Obj>(filters: TypedCrudFilter<Obj>[]) {
+    return (record: Obj) => {
+        for (const filter of filters) {
+            if (!("field" in filter)) {
+                console.error("Filter must be of type LogicalFilter");
+                return false;
+            }
+            if (!Array.isArray(filter.value)) {
+                console.error("Filter value must be an array of strings.");
+                return false;
+            }
+            if (!filter.value.length) {
+                continue;
+            }
+            const value = record[filter.field];
+            let strValue: string;
+            if (value === undefined || value === null) {
+                strValue = "";
+            } else {
+                if (typeof value !== "string") {
+                    console.error("Only string fields can be filtered, field is of type " + typeof value);
+                    return false;
+                } else {
+                    strValue = value;
+                }
+            }
+
+            switch (filter.operator) {
+                case "in":
+                    if (!filter.value.includes(strValue)) {
+                        return false;
+                    }
+                    break;
+                default:
+                    console.error(`Not implemented operator: ${filter.operator}`);
+                    return false;
+            }
+        }
+        return true;
+    }
+}
+
+/**
+ * Populates an array of `ColumnFilterItem` objects based on the unique values of a given field in an array of objects.
+ * @param dataSource An array of objects to filter.
+ * @param field The name of the field to filter on.
+ * @returns An array of `ColumnFilterItem` objects representing the unique values of the specified field in the input array.
+ */
+export function useListFiltersForField<Obj, Field extends keyof Obj>(
+    dataSource: Obj[],
+    field: Field): ColumnFilterItem[] {
+    const filters: ColumnFilterItem[] = [];
+    dataSource.forEach((element) => {
+        const value = element[field];
+        if (typeof value === "string" && value !== "") {
+            // Make sure it's not already in the filters
+            if (filters.find((f) => f.value === value)) {
+                return;
+            }
+            filters.push({
+                text: value,
+                value: value,
+            });
+        }
+    });
+    // Sort the filters
+    filters.sort((a, b) => {
+        if (typeof a.text !== "string" || typeof b.text !== "string") {
+            return 0;
+        }
+        return a.text.localeCompare(b.text);
+    });
+    filters.push({
+        text: "<empty>",
+        value: "",
+    });
+    return filters;
+}
+
+/**
+ * Returns an array of filter values for a given field based on the provided filters.
+ * @param filters An array of `CrudFilter` objects that define the filtering criteria.
+ * @param field The field to get the filter values for.
+ * @returns An array of filter values for the given field.
+ */
+export function getFiltersForField<Obj, Field extends keyof Obj>(filters: TypedCrudFilter<Obj>[], field: Field): string[] {
+    const filterValues: string[] = [];
+    filters.forEach((filter) => {
+        if (filter.field === field) {
+            filterValues.push(...filter.value as string[]);
+        }
+    });
+    return filterValues;
+}

client/src/utils/sorting.ts

@@ -1,8 +1,10 @@
-import { CrudFilter, CrudSort } from "@refinedev/core";
+import { CrudSort } from "@refinedev/core";
-import { ColumnFilterItem, SortOrder } from "antd/es/table/interface";
+import { SortOrder } from "antd/es/table/interface";
 
-interface IObj {
+
-    [key: string]: unknown;
+interface TypedCrudSort<Obj> {
+    field: keyof Obj;
+    order: "asc" | "desc";
 }
 
 /**
@@ -10,8 +12,8 @@ interface IObj {
  * @param sorters An array of `CrudSort` objects that define the sorting criteria.
  * @returns A sorting function that can be used to sort an array of objects based on the provided sorters.
  */
-export function genericSorter(sorters: CrudSort[]) {
+export function genericSorter<Obj>(sorters: TypedCrudSort<Obj>[]) {
-    return (a: IObj, b: IObj) => {
+    return (a: Obj, b: Obj) => {
         for (const sorter of sorters) {
             const aValue = a[sorter.field];
             const bValue = b[sorter.field];
@@ -67,7 +69,7 @@ export function genericSorter(sorters: CrudSort[]) {
  * @param field The field to get the sort order for.
  * @returns The sort order for the given field, or undefined if the field is not being sorted.
  */
-export function getSortOrderForField(sorters: CrudSort[], field: string): SortOrder | undefined {
+export function getSortOrderForField<Obj, Field extends keyof Obj>(sorters: TypedCrudSort<Obj>[], field: Field): SortOrder | undefined {
     const sorter = sorters.find((s) => s.field === field);
     if (sorter) {
         return sorter.order === "asc" ? "ascend" : "descend";
@@ -75,95 +77,6 @@ export function getSortOrderForField(sorters: CrudSort[], field: string): SortOr
     return undefined;
 }
 
-/**
+export function typeSorters<Obj>(sorters: CrudSort[]): TypedCrudSort<Obj>[] {
- * Returns a filtering function that can be used to filter an array of objects based on the provided filters.
+    return sorters as TypedCrudSort<Obj>[]; // <-- Unsafe cast
- * @param filters An array of `CrudFilter` objects that define the filtering criteria.
- * @returns A function that returns a boolean value based on whether the provided object matches the filtering criteria.
- */
-export function genericFilterer(filters: CrudFilter[]) {
-    return (record: IObj) => {
-        for (const filter of filters) {
-            if (!("field" in filter)) {
-                console.error("Filter must be of type LogicalFilter");
-                return false;
-            }
-            if (!Array.isArray(filter.value)) {
-                console.error("Filter value must be an array of strings.");
-                return false;
-            }
-            if (!filter.value.length) {
-                continue;
-            }
-            let value = record[filter.field];
-            if (value === undefined || value === null) {
-                value = "";
-            }
-            if (typeof value !== "string") {
-                console.error("Only string fields can be filtered, field is of type " + typeof value);
-                return false;
-            }
-            switch (filter.operator) {
-                case "in":
-                    if (!filter.value.includes(value)) {
-                        return false;
-                    }
-                    break;
-                default:
-                    console.error(`Not implemented operator: ${filter.operator}`);
-                    return false;
-            }
-        }
-        return true;
-    }
-}
-
-/**
- * Populates an array of `ColumnFilterItem` objects based on the unique values of a given field in an array of objects.
- * @param dataSource An array of objects to filter.
- * @param field The name of the field to filter on.
- * @returns An array of `ColumnFilterItem` objects representing the unique values of the specified field in the input array.
- */
-export function filterPopulator(dataSource: IObj[], field: string): ColumnFilterItem[] {
-    const filters: ColumnFilterItem[] = [];
-    dataSource.forEach((element) => {
-        const value = element[field];
-        if (typeof value === "string" && value !== "") {
-            // Make sure it's not already in the filters
-            if (filters.find((f) => f.value === value)) {
-                return;
-            }
-            filters.push({
-                text: value,
-                value: value,
-            });
-        }
-    });
-    // Sort the filters
-    filters.sort((a, b) => {
-        if (typeof a.text !== "string" || typeof b.text !== "string") {
-            return 0;
-        }
-        return a.text.localeCompare(b.text);
-    });
-    filters.push({
-        text: "<empty>",
-        value: "",
-    });
-    return filters;
-}
-
-/**
- * Returns an array of filter values for a given field based on the provided filters.
- * @param filters An array of `CrudFilter` objects that define the filtering criteria.
- * @param field The field to get the filter values for.
- * @returns An array of filter values for the given field.
- */
-export function getFiltersForField(filters: CrudFilter[], field: string): string[] {
-    const filterValues: string[] = [];
-    filters.forEach((filter) => {
-        if ("field" in filter && filter.field === field) {
-            filterValues.push(...filter.value as string[]);
-        }
-    });
-    return filterValues;
 }