refactor(dashboard): remove LoadWrapper

garden-io · May 6, 2019 · 29ddc83 · 29ddc83
1 parent 09d3d58
commit 29ddc83
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 84 deletions.
diff --git a/dashboard/src/components/load-wrapper.tsx b/dashboard/src/components/load-wrapper.tsx
diff --git a/dashboard/src/containers/graph.tsx b/dashboard/src/containers/graph.tsx
@@ -11,10 +11,10 @@ import React, { useContext, useEffect } from "react"
 import Graph from "../components/graph"
 import PageError from "../components/page-error"
 import { EventContext } from "../context/events"
-import LoadWrapper from "../components/load-wrapper"
 import { DataContext } from "../context/data"
 import { UiStateContext } from "../context/ui"
 import { NodeInfo } from "./node-info"
+import Spinner from "../components/spinner"
 
 export default () => {
   const {
@@ -31,33 +31,38 @@ export default () => {
     state: { selectedGraphNode },
   } = useContext(UiStateContext)
 
-  const isLoading = !config.data || !graph.data || config.loading || graph.loading
-  const error = config.error || graph.error
+  if (config.error || graph.error) {
+    return <PageError />
+  }
+
+  if (!config.data || !graph.data || config.loading || graph.loading) {
+    return <Spinner />
+  }
 
   let moreInfoPane: React.ReactNode = null
   if (selectedGraphNode && graph.data) {
     const node = graph.data.nodes.find(n => n.key === selectedGraphNode)
     if (node) {
-      moreInfoPane = <NodeInfo node={node} />
+      moreInfoPane = (
+        <div className="col-xs-5">
+          <NodeInfo node={node} />
+        </div>
+      )
     }
   }
 
   return (
-    <LoadWrapper error={error} ErrorComponent={PageError} loading={isLoading}>
-      <div className="row">
-        <div className={moreInfoPane ? "col-xs-7" : "col-xs"}>
-          {config.data && graph.data && <Graph
-            message={message}
-            onGraphNodeSelected={selectGraphNode}
-            selectedGraphNode={selectedGraphNode}
-            config={config.data}
-            graph={graph.data}
-          />}
-        </div>
-        {moreInfoPane && (
-          <div className="col-xs-5">{moreInfoPane}</div>
-        )}
+    <div className="row">
+      <div className={moreInfoPane ? "col-xs-7" : "col-xs"}>
+        <Graph
+          message={message}
+          onGraphNodeSelected={selectGraphNode}
+          selectedGraphNode={selectedGraphNode}
+          config={config.data}
+          graph={graph.data}
+        />
       </div>
-    </LoadWrapper>
+      {moreInfoPane}
+    </div>
   )
 }
diff --git a/dashboard/src/containers/logs.tsx b/dashboard/src/containers/logs.tsx
@@ -10,9 +10,9 @@ import React, { useContext, useEffect } from "react"
 
 import PageError from "../components/page-error"
 import Logs from "../components/logs"
-import LoadWrapper from "../components/load-wrapper"
 import { DataContext } from "../context/data"
 import { getServiceNames } from "../util/helpers"
+import Spinner from "../components/spinner"
 
 export default () => {
   const {
@@ -22,13 +22,11 @@ export default () => {
 
   useEffect(loadConfig, [])
 
-  const isLoading = !config.data || config.loading
+  if (!config.data || config.loading) {
+    return <Spinner />
+  }
 
-  return (
-    <LoadWrapper error={config.error} ErrorComponent={PageError} loading={isLoading}>
-      <LogsContainer />
-    </LoadWrapper>
-  )
+  return <LogsContainer />
 }
 
 const LogsContainer = () => {
@@ -43,12 +41,13 @@ const LogsContainer = () => {
     }
   }, [])
 
-  const isLoading = !logs.data
+  if (!logs.data || !config.data) {
+    return <Spinner />
+  }
 
-  return (
-    <LoadWrapper error={logs.error} ErrorComponent={PageError} loading={isLoading}>
-      {config.data && logs.data && <Logs loadLogs={loadLogs} config={config.data} logs={logs.data} />}
-    </LoadWrapper>
-  )
+  if (logs.error || config.error) {
+    return <PageError />
+  }
 
+  return <Logs loadLogs={loadLogs} config={config.data} logs={logs.data} />
 }
diff --git a/dashboard/src/containers/overview.tsx b/dashboard/src/containers/overview.tsx
@@ -13,7 +13,7 @@ import React, { useContext, useEffect } from "react"
 import PageError from "../components/page-error"
 import { Modules, Services } from "../components/overview"
 import { DataContext } from "../context/data"
-import LoadWrapper from "../components/load-wrapper"
+import Spinner from "../components/spinner"
 
 const LoadingServices = () => (
   <div
@@ -36,28 +36,32 @@ export default () => {
   useEffect(loadConfig, [])
   useEffect(loadStatus, [])
 
-  const isLoadingModules = !config.data || config.loading
-  const isLoadingServices = !status.data || status.loading
+  const isLoadingConfig = !config.data || config.loading
 
-  // Only show when load component for Modules is no longer visible
-  const ServiceLoadMsg = isLoadingModules ? null : LoadingServices
+  let modules: React.ReactNode = null
+  let services: React.ReactNode = null
+
+  if (config.error) {
+    modules = <PageError />
+  } else if (isLoadingConfig) {
+    modules = <Spinner />
+  } else if (config.data) {
+    modules = <Modules moduleConfigs={config.data && config.data.moduleConfigs} />
+  }
+
+  if (status.error) {
+    services = <PageError />
+  } else if (!isLoadingConfig && (!status.data || status.loading)) {
+    // Only show when load component for Modules is no longer visible
+    services = <LoadingServices />
+  } else if (status.data && config.data) {
+    services = <Services moduleConfigs={config.data.moduleConfigs} services={status.data.services} />
+  }
 
   return (
     <div>
-      <LoadWrapper error={config.error} ErrorComponent={PageError} loading={isLoadingModules}>
-        {config.data && <Modules moduleConfigs={config.data && config.data.moduleConfigs} />}
-      </LoadWrapper>
-      <LoadWrapper
-        error={status.error}
-        LoadComponent={ServiceLoadMsg}
-        ErrorComponent={PageError}
-        loading={isLoadingServices}
-      >
-        {status.data && config.data && <Services
-          moduleConfigs={config.data.moduleConfigs}
-          services={status.data.services}
-        />}
-      </LoadWrapper>
+      {modules}
+      {services}
     </div>
   )
 }