Use Connecting component for loading and connecting state

victronenergy · Feb 14, 2023 · 59bd851 · 59bd851
1 parent 1e4b509
commit 59bd851
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 55 deletions.
diff --git a/legacy/src/app/Marine2/App.tsx b/legacy/src/app/Marine2/App.tsx
@@ -8,6 +8,7 @@ import { useVisibleWidgetsStore } from "./modules"
 // import { ErrorModal } from "./components/ErrorModal"
 
 import { Marine2 } from "./Marine2"
+import Connecting from "./components/ui/Connecting"
 
 export type AppProps = {
   host: string
@@ -65,8 +66,7 @@ const App = observer((props: AppProps) => {
   }, [themeStore.darkMode])
 
   return (
-    // todo: replace with Loader component
-    <React.Suspense fallback={<div>Loading</div>}>
+    <React.Suspense fallback={<Connecting />}>
       <Marine2 {...props} />
       {/*<ErrorModal />*/}
     </React.Suspense>

diff --git a/legacy/src/app/Marine2/Marine2.tsx b/legacy/src/app/Marine2/Marine2.tsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react"
-// import classnames from "classnames"
 // import { useState } from "react"
 // import Fade, { viewChangeDelay } from "../components/Fade"
 
 // import { HeaderWithoutMQTTData } from "./components/Header/Header"
 // import { Connecting, Error, MqttUnavailable, RemoteConsole } from "./components/Views"
 
 import { useLanguage, useMqtt, STATUS } from "@elninotech/mfd-modules"
-// import { VIEWS } from "../utils/constants"
 import { AppProps } from "./App"
 
 import { mfdLanguageOptions } from "app/locales/constants"
@@ -18,6 +16,7 @@ import { AppViews, useAppViewsStore } from "./modules/AppViews"
 import BoxView from "./components/views/BoxView"
 import RootView from "./components/views/RootView"
 import RemoteConsoleView from "./components/views/RemoteConsoleView"
+import Connecting from "./components/ui/Connecting"
 
 // type MainProps = {
 //   isConnected?: boolean
@@ -46,8 +45,6 @@ export const Marine2 = observer((props: AppProps) => {
   // subscribe to language
   useLanguage(mfdLanguageOptions)
   // const [viewUnmounting, setViewUnmounting] = useState(false)
-  // const [currentPage, setCurrentPage] = useState(0)
-  // const [pages, setTotalPages] = useState(1)
   const mqtt = useMqtt()
   const isConnected = mqtt.isConnected
   const portalId = mqtt.portalId
@@ -76,31 +73,6 @@ export const Marine2 = observer((props: AppProps) => {
     }
   }
 
-  // const setPage = (currentPage: number) => {
-  //   setCurrentPage(currentPage)
-  // }
-  //
-  // const setPages = (pages: number) => {
-  //   setTotalPages(pages)
-  //   setCurrentPage(0)
-  // }
-
-  // const setView = (view: string) => {
-  //   if (currentView !== view) {
-  //     setViewUnmounting(true)
-  //     setTimeout(() => {
-  //       setCurrentView(view)
-  //       setViewUnmounting(false)
-  //     }, viewChangeDelay)
-  //   }
-  // }
-
-  // const toggleRemoteConsole = () => {
-  //   if (currentView !== VIEWS.REMOTE_CONSOLE) {
-  //     setView(VIEWS.REMOTE_CONSOLE)
-  //   } else setView(VIEWS.METRICS)
-  // }
-
   if (error && isError(error) && status !== STATUS.CONNECTING) {
     return (
       // <Fade key={VIEWS.ERROR} unmount={viewUnmounting} fullWidth>
@@ -110,32 +82,33 @@ export const Marine2 = observer((props: AppProps) => {
     )
   }
 
-  if (error) {
-    return (
-      <div>Error</div>
-      // <>
-      //   <HeaderWithoutMQTTData handleRemoteConsoleButtonClicked={toggleRemoteConsole} currentView={currentView} />
-      //   {(() => {
-      //     switch (currentView) {
-      //       case VIEWS.REMOTE_CONSOLE:
-      //         return (
-      //           <Main isConnected={isConnected} setView={setView}>
-      //             <Fade key={VIEWS.REMOTE_CONSOLE} unmount={viewUnmounting} fullWidth>
-      //               <RemoteConsole host={host} onClickOutsideContainer={() => setView(VIEWS.METRICS)} />
-      //             </Fade>
-      //           </Main>
-      //         )
-      //       default:
-      //         return <MqttUnavailable viewUnmounting={viewUnmounting} />
-      //     }
-      //   })()}
-      // </>
-    )
-  }
+  // todo: this is a special state for mqqt connection error, but it also happens
+  //  when the mqtt server is just connecting. We need to handle this better
+  // if (error) {
+  //   return (
+  //     <div>Error</div>
+  // <>
+  //   <HeaderWithoutMQTTData handleRemoteConsoleButtonClicked={toggleRemoteConsole} currentView={currentView} />
+  //   {(() => {
+  //     switch (currentView) {
+  //       case VIEWS.REMOTE_CONSOLE:
+  //         return (
+  //           <Main isConnected={isConnected} setView={setView}>
+  //             <Fade key={VIEWS.REMOTE_CONSOLE} unmount={viewUnmounting} fullWidth>
+  //               <RemoteConsole host={host} onClickOutsideContainer={() => setView(VIEWS.METRICS)} />
+  //             </Fade>
+  //           </Main>
+  //         )
+  //       default:
+  //         return <MqttUnavailable viewUnmounting={viewUnmounting} />
+  //     }
+  //   })()}
+  // </>
+  // )
+  // }
 
   if (!isConnected || !portalId) {
-    return <div>Connecting</div>
-    // return <Connecting viewUnmounting={viewUnmounting} />
+    return <Connecting />
   }
 
   return renderView()