feat: enable backup settings

Author: stackingcats

src/App.tsx

@@ -15,16 +15,9 @@ import { Path } from "./router/Path";
 import { darkTheme } from "./themes";
 import { useElectronStore } from "./stores/electronStore";
 import { Provider } from "mobx-react";
-import {
-  isElectron,
-  logError,
-  sendMessageToParent,
-} from "./common/utils/appUtil";
+import { isElectron, sendMessageToParent } from "./common/utils/appUtil";
 import { useBackupStore } from "./stores/backupStore";
-import api from "./api";
-import { getErrorMsg } from "./common/utils/errorUtil";
-import { timer } from "rxjs";
-import { exhaustMap, retry } from "rxjs/operators";
+import { useServiceStore } from "./stores/serviceStore";
 
 const GlobalCss = withStyles((theme: Theme) => {
   const background = theme.palette.background;
@@ -56,6 +49,7 @@ const GlobalCss = withStyles((theme: Theme) => {
 
 const electronStore = useElectronStore({});
 const backupStore = useBackupStore({ backupInfoLoaded: false });
+const serviceStore = useServiceStore({});
 
 function App(): ReactElement {
   useEffect(() => {
@@ -74,25 +68,15 @@ function App(): ReactElement {
     return () => window.removeEventListener("message", messageListenerHandler);
   }, []);
 
-  useEffect(() => {
-    const sub = timer(0, 60000)
-      .pipe(
-        exhaustMap(() => api.getBackupInfo$()),
-        retry(3)
-      )
-      .subscribe({
-        next: (resp) => backupStore.setInfo(resp),
-        error: (err) =>
-          logError(`Failed to retrieve backup info: ${getErrorMsg(err)}`),
-      });
-    return () => sub.unsubscribe();
-  }, []);
-
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <GlobalCss />
-      <Provider electronStore={electronStore} backupStore={backupStore}>
+      <Provider
+        electronStore={electronStore}
+        backupStore={backupStore}
+        serviceStore={serviceStore}
+      >
         <Router>
           <Switch>
             <Route path={Path.CONNECTION_FAILED}>

src/api.ts

@@ -52,9 +52,11 @@ const fetchJsonResponse = <T>(
   }
   return from(fetch(queryUrl.toString(), { method, body })).pipe(
     mergeMap((resp: Response) =>
-      from(resp.json()).pipe(
-        mergeMap((body) => (resp.ok ? of(body) : throwError(body)))
-      )
+      resp.status === 204
+        ? of({})
+        : from(resp.json()).pipe(
+            mergeMap((body) => (resp.ok ? of(body) : throwError(body)))
+          )
     ),
     catchError((err) => logAndThrow(url, err))
   );

src/common/components/OpendexdDependent.tsx

@@ -0,0 +1,44 @@
+import { inject, observer } from "mobx-react";
+import React, { ReactElement } from "react";
+import ViewDisabled from "../../dashboard/ViewDisabled";
+import { ServiceStore, SERVICE_STORE } from "../../stores/serviceStore";
+import Loader from "./data-display/loader/Loader";
+
+type OpendexdDependentProps = {
+  comp: ReactElement;
+  serviceStore?: ServiceStore;
+};
+
+/**
+ * In case a component needs opendexd to be ready and unlocked,
+ * information from opendexd status is displayed when those conditions are not met.
+ *
+ * @param comp
+ * a component to display when opendexd is ready and unlocked
+ */
+const OpendexdDependent = inject(SERVICE_STORE)(
+  observer(
+    (props: OpendexdDependentProps): ReactElement => {
+      const { comp, serviceStore } = props;
+
+      return (
+        <>
+          {serviceStore!.opendexdStatus ? (
+            !serviceStore!.opendexdLocked && serviceStore!.opendexdReady ? (
+              comp
+            ) : (
+              <ViewDisabled
+                opendexdLocked={serviceStore!.opendexdLocked}
+                opendexdStatus={serviceStore!.opendexdStatus.status}
+              />
+            )
+          ) : (
+            <Loader />
+          )}
+        </>
+      );
+    }
+  )
+);
+
+export default OpendexdDependent;