feat: Updated DB sync screen on new windows

package.json

@@ -97,7 +97,7 @@
     "@types/node-fetch": "^2.5.4",
     "@types/react-window": "^1.8.2",
     "async-lock": "^1.2.2",
-    "coulomb": "https://github.com/coulombjs/coulomb#coulomb-v0.4.7-gitpkg",
+    "coulomb": "https://github.com/coulombjs/coulomb#coulomb-v0.4.8-gitpkg",
     "electron-log": "^4.0.6",
     "fast-json-patch": "^3.0.0-1",
     "fs-extra": "^8.1.0",

src/renderer/home/index.tsx

@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
-import { NonIdealState, Button, Icon, Tooltip, Position } from '@blueprintjs/core';
+import React, { useState, useContext, useEffect } from 'react';
+import { NonIdealState, Button, Icon, Tooltip, Position, Spinner, Overlay } from '@blueprintjs/core';
 
 import { callIPC } from 'coulomb/ipc/renderer';
 import { WindowComponentProps } from 'coulomb/config/renderer';
 
 import { conf } from 'app';
 
-import { StorageStatus } from 'renderer/widgets/sync-status';
+import { StorageStatus, PasswordPrompt } from 'renderer/widgets/sync-status';
 import { default as IssueScheduler } from '../issue-scheduler';
 import { Browser as PublicationBrowser } from '../publication-browser';
 import * as styles from './styles.scss';
+import { SingleDBStatusContext } from 'renderer/single-db-status-context';
 
 
 interface ContentTypeOptions {
@@ -44,9 +45,53 @@ const contentTypes: ContentTypeOptionSet = [
 
 
 const Window: React.FC<WindowComponentProps> = function () {
+
+  const db = useContext(SingleDBStatusContext);
 
   const [selectedCType, selectCType] = useState('issues' as keyof typeof conf["data"]);
 
+  useEffect(() => {
+    const status = db?.status || {};
+    console.debug("Got status", status)
+    if (!status.isPushing && !status.isPulling && status.lastSynchronized === null && status.needsPassword === false) {
+      callIPC('db-default-git-trigger-sync');
+    }
+  }, [JSON.stringify(db)]);
+
+  let dbInitializationScreen: JSX.Element | null;
+
+  if (db?.status === undefined) {
+    dbInitializationScreen = <NonIdealState
+      icon={<Spinner />}
+      title="Initializing database"
+    />
+  } else if (db.status.needsPassword) {
+    dbInitializationScreen = <NonIdealState
+      icon="key"
+      title="Password required"
+      description={<PasswordPrompt onConfirm={() => void 0} />}
+    />
+  } else if (db.status.isPushing || db.status.isPulling) {
+    dbInitializationScreen = <NonIdealState
+      icon={<Spinner />}
+      title="Synchronizing data"
+      description={db.status.isPushing ? "Pushing changes" : "Pulling changes"}
+    />
+  } else if (db.status.lastSynchronized === null) {
+    dbInitializationScreen = <NonIdealState
+      icon="cloud-download"
+      title="Synchronizing data"
+    />
+  } else {
+    dbInitializationScreen = null;
+  }
+
+  if (dbInitializationScreen !== null) {
+    return <Overlay isOpen backdropClassName={styles.dbInitializationOverlay}>
+      {dbInitializationScreen}
+    </Overlay>
+  }
+
   const cTypeOptions = contentTypes.find(cType => cType.id === selectedCType);
 
   let viewer: JSX.Element;

src/renderer/home/styles.scss

@@ -1,6 +1,10 @@
 @import "~@blueprintjs/core/lib/scss/variables";
 
 
+:local .dbInitializationOverlay {
+  background: $pt-app-background-color;
+}
+
 :local .homeWindow {
   $sidebarSide: 5rem;
 

src/renderer/index.tsx

@@ -30,6 +30,9 @@ export const conf: RendererConfig<typeof appConf> = {
       selected: defaultLanguage,
       default: defaultLanguage,
     }),
+  }, {
+    cls: () => import('./single-db-status-context'),
+    getProps: () => ({ dbName: 'default' }),
   }],
 };
 

src/renderer/single-db-status-context.tsx

