ui+pages: Integrate SubServerRequired component into loop and pool pages

Author: itsrachelfish

app/src/components/history/HistoryPage.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import PageHeader from 'components/common/PageHeader';
+import SubServerRequired from 'components/common/SubServerRequired';
 import HistoryList from './HistoryList';
 
 const Styled = {
@@ -14,14 +15,16 @@ const Styled = {
 
 const HistoryPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryPage');
-  const { swapStore } = useStore();
+  const { swapStore, subServerStore } = useStore();
 
   const { Wrapper } = Styled;
   return (
-    <Wrapper>
-      <PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
-      <HistoryList />
-    </Wrapper>
+    <SubServerRequired status={subServerStore.subServers.loop}>
+      <Wrapper>
+        <PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
+        <HistoryList />
+      </Wrapper>
+    </SubServerRequired>
   );
 };
 

app/src/components/loop/LoopPage.tsx

@@ -5,6 +5,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
+import SubServerRequired from 'components/common/SubServerRequired';
 import ChannelList from './ChannelList';
 import LoopActions from './LoopActions';
 import LoopTiles from './LoopTiles';
@@ -26,6 +27,7 @@ const LoopPage: React.FC = () => {
     registerSidecarView,
     channelStore,
     nodeStore,
+    subServerStore,
   } = useStore();
 
   const title = (
@@ -41,26 +43,28 @@ const LoopPage: React.FC = () => {
 
   const { PageWrap } = Styled;
   return (
-    <PageWrap>
-      {appView.processingSwapsVisible ? (
-        <ProcessingSwaps />
-      ) : buildSwapView.showWizard ? (
-        <SwapWizard />
-      ) : registerSidecarView.showWizard ? (
-        <SidecarWizard />
-      ) : (
-        <>
-          <PageHeader
-            title={title}
-            onHelpClick={appView.showTour}
-            onExportClick={channelStore.exportChannels}
-          />
-          <LoopTiles />
-          <LoopActions />
-        </>
-      )}
-      <ChannelList />
-    </PageWrap>
+    <SubServerRequired status={subServerStore.subServers.loop}>
+      <PageWrap>
+        {appView.processingSwapsVisible ? (
+          <ProcessingSwaps />
+        ) : buildSwapView.showWizard ? (
+          <SwapWizard />
+        ) : registerSidecarView.showWizard ? (
+          <SidecarWizard />
+        ) : (
+          <>
+            <PageHeader
+              title={title}
+              onHelpClick={appView.showTour}
+              onExportClick={channelStore.exportChannels}
+            />
+            <LoopTiles />
+            <LoopActions />
+          </>
+        )}
+        <ChannelList />
+      </PageWrap>
+    </SubServerRequired>
   );
 };
 

app/src/components/pool/PoolPage.tsx

@@ -5,6 +5,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge, Column, Row } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
+import SubServerRequired from 'components/common/SubServerRequired';
 import AccountSection from './AccountSection';
 import BatchSection from './BatchSection';
 import OrderFormSection from './OrderFormSection';
@@ -34,18 +35,24 @@ const Styled = {
 
 const PoolPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.pool.PoolPage');
-  const { accountStore, orderStore, batchStore } = useStore();
+  const { accountStore, orderStore, batchStore, subServerStore } = useStore();
 
   useEffect(() => {
-    accountStore.fetchAccounts();
-    orderStore.fetchOrders();
-    batchStore.fetchNextBatchInfo();
-    if (!batchStore.batches.size) {
-      // fetch batches if there aren't any in the store
-      batchStore.fetchBatches();
+    if (
+      subServerStore.subServers.pool?.running &&
+      !subServerStore.subServers.pool?.error
+    ) {
+      accountStore.fetchAccounts();
+      orderStore.fetchOrders();
+      batchStore.fetchNextBatchInfo();
+      if (!batchStore.batches.size) {
+        // fetch batches if there aren't any in the store
+        batchStore.fetchBatches();
+      }
+      // start polling when this component is mounted
+      batchStore.startPolling();
     }
-    // start polling when this component is mounted
-    batchStore.startPolling();
+
     // stop polling when this component is unmounted
     return () => {
       batchStore.stopPolling();
@@ -63,23 +70,25 @@ const PoolPage: React.FC = () => {
 
   const { Wrapper, Row, Col } = Styled;
   return (
-    <Wrapper>
-      <PageHeader
-        title={title}
-        exportTip={l('exportTip')}
-        onExportClick={orderStore.exportLeases}
-      />
-      <Row>
-        <Col cols={4} colsXl={3}>
-          <AccountSection />
-          <OrderFormSection />
-        </Col>
-        <Col>
-          <BatchSection />
-          <OrderListSection />
-        </Col>
-      </Row>
-    </Wrapper>
+    <SubServerRequired status={subServerStore.subServers.pool}>
+      <Wrapper>
+        <PageHeader
+          title={title}
+          exportTip={l('exportTip')}
+          onExportClick={orderStore.exportLeases}
+        />
+        <Row>
+          <Col cols={4} colsXl={3}>
+            <AccountSection />
+            <OrderFormSection />
+          </Col>
+          <Col>
+            <BatchSection />
+            <OrderListSection />
+          </Col>
+        </Row>
+      </Wrapper>
+    </SubServerRequired>
   );
 };