Refactor Structure Page

Summary:
This refactor has the following changes:
- Change way to store data: raw data instead of rendered data
- Move render function to separated function component file
- Remove repetitive pattern

Reviewed By: jknoxville

Differential Revision: D21739468

fbshipit-source-id: 1f7e7ae902c3b55f3863300aaed26c2adda898ac

desktop/plugins/databases/DatabaseStructure.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {
+  FlexRow,
+  ManagedTable,
+  TableBodyRow,
+  TableBodyColumn,
+  Value,
+  renderValue,
+} from 'flipper';
+import React, {useMemo} from 'react';
+
+import {Structure} from './index';
+
+function transformRow(
+  columns: Array<string>,
+  row: Array<Value>,
+  index: number,
+): TableBodyRow {
+  const transformedColumns: {[key: string]: TableBodyColumn} = {};
+  for (let i = 0; i < columns.length; i++) {
+    transformedColumns[columns[i]] = {value: renderValue(row[i], true)};
+  }
+  return {key: String(index), columns: transformedColumns};
+}
+
+const DatabaseStructureManagedTable = React.memo(
+  (props: {columns: Array<string>; rows: Array<Array<Value>>}) => {
+    const {columns, rows} = props;
+    const renderRows = useMemo(
+      () =>
+        rows.map((row: Array<Value>, index: number) =>
+          transformRow(columns, row, index),
+        ),
+      [rows, columns],
+    );
+    const renderColumns = useMemo(
+      () =>
+        columns.reduce(
+          (acc, val) =>
+            Object.assign({}, acc, {[val]: {value: val, resizable: true}}),
+          {},
+        ),
+      [columns],
+    );
+    const columnOrder = useMemo(
+      () =>
+        columns.map((name) => ({
+          key: name,
+          visible: true,
+        })),
+      [columns],
+    );
+    return (
+      <FlexRow grow={true}>
+        <ManagedTable
+          floating={false}
+          columnOrder={columnOrder}
+          columns={renderColumns}
+          zebra={true}
+          rows={renderRows}
+          horizontallyScrollable={true}
+        />
+      </FlexRow>
+    );
+  },
+);
+
+export default React.memo((props: {structure: Structure | null}) => {
+  const {structure} = props;
+  if (!structure) {
+    return null;
+  }
+  const {columns, rows, indexesColumns, indexesValues} = structure;
+  return (
+    <>
+      <DatabaseStructureManagedTable columns={columns} rows={rows} />
+      <DatabaseStructureManagedTable
+        columns={indexesColumns}
+        rows={indexesValues}
+      />
+    </>
+  );
+});

desktop/plugins/databases/index.tsx

@@ -36,6 +36,7 @@ import React, {Component, KeyboardEvent, ChangeEvent} from 'react';
 import {DatabaseClient} from './ClientProtocol';
 import ButtonNavigation from './ButtonNavigation';
 import DatabaseDetailSidebar from './DatabaseDetailSidebar';
+import DatabaseStructure from './DatabaseStructure';
 import sqlFormatter from 'sql-formatter';
 import dateFormat from 'dateformat';
 
@@ -94,13 +95,13 @@ type Page = {
   highlightedRows: Array<number>;
 };
 
-type Structure = {
+export type Structure = {
   databaseId: number;
   table: string;
   columns: Array<string>;
-  rows: Array<TableBodyRow>;
+  rows: Array<Array<Value>>;
   indexesColumns: Array<string>;
-  indexesValues: Array<TableBodyRow>;
+  indexesValues: Array<Array<Value>>;
 };
 
 type QueryResult = {
@@ -256,56 +257,6 @@ function transformRow(
   return {key: String(index), columns: transformedColumns};
 }
 
-function renderDatabaseColumns(structure: Structure | null) {
-  if (!structure) {
-    return null;
-  }
-  return (
-    <FlexRow grow={true}>
-      <ManagedTable
-        floating={false}
-        columnOrder={structure.columns.map((name) => ({
-          key: name,
-          visible: true,
-        }))}
-        columns={structure.columns.reduce(
-          (acc, val) =>
-            Object.assign({}, acc, {[val]: {value: val, resizable: true}}),
-          {},
-        )}
-        zebra={true}
-        rows={structure.rows || []}
-        horizontallyScrollable={true}
-      />
-    </FlexRow>
-  );
-}
-
-function renderDatabaseIndexes(structure: Structure | null) {
-  if (!structure) {
-    return null;
-  }
-  return (
-    <FlexRow grow={true}>
-      <ManagedTable
-        floating={false}
-        columnOrder={structure.indexesColumns.map((name) => ({
-          key: name,
-          visible: true,
-        }))}
-        columns={structure.indexesColumns.reduce(
-          (acc, val) =>
-            Object.assign({}, acc, {[val]: {value: val, resizable: true}}),
-          {},
-        )}
-        zebra={true}
-        rows={structure.indexesValues || []}
-        horizontallyScrollable={true}
-      />
-    </FlexRow>
-  );
-}
-
 function renderQueryHistory(history: Array<Query>) {
   if (!history || typeof history === 'undefined') {
     return null;
@@ -549,14 +500,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
             databaseId: event.databaseId,
             table: event.table,
             columns: event.columns,
-            rows: event.rows.map((row: Array<Value>, index: number) =>
+            rows: event.rows,
-              transformRow(event.columns, row, index),
-            ),
             indexesColumns: event.indexesColumns,
-            indexesValues: event.indexesValues.map(
+            indexesValues: event.indexesValues,
-              (row: Array<Value>, index: number) =>
-                transformRow(event.indexesColumns, row, index),
-            ),
           },
         };
       },
@@ -1050,15 +996,6 @@ export default class DatabasesPlugin extends FlipperPlugin<
     });
   };
 
-  renderStructure() {
-    return (
-      <>
-        {renderDatabaseColumns(this.state.currentStructure)}
-        {renderDatabaseIndexes(this.state.currentStructure)}
-      </>
-    );
-  }
-
   renderTable(page: Page | null) {
     if (!page) {
       return null;
@@ -1352,9 +1289,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
             {this.state.viewMode === 'data'
               ? this.renderTable(this.state.currentPage)
               : null}
-            {this.state.viewMode === 'structure'
+            {this.state.viewMode === 'structure' ? (
-              ? this.renderStructure()
+              <DatabaseStructure structure={this.state.currentStructure} />
-              : null}
+            ) : null}
             {this.state.viewMode === 'SQL'
               ? this.renderQuery(this.state.queryResult)
               : null}