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
-  const dataSource = [...(tableProps.dataSource || [])];
-
-  // Add a vendor_name field to the dataSource
-  dataSource.forEach((element) => {
-    if (element.vendor) {
-      element.vendor_name = element.vendor.name;
-    } else {
-      element.vendor_name = null;
+  // Collapse the dataSource to a mutable list and add a filament_name field
+  const dataSource: IFilamentCollapsed[] = (tableProps.dataSource ?? []).map(
+    (element) => {
+      let vendor_name: string | null;
+      if (element.vendor) {
+        vendor_name = element.vendor.name;
+      } else {
+        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")}
-          filters={filterPopulator(dataSource, "vendor_name")}
-          filteredValue={getFiltersForField(filters, "vendor_name")}
+          sortOrder={getSortOrderForField(typedSorters, "vendor_name")}
+          filters={useListFiltersForField(dataSource, "vendor_name")}
+          filteredValue={getFiltersForField(typedFilters, "vendor_name")}
         />
         <Table.Column
           dataIndex="name"
           title="Name"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "name")}
-          filters={filterPopulator(dataSource, "name")}
-          filteredValue={getFiltersForField(filters, "name")}
+          sortOrder={getSortOrderForField(typedSorters, "name")}
+          filters={useListFiltersForField(dataSource, "name")}
+          filteredValue={getFiltersForField(typedFilters, "name")}
         />
         <Table.Column
           dataIndex="material"
           title="Material"
           sorter={true}
-          sortOrder={getSortOrderForField(sorters, "material")}
-          filters={filterPopulator(dataSource, "material")}
-          filteredValue={getFiltersForField(filters, "material")}
+          sortOrder={getSortOrderForField(typedSorters, "material")}
+          filters={useListFiltersForField(dataSource, "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")}
-          filters={filterPopulator(dataSource, "article_number")}
-          filteredValue={getFiltersForField(filters, "article_number")}
+          sortOrder={getSortOrderForField(typedSorters, "article_number")}
+          filters={useListFiltersForField(dataSource, "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;