From 2b33f73b289153cda1b4a83cb07daa0460798f18 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Thu, 6 Jul 2023 16:41:25 +0200
Subject: [PATCH] Client: Typing for spool and vendor useTable

---
 client/src/pages/spools/list.tsx   | 5 +++--
 client/src/pages/spools/model.tsx  | 1 +
 client/src/pages/vendors/list.tsx  | 3 ++-
 client/src/pages/vendors/model.tsx | 1 +
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 355ee4e..032f4be 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -19,6 +19,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { genericSorter } from "../../utils/sorting";
 import { SortOrder } from "antd/es/table/interface";
+import { ISpool } from "./model";
 
 dayjs.extend(utc);
 
@@ -38,7 +39,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   });
 
   // Fetch data from the API
-  const { tableProps, sorters } = useTable({
+  const { tableProps, sorters } = useTable<ISpool>({
     syncWithLocation: false,
     pagination: {
       mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
@@ -62,7 +63,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
 
   // Add a filament_name field to the dataSource
   dataSource.forEach((element) => {
-    if ("vendor" in element.filament) {
+    if (element.filament.vendor && "name" in element.filament.vendor) {
       element.filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
     } else {
       element.filament_name = element.filament.name;
diff --git a/client/src/pages/spools/model.tsx b/client/src/pages/spools/model.tsx
index b2cfa29..5de21ca 100644
--- a/client/src/pages/spools/model.tsx
+++ b/client/src/pages/spools/model.tsx
@@ -11,4 +11,5 @@ export interface ISpool {
   location?: string;
   lot_nr?: string;
   comment?: string;
+  [key: string]: unknown;
 }
diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
index 1c3703c..ebe93bf 100644
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -17,6 +17,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { genericSorter } from "../../utils/sorting";
 import { SortOrder } from "antd/es/table/interface";
+import { IVendor } from "./model";
 
 dayjs.extend(utc);
 
@@ -36,7 +37,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   });
 
   // Fetch data from the API
-  const { tableProps, sorters } = useTable({
+  const { tableProps, sorters } = useTable<IVendor>({
     syncWithLocation: false,
     pagination: {
       mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
diff --git a/client/src/pages/vendors/model.tsx b/client/src/pages/vendors/model.tsx
index 59335a9..eafced9 100644
--- a/client/src/pages/vendors/model.tsx
+++ b/client/src/pages/vendors/model.tsx
@@ -3,4 +3,5 @@ export interface IVendor {
   registered: string;
   name: string;
   comment?: string;
+  [key: string]: unknown;
 }