Merge pull request #138 from meriadec/master

Prevent unnecessary re-renders on Breadcrumb in send modal

src/components/Breadcrumb/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import styled from 'styled-components'
 
 import Box from 'components/base/Box'
@@ -71,26 +71,31 @@ type Props = {
   currentStep: number | string,
 }
 
-const Breadcrumb = ({ items, currentStep }: Props) => (
-  <BreadcrumbWrapper>
-    {items.map((item, i) => {
-      const active = i < parseInt(currentStep, 10)
-      const start = i === 0
-      return (
-        <Fragment
-          key={i} // eslint-disable-line react/no-array-index-key
-        >
-          {!start && <BreadcrumbSeparator active={active} />}
-          <BreadcrumbStep active={active}>
-            <BreadcrumbNumberWrapper>
-              <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
-            </BreadcrumbNumberWrapper>
-            <Box fontSize={3}>{item.label}</Box>
-          </BreadcrumbStep>
-        </Fragment>
-      )
-    })}
-  </BreadcrumbWrapper>
-)
+class Breadcrumb extends PureComponent<Props> {
+  render() {
+    const { items, currentStep } = this.props
+    return (
+      <BreadcrumbWrapper>
+        {items.map((item, i) => {
+          const active = i < parseInt(currentStep, 10)
+          const start = i === 0
+          return (
+            <Fragment
+              key={i} // eslint-disable-line react/no-array-index-key
+            >
+              {!start && <BreadcrumbSeparator active={active} />}
+              <BreadcrumbStep active={active}>
+                <BreadcrumbNumberWrapper>
+                  <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
+                </BreadcrumbNumberWrapper>
+                <Box fontSize={3}>{item.label}</Box>
+              </BreadcrumbStep>
+            </Fragment>
+          )
+        })}
+      </BreadcrumbWrapper>
+    )
+  }
+}
 
 export default Breadcrumb

src/components/modals/Send.js

@@ -99,6 +99,16 @@ class Send extends PureComponent<Props, State> {
     ...defaultState,
   }
 
+  componentWillMount() {
+    const { t } = this.props
+    this._items = [
+      { label: t('sendModal.Amount') },
+      { label: t('sendModal.Summary') },
+      { label: t('sendModal.SecureValidation') },
+      { label: t('sendModal.Confirmation') },
+    ]
+  }
+
   getStepProps(data: any) {
     const { inputValue, step } = this.state
     const { t } = this.props
@@ -127,6 +137,8 @@ class Send extends PureComponent<Props, State> {
     }
   }
 
+  _items = []
+
   handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
     this.setState(prev => ({
       inputValue: {
@@ -158,15 +170,7 @@ class Send extends PureComponent<Props, State> {
           return (
             <Fragment>
               <ModalBody p={3}>
-                <Breadcrumb
-                  currentStep={step}
-                  items={[
-                    { label: 'Amount' },
-                    { label: 'Summary' },
-                    { label: 'Secure validation' },
-                    { label: 'Confirmation' },
-                  ]}
-                />
+                <Breadcrumb currentStep={step} items={this._items} />
               </ModalBody>
               <ModalBody onClose={onClose}>
                 <Step {...this.getStepProps(data)} />

static/i18n/en/translation.yml

@@ -66,3 +66,9 @@ update:
 
 IsUnlocked:
   password: Password
+
+sendModal:
+  Amount: Amount
+  Summary: Summary
+  SecureValidation: Secure validation
+  Confirmation: Confirmation

static/i18n/fr/translation.yml

@@ -66,3 +66,9 @@ update:
 
 IsUnlocked:
   password: Mot de passe
+
+sendModal:
+  Amount: Montant
+  Summary: Résumé
+  SecureValidation: Validation sécurisée
+  Confirmation: Confirmation