Merge pull request #564 from valpinkman/feat/error-screen-fallback-manager

fallback to default screen when error happens with device in manager page

src/components/ManagerPage/Workflow.js

@@ -25,13 +25,16 @@ type Props = {
   renderDefault: (
     device: ?Device,
     deviceInfo: ?DeviceInfo,
-    dashboardError: ?Error,
     isGenuine: ?boolean,
+    error: {
+      dashboardError: ?Error,
+      genuineError: ?Error,
+    },
   ) => Node,
   renderMcuUpdate: (deviceInfo: DeviceInfo) => Node,
   renderFinalUpdate: (deviceInfo: DeviceInfo) => Node,
   renderDashboard: (device: Device, deviceInfo: DeviceInfo) => Node,
-  renderError: (dashboardError: ?Error, genuineError: ?Error) => Node,
+  renderError?: (dashboardError: ?Error, genuineError: ?Error) => Node,
 }
 type State = {}
 
@@ -52,14 +55,12 @@ class Workflow extends PureComponent<Props, State> {
               <EnsureGenuine device={device}>
                 {(isGenuine: ?boolean, genuineError: ?Error) => {
                   if (dashboardError || genuineError) {
-                    return renderError ? (
-                      renderError(dashboardError, genuineError)
-                    ) : (
-                      <div>
-                        {dashboardError && <span>{dashboardError.message}</span>}
-                        {genuineError && <span>{genuineError.message}</span>}
-                      </div>
-                    )
+                    return renderError
+                      ? renderError(dashboardError, genuineError)
+                      : renderDefault(device, deviceInfo, isGenuine, {
+                          genuineError,
+                          dashboardError,
+                        })
                   }
 
                   if (deviceInfo && deviceInfo.mcu) {
@@ -74,7 +75,10 @@ class Workflow extends PureComponent<Props, State> {
                     return renderDashboard(device, deviceInfo)
                   }
 
-                  return renderDefault(device, deviceInfo, dashboardError, isGenuine)
+                  return renderDefault(device, deviceInfo, isGenuine, {
+                    genuineError,
+                    dashboardError,
+                  })
                 }}
               </EnsureGenuine>
             )}

src/components/ManagerPage/WorkflowDefault.js

@@ -8,7 +8,6 @@ import type { Device, T } from 'types/common'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
-import Space from 'components/base/Space'
 import Text from 'components/base/Text'
 import Spinner from 'components/base/Spinner'
 
@@ -97,13 +96,15 @@ type Props = {
   t: T,
   device: ?Device,
   deviceInfo: ?DeviceInfo,
-  dashboardError: ?Error,
+  errors: {
+    dashboardError: ?Error,
+    genuineError: ?Error,
+  },
   isGenuine: boolean,
 }
 
-const WorkflowDefault = ({ device, deviceInfo, dashboardError, isGenuine, t }: Props) => (
-  <Box align="center">
-    <Space of={152} />
+const WorkflowDefault = ({ device, deviceInfo, errors, isGenuine, t }: Props) => (
+  <Box align="center" justify="center" sticky>
     <Box align="center" style={{ maxWidth: 460, padding: '0 10px' }}>
       <img
         src={i('logos/connectDevice.png')}
@@ -138,7 +139,7 @@ const WorkflowDefault = ({ device, deviceInfo, dashboardError, isGenuine, t }: P
       </Step>
 
       {/* DASHBOARD CHECK */}
-      <Step validated={!!device && !!deviceInfo} hasErrors={!!device && !!dashboardError}>
+      <Step validated={!!device && !!deviceInfo} hasErrors={!!device && !!errors.dashboardError}>
         <StepContent>
           <StepIcon>
             <WrapperIconCurrency>
@@ -152,14 +153,21 @@ const WorkflowDefault = ({ device, deviceInfo, dashboardError, isGenuine, t }: P
               {' on your device'}
             </Trans>
           </Box>
-          <StepCheck checked={!!device && !!deviceInfo} hasErrors={!!device && !!dashboardError} />
+          <StepCheck
+            checked={!!device && !!deviceInfo}
+            hasErrors={!!device && !!errors.dashboardError}
+          />
         </StepContent>
       </Step>
 
       {/* GENUINE CHECK */}
       <Step
-        validated={(!!device && !isNull(isGenuine) && isGenuine) || undefined}
-        hasErrors={(!!device && !isNull(isGenuine) && !isGenuine) || undefined}
+        validated={
+          (!!device && !isNull(isGenuine) && isGenuine && !errors.genuineError) || undefined
+        }
+        hasErrors={
+          (!!device && !isNull(isGenuine) && !isGenuine) || errors.genuineError || undefined
+        }
       >
         <StepContent>
           <StepIcon>

src/components/ManagerPage/index.js

@@ -24,11 +24,6 @@ type Error = {
 function ManagerPage(): Node {
   return (
     <Workflow
-      renderError={(dashboardError: ?Error, genuineError: ?Error) => {
-        if (dashboardError) return <span>Dashboard Error: {dashboardError.message}</span>
-        if (genuineError) return <span>Genuine Error: {genuineError.message}</span>
-        return <span>Error</span>
-      }}
       renderFinalUpdate={(deviceInfo: DeviceInfo) => (
         <p>UPDATE FINAL FIRMARE (TEMPLATE + ACTION WIP) {deviceInfo.final}</p>
       )}
@@ -41,13 +36,16 @@ function ManagerPage(): Node {
       renderDefault={(
         device: ?Device,
         deviceInfo: ?DeviceInfo,
-        dashboardError: ?Error,
         isGenuine: ?boolean,
+        errors: {
+          dashboardError: ?Error,
+          genuineError: ?Error,
+        },
       ) => (
         <WorkflowDefault
           device={device}
           deviceInfo={deviceInfo}
-          dashboardError={dashboardError}
+          errors={errors}
           isGenuine={isGenuine}
         />
       )}