From 848e61a7a0fc9b31cae4f603473b37d467f9e914 Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Tue, 22 Nov 2022 10:33:38 +0100
Subject: [PATCH] feat: add starting state to sidebar indicator (#587)

---
 src/components/Card.tsx         |  2 +-
 src/components/StatusIcon.tsx   |  3 +++
 src/pages/info/NodeInfoCard.tsx |  4 ++--
 src/providers/Bee.tsx           | 24 +++++++++++++++---------
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index ea48e79..3ef502d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -64,7 +64,7 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
   } else if (status === 'error') {
     statusIcon = <AlertCircle size="13" color="#f44336" />
   } else if (status === 'loading') {
-    statusIcon = <RefreshLine size="13" color="#096cca" />
+    statusIcon = <RefreshLine size="13" color="orange" />
   }
 
   return (
diff --git a/src/components/StatusIcon.tsx b/src/components/StatusIcon.tsx
index 6d52150..3f5d6ed 100644
--- a/src/components/StatusIcon.tsx
+++ b/src/components/StatusIcon.tsx
@@ -25,6 +25,9 @@ export default function StatusIcon({ checkState, size, className, isLoading }: P
     case CheckState.ERROR:
       backgroundColor = '#ff3a52'
       break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
     default:
       // Default is error
       backgroundColor = '#ff3a52'
diff --git a/src/pages/info/NodeInfoCard.tsx b/src/pages/info/NodeInfoCard.tsx
index f868f60..a202fec 100644
--- a/src/pages/info/NodeInfoCard.tsx
+++ b/src/pages/info/NodeInfoCard.tsx
@@ -9,10 +9,10 @@ import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
 export default function NodeInfoCard(): ReactElement {
-  const { debugApiHealth, debugApiReadiness, status } = useContext(BeeContext)
+  const { status } = useContext(BeeContext)
   const navigate = useNavigate()
 
-  if (debugApiHealth && !debugApiReadiness) {
+  if (status.all === CheckState.STARTING) {
     return (
       <Card
         buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx
index 0f7fd2a..6177452 100644
--- a/src/providers/Bee.tsx
+++ b/src/providers/Bee.tsx
@@ -25,6 +25,7 @@ export enum CheckState {
   OK = 'OK',
   WARNING = 'Warning',
   ERROR = 'Error',
+  STARTING = 'Starting',
 }
 
 interface StatusItem {
@@ -119,7 +120,7 @@ interface Props {
 
 function getStatus(
   debugApiHealth: Health | null,
-  nodeAddresses: NodeAddresses | null,
+  debugApiReadiness: boolean,
   nodeInfo: NodeInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
@@ -171,18 +172,23 @@ function getStatus(
     else status.chequebook.checkState = CheckState.OK
   }
 
-  // Determine overall status
-  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
-    status.all = CheckState.ERROR
+  status.all = determineOverallStatus(debugApiHealth, debugApiReadiness, status)
+
+  return status
+}
+
+function determineOverallStatus(debugApiHealth: Health | null, debugApiReadiness: boolean, status: Status): CheckState {
+  if (debugApiHealth?.status === 'ok' && !debugApiReadiness) {
+    return CheckState.STARTING
+  } else if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
+    return CheckState.ERROR
   } else if (
     Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
   ) {
-    status.all = CheckState.WARNING
+    return CheckState.WARNING
   } else {
-    status.all = CheckState.OK
+    return CheckState.OK
   }
-
-  return status
 }
 
 // This does not need to be exposed and works much better as variable than state variable which may trigger some unnecessary re-renders
@@ -390,7 +396,7 @@ export function Provider({ children }: Props): ReactElement {
 
   const status = getStatus(
     debugApiHealth,
-    nodeAddresses,
+    debugApiReadiness,
     nodeInfo,
     apiHealth,
     topology,