better types

huridocs · Jun 19, 2024 · d128153 · d128153
1 parent 5bc5c88
commit d128153
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/app/react/V2/Components/UI/TableV2/DnDComponents.tsx b/app/react/V2/Components/UI/TableV2/DnDComponents.tsx
@@ -5,8 +5,9 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { flexRender, Row } from '@tanstack/react-table';
 import { t, Translate } from 'app/I18N';
+import { RowWithId } from './Table';
 
-const RowDragHandleCell = <T extends { rowId: string }>({ row }: { row: Row<T> }) => {
+const RowDragHandleCell = <T extends RowWithId<T>>({ row }: { row: Row<T> }) => {
   const { attributes, listeners, isDragging } = useSortable({
     id: row.id,
   });
@@ -27,7 +28,7 @@ const RowDragHandleCell = <T extends { rowId: string }>({ row }: { row: Row<T> }
   );
 };
 
-const DraggableRow = <T extends { rowId: string }>({ row }: { row: Row<T> }) => {
+const DraggableRow = <T extends RowWithId<T>>({ row }: { row: Row<T> }) => {
   const { transform, transition, setNodeRef, isDragging } = useSortable({
     id: row.id,
   });

diff --git a/app/react/V2/Components/UI/TableV2/Table.tsx b/app/react/V2/Components/UI/TableV2/Table.tsx
@@ -28,15 +28,20 @@ import { SortingChevrons } from './SortingChevrons';
 //whe should mark columns as having sort arrows when defining columns
 //whe should render an error if there are repeated ids
 
-type TableProps<T extends { rowId: string; subRows?: { rowId: string }[] }> = {
+type RowWithId<T extends { rowId: string }> = {
+  rowId: string;
+  subRows?: T[];
+};
+
+type TableProps<T extends RowWithId<T>> = {
   columns: ColumnDef<T, any>[];
   dataState: [state: T[], setter?: React.Dispatch<React.SetStateAction<T[]>>];
   selectionState?: [state: {}, setter: React.Dispatch<React.SetStateAction<{}>>];
   sorting?: 'dnd' | 'headers';
   className?: string;
 };
 
-const Table = <T extends { rowId: string; subRows?: { rowId: string }[] }>({
+const Table = <T extends RowWithId<T>>({
   columns,
   dataState,
   selectionState,
@@ -154,5 +159,5 @@ const Table = <T extends { rowId: string; subRows?: { rowId: string }[] }>({
   );
 };
 
-export { type TableProps };
+export type { TableProps, RowWithId };
 export { Table };
diff --git a/app/react/V2/Components/UI/TableV2/helpers.ts b/app/react/V2/Components/UI/TableV2/helpers.ts
@@ -1,11 +1,9 @@
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { Row } from 'react-table';
 import { cloneDeep } from 'lodash';
-import { TableProps } from './Table';
+import { RowWithId, TableProps } from './Table';
 
-const getDataIds = <T extends { rowId: string; subRows?: { rowId: string }[] }>(
-  data: TableProps<T>['dataState'][0]
-) => {
+const getDataIds = <T extends RowWithId<T>>(data: TableProps<T>['dataState'][0]) => {
   const identifiers: { id: UniqueIdentifier; parentId?: string }[] = [];
 
   data.forEach(element => {
@@ -21,7 +19,7 @@ const getDataIds = <T extends { rowId: string; subRows?: { rowId: string }[] }>(
   return identifiers;
 };
 
-const dndSortHandler = <T extends { rowId: string; subRows?: { rowId: string }[] }>(
+const dndSortHandler = <T extends RowWithId<T>>(
   currentState: TableProps<T>['dataState'][0],
   dataIds: { id: UniqueIdentifier; parentId?: string }[],
   activeId: string | number,
@@ -57,7 +55,7 @@ const dndSortHandler = <T extends { rowId: string; subRows?: { rowId: string }[]
   return state;
 };
 
-const sortHandler = <T extends { rowId: string; subRows?: { rowId: string }[] }>(rows: Row<T>[]) =>
+const sortHandler = <T extends RowWithId<T>>(rows: Row<T>[]) =>
   rows.map(row => {
     const { original, subRows } = row;
     if (subRows.length) {