Client: Stricter typing

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;