From 9bcee1ea6378e425971a49c1e64a4c8e90157882 Mon Sep 17 00:00:00 2001 From: Anton Strogonoff Date: Thu, 28 May 2020 15:00:05 +0900 Subject: [PATCH] feat: Updated DB sync screen on new windows --- package.json | 2 +- src/renderer/home/index.tsx | 51 +++++++++++++++++++++-- src/renderer/home/styles.scss | 4 ++ src/renderer/index.tsx | 3 ++ src/renderer/single-db-status-context.tsx | 46 ++++++++++++++++++++ src/renderer/widgets/sync-status.tsx | 28 ++----------- yarn.lock | 6 +-- 7 files changed, 109 insertions(+), 31 deletions(-) create mode 100644 src/renderer/single-db-status-context.tsx diff --git a/package.json b/package.json index 59cc401..65b9c6c 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/home/index.tsx b/src/renderer/home/index.tsx index 13fe780..b4a18c4 100644 --- a/src/renderer/home/index.tsx +++ b/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 = 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 = } + title="Initializing database" + /> + } else if (db.status.needsPassword) { + dbInitializationScreen = void 0} />} + /> + } else if (db.status.isPushing || db.status.isPulling) { + dbInitializationScreen = } + title="Synchronizing data" + description={db.status.isPushing ? "Pushing changes" : "Pulling changes"} + /> + } else if (db.status.lastSynchronized === null) { + dbInitializationScreen = + } else { + dbInitializationScreen = null; + } + + if (dbInitializationScreen !== null) { + return + {dbInitializationScreen} + + } + const cTypeOptions = contentTypes.find(cType => cType.id === selectedCType); let viewer: JSX.Element; diff --git a/src/renderer/home/styles.scss b/src/renderer/home/styles.scss index 390287c..dc6ee4d 100644 --- a/src/renderer/home/styles.scss +++ b/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; diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 35fbfff..05cbf62 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -30,6 +30,9 @@ export const conf: RendererConfig = { selected: defaultLanguage, default: defaultLanguage, }), + }, { + cls: () => import('./single-db-status-context'), + getProps: () => ({ dbName: 'default' }), }], }; diff --git a/src/renderer/single-db-status-context.tsx b/src/renderer/single-db-status-context.tsx new file mode 100644 index 0000000..7c57651 --- /dev/null +++ b/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>({ + verboseName: '', + status: {}, +}); +const DBStatusContextProvider: React.FC = function (props) { + const ipcPrefix = `db-${props.dbName}`; + const [backendStatus, updateBackendStatus] = useState(undefined as undefined | object); + const description = useIPCValue(`${ipcPrefix}-describe`, null as null | BackendDescription); + + 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 ( + + {props.children} + + ); +}; + +export default DBStatusContextProvider; \ No newline at end of file diff --git a/src/renderer/widgets/sync-status.tsx b/src/renderer/widgets/sync-status.tsx index 9c71259..ff7a800 100644 --- a/src/renderer/widgets/sync-status.tsx +++ b/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 = function ({ className, iconClassName, tooltipPosition }) { - const [remote, updateRemote] = useState({ - 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 = 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 = function ({ className await callIPC('db-default-git-trigger-sync'); } - function handleStorageStatusUpdate(evt: any, remoteStatus: Partial) { - updateRemote(remote => ({ ...remote, ...remoteStatus })); - } - let statusIcon: IconName; let tooltipText: string | undefined; let statusIntent: Intent; @@ -149,7 +129,7 @@ export const StorageStatus: React.FC = 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() { diff --git a/yarn.lock b/yarn.lock index ec6dd3b..6ccb7c5 100644 --- a/yarn.lock +++ b/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"