@@ -0,0 +1,46 @@
+import * as log from 'electron-log';
+import React, { useState, useEffect } from 'react';
+import { useIPCValue } from 'coulomb/ipc/renderer';
+import { BackendDescription } from 'coulomb/db/base';
+import { ipcRenderer } from 'electron';
+
+
+export type SingleDBStatusContextProps = {
+  dbName: string
+};
+export const SingleDBStatusContext = React.createContext<null | BackendDescription<any>>({
+  verboseName: '',
+  status: {},
+});
+const DBStatusContextProvider: React.FC<SingleDBStatusContextProps> = function (props) {
+  const ipcPrefix = `db-${props.dbName}`;
+  const [backendStatus, updateBackendStatus] = useState(undefined as undefined | object);
+  const description = useIPCValue(`${ipcPrefix}-describe`, null as null | BackendDescription<any>);
+
+  console.debug("STATUS", backendStatus);
+  console.debug("DESCRIPTION", description.value);
+
+  // Listen to status updates
+  function handleNewStatus(evt: any, newStatus: any) {
+    log.debug("Received new status for DB", props.dbName, newStatus);
+    updateBackendStatus(newStatus);
+  }
+
+  useEffect(() => {
+    ipcRenderer.on(`${ipcPrefix}-status`, handleNewStatus);
+    return function cleanup() {
+      ipcRenderer.removeListener(`${ipcPrefix}-status`, handleNewStatus);
+    }
+  }, []);
+
+  return (
+    <SingleDBStatusContext.Provider
+        value={description.value !== null
+          ? { ...description.value, status: backendStatus || description.value.status }
+          : null}>
+      {props.children}
+    </SingleDBStatusContext.Provider>
+  );
+};
+
+export default DBStatusContextProvider;

src/renderer/widgets/sync-status.tsx

@@ -1,13 +1,13 @@
 import { ipcRenderer } from 'electron';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { Button, IconName, Tooltip, FormGroup, InputGroup, Intent, Icon, Popover, Position } from '@blueprintjs/core';
 
-import { BackendStatus } from 'coulomb/db/isogit-yaml/base';
 import { useIPCValue, callIPC } from 'coulomb/ipc/renderer';
 import { conf, app } from '..';
 
 import * as styles from './sync-status.scss';
+import { SingleDBStatusContext } from 'renderer/single-db-status-context';
 
 
 type AnyIDType = string | number;
@@ -20,16 +20,7 @@ interface StorageStatusProps {
   tooltipPosition?: Position,
 }
 export const StorageStatus: React.FC<StorageStatusProps> = function ({ className, iconClassName, tooltipPosition }) {
-  const [remote, updateRemote] = useState<BackendStatus>({
-    isMisconfigured: false,
-    hasLocalChanges: false,
-    needsPassword: false,
-    isPushing: false,
-    isPulling: false,
-    statusRelativeToLocal: undefined,
-    isOnline: false,
-    lastSynchronized: null,
-  });
+  const remote = useContext(SingleDBStatusContext)?.status;
 
   const modifiedIds: { [K in AnyDataType]: string[] } =
   Object.keys(conf.app.data).map((key) => {
@@ -38,13 +29,6 @@ export const StorageStatus: React.FC<StorageStatusProps> = function ({ className
     };
   }).reduce((prevValue, currValue) => ({ ...prevValue, ...currValue }));
 
-  useEffect(() => {
-    ipcRenderer.on('db-default-status', handleStorageStatusUpdate);
-    return function cleanup() {
-      ipcRenderer.removeListener('db-default-status', handleStorageStatusUpdate);
-    };
-  }, []);
-
   const [passwordPromptIsOpen, openPasswordPrompt] = useState(false);
 
   useEffect(() => {
@@ -55,10 +39,6 @@ export const StorageStatus: React.FC<StorageStatusProps> = function ({ className
     await callIPC('db-default-git-trigger-sync');
   }
 
-  function handleStorageStatusUpdate(evt: any, remoteStatus: Partial<BackendStatus>) {
-    updateRemote(remote => ({ ...remote, ...remoteStatus }));
-  }
-
   let statusIcon: IconName;
   let tooltipText: string | undefined;
   let statusIntent: Intent;
@@ -149,7 +129,7 @@ export const StorageStatus: React.FC<StorageStatusProps> = function ({ className
 };
 
 
-const PasswordPrompt: React.FC<{ onConfirm: () => void }> = function ({ onConfirm }) {
+export const PasswordPrompt: React.FC<{ onConfirm: () => void }> = function ({ onConfirm }) {
   const [value, setValue] = useState('');
 
   async function handlePasswordConfirm() {

yarn.lock

@@ -2497,9 +2497,9 @@ cosmiconfig@^5.0.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-"coulomb@https://github.com/coulombjs/coulomb#coulomb-v0.4.7-gitpkg":
-  version "0.4.7"
-  resolved "https://github.com/coulombjs/coulomb#d0ded4965f079bfc1704f04a2e44eb21e714c140"
+"coulomb@https://github.com/coulombjs/coulomb#coulomb-v0.4.8-gitpkg":
+  version "0.4.8"
+  resolved "https://github.com/coulombjs/coulomb#fca819aa1c188be84560edf36629d24ef9e319a1"
   dependencies:
     "@isomorphic-git/lightning-fs" "^3.3.3"
     fs-extra "^8.1.0"