Little bit performance improvement for SafeOwnersForm in safe creation, still has to be improved

2019-06-26 19:24:00 +04:00 · 2019-06-26 19:24:00 +04:00 · f03fde5ffe
parent 9001c52524
commit f03fde5ffe
5 changed files with 43 additions and 37 deletions
--- a/src/components/Table/index.jsx
+++ b/src/components/Table/index.jsx
@ -2,12 +2,12 @@
 import * as React from 'react'
 import classNames from 'classnames'
 import { List } from 'immutable'
-import Row from '~/components/layout/Row'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import { withStyles } from '@material-ui/core/styles'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import TablePagination from '@material-ui/core/TablePagination'
+import Row from '~/components/layout/Row'
 import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
 import TableHead, { type Column } from '~/components/Table/TableHead'
 import { xl } from '~/theme/variables'
@ -31,7 +31,6 @@ type State = {
  orderProp: boolean,
  rowsPerPage: number,
  fixed?: boolean,
-  noBorder: boolean,
 }

 const styles = {
@ -134,13 +133,16 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
    return (
      <React.Fragment>
        {!isEmpty && (
-          <Table aria-labelledby={label} className={!noBorder && classes.root}>
+          <Table aria-labelledby={label} className={noBorder ? '' : classes.root}>
            <TableHead columns={columns} order={order} orderBy={orderByParam} onSort={this.onSort} />
            <TableBody>{children(sortedData)}</TableBody>
          </Table>
        )}
        {isEmpty && (
-          <Row className={classNames(classes.loader, !noBorder && classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
+          <Row
+            className={classNames(classes.loader, !noBorder && classes.root)}
+            style={this.getEmptyStyle(emptyRows + 1)}
+          >
            <CircularProgress size={60} />
          </Row>
        )}
--- a/src/routes/open/components/SafeOwnersForm/index.jsx
+++ b/src/routes/open/components/SafeOwnersForm/index.jsx
@ -1,6 +1,8 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import CheckCircle from '@material-ui/icons/CheckCircle'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import {
@ -15,8 +17,6 @@ import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
 import Img from '~/components/layout/Img'
 import Col from '~/components/layout/Col'
-import InputAdornment from '@material-ui/core/InputAdornment'
-import CheckCircle from '@material-ui/icons/CheckCircle'
 import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
 import Paragraph from '~/components/layout/Paragraph'
 import OpenPaper from '~/components/Stepper/OpenPaper'
@ -74,8 +74,11 @@ const styles = () => ({
 })

 const getAddressValidators = (addresses: string[], position: number) => {
+  // thanks Rich Harris
+  // https://twitter.com/Rich_Harris/status/1125850391155965952
  const copy = addresses.slice()
-  copy.splice(position, 1)
+  copy[position] = copy[copy.length - 1]
+  copy.pop()

  return composeValidators(required, mustBeEthereumAddress, uniqueAddress(copy))
 }
@ -97,7 +100,7 @@ export const calculateValuesAfterRemoving = (index: number, notRemovedOwners: nu
  return initialValues
 }

-class SafeOwners extends React.Component<Props, State> {
+class SafeOwners extends React.PureComponent<Props, State> {
  state = {
    numOwners: 1,
  }
--- a/src/routes/safe/components/Settings/ManageOwners/index.jsx
+++ b/src/routes/safe/components/Settings/ManageOwners/index.jsx
@ -2,16 +2,17 @@
 import React from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Table from '~/components/Table'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
-import TableRow from '@material-ui/core/TableRow'
-import TableCell from '@material-ui/core/TableCell'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
+import Img from '~/components/layout/Img'
 import AddOwnerModal from './AddOwnerModal'
 import RemoveOwnerModal from './RemoveOwnerModal'
 import ReplaceOwnerModal from './ReplaceOwnerModal'
@ -48,6 +49,15 @@ type Props = {
  createTransaction: Function,
 }

+type State = {
+  selectedOwnerAddress?: string,
+  selectedOwnerName?: string,
+  showAddOwner: boolean,
+  showRemoveOwner: boolean,
+  showReplaceOwner: boolean,
+  showEditOwner: boolean,
+}
+
 type Action = 'AddOwner' | 'EditOwner' | 'ReplaceOwner' | 'RemoveOwner'

 class ManageOwners extends React.Component<Props, State> {
@ -78,14 +88,7 @@ class ManageOwners extends React.Component<Props, State> {

  render() {
    const {
-      classes,
-      safeAddress,
-      safeName,
-      owners,
-      threshold,
-      network,
-      userAddress,
-      createTransaction,
+      classes, safeAddress, safeName, owners, threshold, network, userAddress, createTransaction,
    } = this.props
    const {
      showAddOwner,
@ -106,36 +109,33 @@ class ManageOwners extends React.Component<Props, State> {
          <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
            Manage Safe Owners
          </Paragraph>
-          <Table
-            label="owners"
-            columns={columns}
-            data={ownerData}
-            size={ownerData.size}
-            defaultFixed
-            noBorder
-          >
+          <Table label="owners" columns={columns} data={ownerData} size={ownerData.size} defaultFixed noBorder>
            {(sortedData: Array<OwnerRow>) => sortedData.map((row: any, index: number) => (
              <TableRow tabIndex={-1} key={index} className={classes.hide}>
                {autoColumns.map((column: Column) => (
                  <TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
-                    {column.id === OWNERS_TABLE_ADDRESS_ID ? <OwnerAddressTableCell address={row[column.id]} /> : row[column.id]}
+                    {column.id === OWNERS_TABLE_ADDRESS_ID ? (
+                      <OwnerAddressTableCell address={row[column.id]} />
+                    ) : (
+                      row[column.id]
+                    )}
                  </TableCell>
                ))}
                <TableCell component="td">
                  <Row align="end" className={classes.actions}>
-                    <img
+                    <Img
                      alt="Edit owner"
                      className={classes.editOwnerIcon}
                      src={RenameOwnerIcon}
                      onClick={this.onShow('EditOwner', row)}
                    />
-                    <img
+                    <Img
                      alt="Replace owner"
                      className={classes.replaceOwnerIcon}
                      src={ReplaceOwnerIcon}
                      onClick={this.onShow('ReplaceOwner', row)}
                    />
-                    <img
+                    <Img
                      alt="Remove owner"
                      className={classes.removeOwnerIcon}
                      src={RemoveOwnerIcon}
@ -144,7 +144,8 @@ class ManageOwners extends React.Component<Props, State> {
                  </Row>
                </TableCell>
              </TableRow>
-            ))}
+            ))
+            }
          </Table>
        </Block>
        <Hairline />
--- a/src/routes/safe/components/Settings/ManageOwners/style.js
+++ b/src/routes/safe/components/Settings/ManageOwners/style.js
@ -1,7 +1,5 @@
 // @flow
-import {
-  sm, xs, md, lg, border,
-} from '~/theme/variables'
+import { lg } from '~/theme/variables'

 export const styles = () => ({
  title: {
--- a/src/routes/safe/components/Settings/index.jsx
+++ b/src/routes/safe/components/Settings/index.jsx
@ -7,6 +7,8 @@ import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
+import Span from '~/components/layout/Span'
+import Img from '~/components/layout/Img'
 import RemoveSafeModal from './RemoveSafeModal'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
@ -83,10 +85,10 @@ class Settings extends React.Component<Props, State> {
          </Col>
          <Col xs={6} end="sm">
            <Paragraph noMargin size="md" color="error" onClick={this.onShow('RemoveSafe')}>
-              <Paragraph noMargin className={cn(classes.links, classes.removeSafeText)}>
+              <Span className={cn(classes.links, classes.removeSafeText)}>
                Remove Safe
-              </Paragraph>
-              <img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
+              </Span>
+              <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
            </Paragraph>
            <RemoveSafeModal
              onClose={this.onHide('RemoveSafe')}