Type improvements

Summary: some type simplifications, that makes it easier to reuse data sources and helps type inference

Reviewed By: passy

Differential Revision: D28413380

fbshipit-source-id: 261a8b981bf18a00edc3075926bd668322e1c37d

desktop/flipper-plugin/src/ui/DataList.tsx

@@ -30,6 +30,7 @@ import styled from '@emotion/styled';
 import {DataTableManager} from './data-table/DataTableManager';
 import {Atom, createState} from '../state/atom';
 import {useAssertStableRef} from '../utils/useAssertStableRef';
+import {DataSource} from '../data-source';
 
 const {Text} = Typography;
 
@@ -62,7 +63,7 @@ interface DataListBaseProps<T extends Item> {
   /**
    * Items to display. Per item at least a title and unique id should be provided
    */
-  items: readonly Item[];
+  items: DataSource<Item> | readonly Item[];
   /**
    * Custom render function. By default the component will render the `title` in bold and description (if any) below it
    */
@@ -152,7 +153,8 @@ export const DataList: React.FC<DataListProps<any>> = function DataList<
       <DataTable<any>
         {...tableProps}
         tableManagerRef={tableManagerRef}
-        records={items}
+        records={Array.isArray(items) ? items : undefined}
+        dataSource={Array.isArray(items) ? undefined : (items as any)}
         recordsKey="id"
         columns={dataListColumns}
         onSelect={handleSelect}

desktop/flipper-plugin/src/ui/data-table/DataTable.tsx

@@ -51,6 +51,7 @@ import {Formatter} from '../DataFormatter';
 import {usePluginInstance} from '../../plugin/PluginContext';
 import {debounce} from 'lodash';
 import {useInUnitTest} from '../../utils/useInUnitTest';
+import {createDataSource} from 'flipper-plugin/src/state/createDataSource';
 
 interface DataTableBaseProps<T = any> {
   columns: DataTableColumn<T>[];
@@ -66,9 +67,7 @@ interface DataTableBaseProps<T = any> {
   tableManagerRef?: RefObject<DataTableManager<T> | undefined>; // Actually we want a MutableRefObject, but that is not what React.createRef() returns, and we don't want to put the burden on the plugin dev to cast it...
   onCopyRows?(records: T[]): string;
   onContextMenu?: (selection: undefined | T) => React.ReactElement;
-  onRenderEmpty?:
-    | null
-    | ((dataSource?: DataSource<T, any, any>) => React.ReactElement);
+  onRenderEmpty?: null | ((dataSource?: DataSource<T>) => React.ReactElement);
 }
 
 export type ItemRenderer<T> = (
@@ -79,7 +78,7 @@ export type ItemRenderer<T> = (
 
 type DataTableInput<T = any> =
   | {
-      dataSource: DataSource<T, any, any>;
+      dataSource: DataSource<T>;
       records?: undefined;
       recordsKey?: undefined;
     }
@@ -525,11 +524,9 @@ function normalizeDataSourceInput<T>(props: DataTableInput<T>): DataSource<T> {
     return props.dataSource;
   }
   if (props.records) {
-    const [dataSource] = useState(() => {
-      const ds = new DataSource<T>(props.recordsKey);
-      syncRecordsToDataSource(ds, props.records);
-      return ds;
-    });
+    const [dataSource] = useState(() =>
+      createDataSource(props.records, {key: props.recordsKey}),
+    );
     useEffect(() => {
       syncRecordsToDataSource(dataSource, props.records);
     }, [dataSource, props.records]);

desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx

@@ -64,7 +64,7 @@ type DataManagerActions<T> =
   | Action<
       'selectItemById',
       {
-        id: string | number;
+        id: string;
         addToSelection?: boolean;
       }
     >
@@ -213,7 +213,7 @@ export const dataTableManagerReducer = produce<
     }
     case 'setColumnFilterFromSelection': {
       const items = getSelectedItems(
-        config.dataSource as DataSource,
+        config.dataSource as DataSource<any>,
         draft.selection,
       );
       items.forEach((item, index) => {
@@ -258,7 +258,7 @@ export type DataTableManager<T> = {
     end: number,
     allowUnselect?: boolean,
   ): void;
-  selectItemById(id: string | number, addToSelection?: boolean): void;
+  selectItemById(id: string, addToSelection?: boolean): void;
   clearSelection(): void;
   getSelectedItem(): T | undefined;
   getSelectedItems(): readonly T[];