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,7 +71,10 @@ type Props = {
   currentStep: number | string,
 }
 
-const Breadcrumb = ({ items, currentStep }: Props) => (
+class Breadcrumb extends PureComponent<Props> {
+  render() {
+    const { items, currentStep } = this.props
+    return (
       <BreadcrumbWrapper>
         {items.map((item, i) => {
           const active = i < parseInt(currentStep, 10)
@@ -91,6 +94,8 @@ const Breadcrumb = ({ items, currentStep }: Props) => (
           )
         })}
       </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