diff --git a/src/__tests__/createTablePlugin.node.js b/src/__tests__/createTablePlugin.node.js index bc1150967..85e8b133a 100644 --- a/src/__tests__/createTablePlugin.node.js +++ b/src/__tests__/createTablePlugin.node.js @@ -6,15 +6,30 @@ */ import {createTablePlugin} from '../createTablePlugin.js'; + +import type {TableRows_immutable} from 'flipper'; + +//import type {PersistedState, RowData} from '../createTablePlugin.js'; import {FlipperPlugin} from '../plugin.js'; +import {List, Map as ImmutableMap} from 'immutable'; + const PROPS = { method: 'method', resetMethod: 'resetMethod', columns: {}, columnSizes: {}, - renderSidebar: () => {}, - buildRow: () => {}, + renderSidebar: (r: {id: string}) => {}, + buildRow: (r: {id: string}) => {}, +}; + +type PersistedState = {| + rows: TableRows_immutable, + datas: ImmutableMap, +|}; + +type RowData = { + id: string, }; test('createTablePlugin returns FlipperPlugin', () => { @@ -24,29 +39,27 @@ test('createTablePlugin returns FlipperPlugin', () => { test('persistedStateReducer is resetting data', () => { const resetMethod = 'resetMethod'; - const tablePlugin = createTablePlugin({...PROPS, resetMethod}); + const tablePlugin = createTablePlugin({...PROPS, resetMethod}); - // $FlowFixMe persistedStateReducer exists for createTablePlugin - const {rows, datas} = tablePlugin.persistedStateReducer( - { - datas: {'1': {id: '1'}}, - rows: [ - { - key: '1', - columns: { - id: { - value: '1', - }, + const ps: PersistedState = { + datas: ImmutableMap({'1': {id: '1'}}), + rows: List([ + { + key: '1', + columns: { + id: { + value: '1', }, }, - ], - }, - resetMethod, - {}, - ); + }, + ]), + }; - expect(datas).toEqual({}); - expect(rows).toEqual([]); + // $FlowFixMe persistedStateReducer exists for createTablePlugin + const {rows, datas} = tablePlugin.persistedStateReducer(ps, resetMethod, {}); + + expect(datas.toJSON()).toEqual({}); + expect(rows.size).toBe(0); }); test('persistedStateReducer is adding data', () => { @@ -56,14 +69,11 @@ test('persistedStateReducer is adding data', () => { // $FlowFixMe persistedStateReducer exists for createTablePlugin const {rows, datas} = tablePlugin.persistedStateReducer( - { - datas: {}, - rows: [], - }, + tablePlugin.defaultPersistedState, method, {id}, ); - expect(rows.length).toBe(1); - expect(Object.keys(datas)).toEqual([id]); + expect(rows.size).toBe(1); + expect([...datas.keys()]).toEqual([id]); }); diff --git a/src/createTablePlugin.js b/src/createTablePlugin.js index 5045fece7..60aa08f5e 100644 --- a/src/createTablePlugin.js +++ b/src/createTablePlugin.js @@ -7,7 +7,7 @@ import type { TableHighlightedRows, - TableRows, + TableRows_immutable, TableColumnSizes, TableColumns, } from 'flipper'; @@ -16,13 +16,15 @@ import FlexColumn from './ui/components/FlexColumn'; import Button from './ui/components/Button'; import DetailSidebar from './chrome/DetailSidebar'; import {FlipperPlugin} from './plugin'; -import SearchableTable from './ui/components/searchable/SearchableTable'; +import SearchableTable_immutable from './ui/components/searchable/SearchableTable_immutable'; import textContent from './utils/textContent.js'; import createPaste from './fb-stubs/createPaste.js'; +import {List, Map as ImmutableMap} from 'immutable'; + type ID = string; -type RowData = { +export type RowData = { id: ID, }; @@ -35,9 +37,9 @@ type Props = {| buildRow: (row: T) => any, |}; -type PersistedState = {| - rows: TableRows, - datas: {[key: ID]: T}, +export type PersistedState = {| + rows: TableRows_immutable, + datas: ImmutableMap, |}; type State = {| @@ -58,41 +60,36 @@ type State = {| * the client in an unknown state. */ export function createTablePlugin(props: Props) { - return class extends FlipperPlugin> { + return class extends FlipperPlugin> { static keyboardActions = ['clear', 'createPaste']; - static defaultPersistedState: PersistedState = { - rows: [], - datas: {}, + static defaultPersistedState = { + rows: List(), + datas: ImmutableMap(), }; static persistedStateReducer = ( - persistedState: PersistedState, + persistedState: PersistedState<*>, method: string, payload: T | Array, - ): $Shape> => { + ): $Shape> => { if (method === props.method) { - const newRows = []; - const newData = {}; - const datas = Array.isArray(payload) ? payload : [payload]; - - for (const data of datas.reverse()) { - if (data.id == null) { - console.warn('The data sent did not contain an ID.', data); - } - if (persistedState.datas[data.id] == null) { - newData[data.id] = data; - newRows.push(props.buildRow(data)); - } - } - return { - datas: {...persistedState.datas, ...newData}, - rows: [...persistedState.rows, ...newRows], - }; + return List(Array.isArray(payload) ? payload : [payload]).reduce( + (ps: PersistedState<*>, data: T) => { + if (data.id == null) { + console.warn('The data sent did not contain an ID.', data); + } + return { + datas: ps.datas.set(data.id, data), + rows: ps.rows.push(props.buildRow(data)), + }; + }, + persistedState, + ); } else if (method === props.resetMethod) { return { - rows: [], - datas: {}, + rows: List(), + datas: ImmutableMap(), }; } else { return {}; @@ -113,8 +110,8 @@ export function createTablePlugin(props: Props) { clear = () => { this.props.setPersistedState({ - rows: [], - datas: {}, + rows: List(), + datas: ImmutableMap(), }); this.setState({ selectedIds: [], @@ -154,7 +151,8 @@ export function createTablePlugin(props: Props) { const selectedId = selectedIds.length !== 1 ? null : selectedIds[0]; if (selectedId != null) { - return renderSidebar(datas[selectedId]); + const data = datas.get(selectedId); + return data != null ? renderSidebar(data) : null; } else { return null; } @@ -166,7 +164,7 @@ export function createTablePlugin(props: Props) { return ( -