From ec1f3fa19a2261b04a034ea104e1c04c3acb1439 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Sun, 10 Nov 2019 01:30:07 -0500
Subject: [PATCH] Fix threebox last updated proptype (#7375)

* Use child components for multiple notifications component

The multiple notifications component has been updated to take its child
components as children rather than as a props array, so that the child
components are never executed in the case where they aren't needed.

* Fix threebox last updated proptype
---
 .../multiple-notifications.component.js       | 13 +++---
 ui/app/pages/home/home.component.js           | 41 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
index 040890e18..a854a7dda 100644
--- a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
+++ b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 export default class MultipleNotifications extends PureComponent {
   static propTypes = {
-    notifications: PropTypes.array,
+    children: PropTypes.array,
     classNames: PropTypes.array,
   }
 
@@ -14,11 +14,10 @@ export default class MultipleNotifications extends PureComponent {
 
   render () {
     const { showAll } = this.state
-    const { notifications, classNames = [] } = this.props
+    const { children, classNames = [] } = this.props
 
-    const notificationsToBeRendered = notifications.filter(notificationConfig => notificationConfig.shouldBeRendered)
-
-    if (notificationsToBeRendered.length === 0) {
+    const childrenToRender = children.filter(child => child)
+    if (childrenToRender.length === 0) {
       return null
     }
 
@@ -29,12 +28,12 @@ export default class MultipleNotifications extends PureComponent {
           'home-notification-wrapper--show-first': !showAll,
         })}
       >
-        { notificationsToBeRendered.map(notificationConfig => notificationConfig.component) }
+        { childrenToRender }
         <div
           className="home-notification-wrapper__i-container"
           onClick={() => this.setState({ showAll: !showAll })}
         >
-          {notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
+          {childrenToRender.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
             'flipped': !showAll,
           })} /> : null}
         </div>
diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index f96300c9c..531cca851 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -42,7 +42,7 @@ export default class Home extends PureComponent {
     selectedAddress: PropTypes.string,
     restoreFromThreeBox: PropTypes.func,
     setShowRestorePromptToFalse: PropTypes.func,
-    threeBoxLastUpdated: PropTypes.string,
+    threeBoxLastUpdated: PropTypes.number,
   }
 
   componentWillMount () {
@@ -119,10 +119,10 @@ export default class Home extends PureComponent {
               <TransactionView>
                 <MultipleNotifications
                   className
-                  notifications={[
-                    {
-                      shouldBeRendered: showPrivacyModeNotification,
-                      component: <HomeNotification
+                >
+                  {
+                    showPrivacyModeNotification
+                      ? <HomeNotification
                         descriptionText={t('privacyModeDefault')}
                         acceptText={t('learnMore')}
                         onAccept={() => {
@@ -134,11 +134,12 @@ export default class Home extends PureComponent {
                           unsetMigratedPrivacyMode()
                         }}
                         key="home-privacyModeDefault"
-                      />,
-                    },
-                    {
-                      shouldBeRendered: shouldShowSeedPhraseReminder,
-                      component: <HomeNotification
+                      />
+                      : null
+                  }
+                  {
+                    shouldShowSeedPhraseReminder
+                      ? <HomeNotification
                         descriptionText={t('backupApprovalNotice')}
                         acceptText={t('backupNow')}
                         onAccept={() => {
@@ -150,12 +151,13 @@ export default class Home extends PureComponent {
                         }}
                         infoText={t('backupApprovalInfo')}
                         key="home-backupApprovalNotice"
-                      />,
-                    },
-                    {
-                      shouldBeRendered: threeBoxLastUpdated && showRestorePrompt,
-                      component: <HomeNotification
-                        descriptionText={t('restoreWalletPreferences', [ formatDate(parseInt(threeBoxLastUpdated), 'M/d/y') ])}
+                      />
+                      : null
+                  }
+                  {
+                    threeBoxLastUpdated && showRestorePrompt
+                      ? <HomeNotification
+                        descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
                         acceptText={t('restore')}
                         ignoreText={t('noThanks')}
                         infoText={t('dataBackupFoundInfo')}
@@ -169,9 +171,10 @@ export default class Home extends PureComponent {
                           setShowRestorePromptToFalse()
                         }}
                         key="home-privacyModeDefault"
-                      />,
-                    },
-                  ]}/>
+                      />
+                      : null
+                  }
+                </MultipleNotifications>
               </TransactionView>
             )
             : null }