From 7d2101c68f40948726ca921df40cfe23fa58aa12 Mon Sep 17 00:00:00 2001 From: Chaiwat Ekkaewnumchai Date: Wed, 6 May 2020 07:30:43 -0700 Subject: [PATCH] Convert Database Plugin to TypeScript Summary: Mainly convert `js` to `tsx` Additional change: - Try not to directly change object value in reduce function - Add emotion styled when there is error using style prop directly Reviewed By: nikoant Differential Revision: D21406943 fbshipit-source-id: 30312fa0b0d2d70fa52c5ff9db747e1a83beb270 --- ...ttonNavigation.js => ButtonNavigation.tsx} | 13 +- .../{ClientProtocol.js => ClientProtocol.tsx} | 73 ++- .../plugins/databases/{index.js => index.tsx} | 428 ++++++++++-------- desktop/plugins/databases/package.json | 14 +- desktop/yarn.lock | 10 + 5 files changed, 298 insertions(+), 240 deletions(-) rename desktop/plugins/databases/{ButtonNavigation.js => ButtonNavigation.tsx} (86%) rename desktop/plugins/databases/{ClientProtocol.js => ClientProtocol.tsx} (58%) rename desktop/plugins/databases/{index.js => index.tsx} (83%) diff --git a/desktop/plugins/databases/ButtonNavigation.js b/desktop/plugins/databases/ButtonNavigation.tsx similarity index 86% rename from desktop/plugins/databases/ButtonNavigation.js rename to desktop/plugins/databases/ButtonNavigation.tsx index ee3dfe464..27550dd1d 100644 --- a/desktop/plugins/databases/ButtonNavigation.js +++ b/desktop/plugins/databases/ButtonNavigation.tsx @@ -8,17 +8,18 @@ */ import {Button, ButtonGroup, Glyph, colors} from 'flipper'; +import React from 'react'; -export default function ButtonNavigation(props: {| +export default function ButtonNavigation(props: { /** Back button is enabled */ - canGoBack: boolean, + canGoBack: boolean; /** Forwards button is enabled */ - canGoForward: boolean, + canGoForward: boolean; /** Callback when back button is clicked */ - onBack: () => void, + onBack: () => void; /** Callback when forwards button is clicked */ - onForward: () => void, -|}) { + onForward: () => void; +}) { return ( )} - + ); } } @@ -429,6 +446,7 @@ class PageInfo extends Component< export default class DatabasesPlugin extends FlipperPlugin< DatabasesPluginState, Actions, + {} > { databaseClient: DatabaseClient; @@ -451,7 +469,7 @@ export default class DatabasesPlugin extends FlipperPlugin< queryHistory: [], }; - reducers = [ + reducers = ([ [ 'UpdateDatabases', ( @@ -648,7 +666,7 @@ export default class DatabasesPlugin extends FlipperPlugin< 'NextPage', ( state: DatabasesPluginState, - event: UpdatePageEvent, + _event: UpdatePageEvent, ): DatabasesPluginState => { return { ...state, @@ -661,7 +679,7 @@ export default class DatabasesPlugin extends FlipperPlugin< 'PreviousPage', ( state: DatabasesPluginState, - event: UpdatePageEvent, + _event: UpdatePageEvent, ): DatabasesPluginState => { return { ...state, @@ -674,7 +692,7 @@ export default class DatabasesPlugin extends FlipperPlugin< 'Execute', ( state: DatabasesPluginState, - results: ExecuteEvent, + _results: ExecuteEvent, ): DatabasesPluginState => { const timeBefore = Date.now(); if ( @@ -756,7 +774,7 @@ export default class DatabasesPlugin extends FlipperPlugin< 'Refresh', ( state: DatabasesPluginState, - event: RefreshEvent, + _event: RefreshEvent, ): DatabasesPluginState => { return { ...state, @@ -831,17 +849,42 @@ export default class DatabasesPlugin extends FlipperPlugin< }; }, ], - ].reduce((acc, val) => { - const name = val[0]; - const f = val[1]; + ] as Array< + [ + string, + ( + state: DatabasesPluginState, + event: UpdateQueryEvent, + ) => DatabasesPluginState, + ] + >).reduce( + ( + acc: { + [name: string]: ( + state: DatabasesPluginState, + event: UpdateQueryEvent, + ) => DatabasesPluginState; + }, + val: [ + string, + ( + state: DatabasesPluginState, + event: UpdateQueryEvent, + ) => DatabasesPluginState, + ], + ) => { + const name = val[0]; + const f = val[1]; - acc[name] = (previousState, event) => { - const newState = f(previousState, event); - this.onStateChanged(previousState, newState); - return newState; - }; - return acc; - }, {}); + acc[name] = (previousState, event) => { + const newState = f(previousState, event); + this.onStateChanged(previousState, newState); + return newState; + }; + return acc; + }, + {}, + ); onStateChanged( previousState: DatabasesPluginState, @@ -938,6 +981,12 @@ export default class DatabasesPlugin extends FlipperPlugin< } } + // to keep eslint happy + constructor(props: FlipperPluginProps<{}>) { + super(props); + this.databaseClient = new DatabaseClient(this.client); + } + init() { this.databaseClient = new DatabaseClient(this.client); this.databaseClient.getDatabases({}).then((databases) => { @@ -1026,7 +1075,7 @@ export default class DatabasesPlugin extends FlipperPlugin< this.setState({query: selected.target.value}); }; - onGoToRow = (row: number, count: number) => { + onGoToRow = (row: number, _count: number) => { this.dispatchAction({type: 'GoToRow', row: row}); }; @@ -1092,7 +1141,7 @@ export default class DatabasesPlugin extends FlipperPlugin< ); }; - sidebarRows = (id: number, table: QueriedTable) => { + sidebarRows(id: number, table: QueriedTable): TableRows { const columns = table.columns; const row = table.rows[id]; if (columns.length === 1) { @@ -1116,14 +1165,14 @@ export default class DatabasesPlugin extends FlipperPlugin< } return sidebarArray; } else { - return columns.map((column, i) => + return columns.map((column, i) => this.buildSidebarRow(columns[i], row.columns[columns[i]].value), ); } - }; + } - buildSidebarRow = (key: string, val: any) => { - let output = ''; + buildSidebarRow(key: string, val: any): TableBodyRow { + let output: any = ''; // TODO(T60896483): Narrow the scope of this try/catch block. try { const parsed = JSON.parse(val.props.children); @@ -1147,9 +1196,9 @@ export default class DatabasesPlugin extends FlipperPlugin< }, key: key, }; - }; + } - renderQuery(query: ?QueryResult) { + renderQuery(query: QueryResult | null) { if (!query || query === null) { return null; } @@ -1170,10 +1219,11 @@ export default class DatabasesPlugin extends FlipperPlugin< key: name, visible: true, }))} - columns={columns.reduce((acc, val) => { - acc[val] = {value: val, resizable: true}; - return acc; - }, {})} + columns={columns.reduce( + (acc, val) => + Object.assign({}, acc, {[val]: {value: val, resizable: true}}), + {}, + )} zebra={true} rows={rows} horizontallyScrollable={true} @@ -1183,7 +1233,7 @@ export default class DatabasesPlugin extends FlipperPlugin< table: { columns: columns, rows: rows, - highlightedRows: highlightedRows, + highlightedRows: highlightedRows.map(parseInt), }, id: null, count: null, @@ -1270,10 +1320,10 @@ export default class DatabasesPlugin extends FlipperPlugin< x.name) - .reduce((obj, item) => { - obj[item] = item; - return obj; - }, {})} + .reduce( + (obj, item) => Object.assign({}, obj, {[item]: item}), + {}, + )} selected={ this.state.databases[this.state.selectedDatabase - 1]?.name } @@ -1323,7 +1373,7 @@ export default class DatabasesPlugin extends FlipperPlugin< this.state.query !== null && typeof this.state.query !== 'undefined' ? this.state.query.value - : null + : undefined } /> } @@ -1333,7 +1383,7 @@ export default class DatabasesPlugin extends FlipperPlugin<