From d3da895f036cf6b95dc8bb44ce21b561c0b2670e Mon Sep 17 00:00:00 2001
From: Vojtech Simetka <vojtech@simetka.cz>
Date: Tue, 27 Apr 2021 13:00:52 +0200
Subject: [PATCH] fix: if any step has error, the first step could not be
 expanded (#85)

* fix: if any error occured, the first step could not be expanded

* chore: renamed `condition` attribute to `isOk`
---
 src/pages/status/NodeSetupWorkflow.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pages/status/NodeSetupWorkflow.tsx b/src/pages/status/NodeSetupWorkflow.tsx
index 3a418c4..c8420b9 100644
--- a/src/pages/status/NodeSetupWorkflow.tsx
+++ b/src/pages/status/NodeSetupWorkflow.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface Step {
   label: string
-  condition: boolean
+  isOk: boolean
   isLoading: boolean
   component: ReactElement
 }
@@ -57,37 +57,37 @@ export default function NodeSetupWorkflow({
   const steps: Step[] = [
     {
       label: 'Connected to Node DebugAPI',
-      condition: debugApiConnection.isOk,
+      isOk: debugApiConnection.isOk,
       isLoading: debugApiConnection.isLoading,
       component: <DebugConnectionCheck {...debugApiConnection} />,
     },
     {
       label: 'Running latest Bee version',
-      condition: nodeVersion.isOk,
+      isOk: nodeVersion.isOk,
       isLoading: nodeVersion.isLoading,
       component: <VersionCheck {...nodeVersion} />,
     },
     {
       label: 'Connected to Ethereum Blockchain',
-      condition: ethereumConnection.isOk,
+      isOk: ethereumConnection.isOk,
       isLoading: ethereumConnection.isLoading,
       component: <EthereumConnectionCheck {...ethereumConnection} />,
     },
     {
       label: 'Deployed and Funded Chequebook',
-      condition: chequebook.isOk,
+      isOk: chequebook.isOk,
       isLoading: chequebook.isLoading,
       component: <ChequebookDeployFund ethereumAddress={ethereumConnection.nodeAddresses?.ethereum} {...chequebook} />,
     },
     {
       label: 'Connected to Node API',
-      condition: apiConnection.isOk,
+      isOk: apiConnection.isOk,
       isLoading: apiConnection.isLoading,
       component: <NodeConnectionCheck {...apiConnection} />,
     },
     {
       label: 'Connected to Peers',
-      condition: topology.isOk,
+      isOk: topology.isOk,
       isLoading: topology.isLoading,
       component: <PeerConnection {...topology} />,
     },
@@ -95,11 +95,15 @@ export default function NodeSetupWorkflow({
 
   useEffect(() => {
     // If the user already changed the active step we don't want to overwrite it
-    if (activeStep > 0 && activeStep < steps.length) return
+    if (activeStep >= 0 && activeStep < steps.length) return
+
+    // If any step is not fully loaded yet return
+    if (!steps.every(step => !step.isLoading)) return
 
     // Select first step that is not OK
+    // This is deliberately a for loop (and not forEach) so that we can terminate the useEffect from within the cycle
     for (let i = 0; i < steps.length; ++i) {
-      if (!steps[i].condition) {
+      if (!steps[i].isOk) {
         setActiveStep(i)
 
         return
@@ -127,7 +131,7 @@ export default function NodeSetupWorkflow({
         </span>
       </Typography>
       <Stepper nonLinear activeStep={activeStep} orientation="vertical">
-        {steps.map(({ label, condition, component, isLoading }, index) => (
+        {steps.map(({ label, isOk, component, isLoading }, index) => (
           <Step key={label}>
             <StepLabel
               disabled={isLoading}
@@ -135,7 +139,7 @@ export default function NodeSetupWorkflow({
               StepIconComponent={() => {
                 if (isLoading) return <Autorenew style={{ height: '25px', cursor: 'pointer' }} />
 
-                if (condition) return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
+                if (isOk) return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
 
                 return <Error style={{ color: '#c9201f', height: '25px', cursor: 'pointer' }} />
               }}