Sync ux

src/components/SideNavigator/SideNavigator.tsx

@@ -9,7 +9,8 @@ import {
   mdiDeleteOutline,
   mdiDelete,
   mdiImage,
-  mdiImageOutline
+  mdiImageOutline,
+  mdiSync
 } from '@mdi/js'
 import Icon from '../atoms/Icon'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
@@ -22,6 +23,7 @@ import ControlButton from './ControlButton'
 import FolderListFragment from './FolderListFragment'
 import TagListFragment from './TagListFragment'
 import TutorialsNavigator from '../Tutorials/TutorialsNavigator'
+import { useUsers } from '../../lib/accounts'
 
 const StyledSideNavContainer = styled.nav`
   display: flex;
@@ -94,11 +96,13 @@ export default () => {
     createFolder,
     renameStorage,
     removeStorage,
-    storageMap
+    storageMap,
+    syncStorage
   } = useDb()
   const { popup } = useContextMenu()
   const { prompt, messageBox } = useDialog()
   const { push } = useRouter()
+  const [[user]] = useUsers()
 
   const storageEntries = useMemo(() => {
     return entries(storageMap)
@@ -181,6 +185,35 @@ export default () => {
           const attachmentsPageIsActive =
             currentPathname === attachmentsPagePathname
 
+          const controlComponents = [
+            <ControlButton
+              key='addFolderButton'
+              onClick={() => showPromptToCreateFolder('/')}
+              iconPath={mdiPlusCircleOutline}
+            />
+          ]
+
+          if (storage.cloudStorage != null && user != null) {
+            const cloudSync = () => {
+              if (user == null) {
+                // TODO: toast login needed
+                console.error('login required')
+              }
+              syncStorage(storage.id, user).catch(e => {
+                // TODO: toast sync failed error
+                console.error(e)
+              })
+            }
+
+            controlComponents.unshift(
+              <ControlButton
+                key='syncButton'
+                onClick={cloudSync}
+                iconPath={mdiSync}
+              />
+            )
+          }
+
           return (
             <React.Fragment key={itemId}>
               <SideNavigatorItem
@@ -233,13 +266,7 @@ export default () => {
                     }
                   ])
                 }}
-                controlComponents={[
-                  <ControlButton
-                    key='addFolderButton'
-                    onClick={() => showPromptToCreateFolder('/')}
-                    iconPath={mdiPlusCircleOutline}
-                  />
-                ]}
+                controlComponents={controlComponents}
               />
               {!storageIsFolded && (
                 <>

src/components/SideNavigator/SideNavigatorItem.tsx

@@ -68,7 +68,9 @@ const ClickableContainer = styled.button`
 
 const Label = styled.div``
 
-const ControlContainer = styled.div``
+const ControlContainer = styled.div`
+  display: flex;
+`
 
 interface SideNaviagtorItemProps {
   label: string

src/components/Storage/StorageEdit.tsx

@@ -26,11 +26,11 @@ export default ({ storage }: StorageEditProps) => {
   const user = preferences['general.accounts'][0]
 
   const linkCallback = useCallback(
-    async (cloudStorage: CloudStorage) => {
-      const success = await db.setCloudLink(storage.id, cloudStorage, user)
-      if (!success) {
+    (cloudStorage: CloudStorage) => {
+      db.setCloudLink(storage.id, cloudStorage, user).catch(() => {
         //TODO: toast syncing failed
-      }
+        console.log('sync error')
+      })
     },
     [storage.id, db, user]
   )
@@ -70,11 +70,17 @@ export default ({ storage }: StorageEditProps) => {
         <div>
           <h2>Cloud Storage</h2>
           {storage.cloudStorage != null ? (
-            <p>
-              Linked Storage: {storage.cloudStorage.name} (ID:
-              {storage.cloudStorage.id}){' '}
-              <span onClick={unlinkCallback}>Unlink</span>
-            </p>
+            <div>
+              <p>
+                Linked Storage: {storage.cloudStorage.name} (ID:
+                {storage.cloudStorage.id}){' '}
+                <span onClick={unlinkCallback}>Unlink</span>
+              </p>
+              <p>
+                Last synced at{' '}
+                {new Date(storage.cloudStorage.updatedAt).toLocaleString()}
+              </p>
+            </div>
           ) : (
             <div>
               {user == null && (

src/lib/db/store.ts

@@ -36,11 +36,12 @@ export interface DbStore {
   createStorage: (name: string) => Promise<NoteStorage>
   removeStorage: (id: string) => Promise<void>
   renameStorage: (id: string, name: string) => Promise<void>
+  syncStorage: (id: string, user: User) => Promise<void>
   setCloudLink: (
     id: string,
     cloudStorage: CloudStorage,
     user: User
-  ) => Promise<boolean>
+  ) => Promise<void>
   removeCloudLink: (id: string) => Promise<void>
   createFolder: (storageName: string, pathname: string) => Promise<void>
   removeFolder: (storageName: string, pathname: string) => Promise<void>
@@ -157,46 +158,29 @@ export function createDbStoreCreator(
     }, [])
 
     const setCloudLink = useCallback(
-      async (
-        id: string,
-        cloudStorage: CloudStorage,
-        user: User
-      ): Promise<boolean> => {
+      async (id: string, cloudStorage: CloudStorage, user: User) => {
         let storage = storageMap[id]
 
         if (storage == null) {
-          return false
+          return
         }
 
-        storage = { ...storage, cloudStorage }
+        storage = {
+          ...storage,
+          cloudStorage: { ...cloudStorage, updatedAt: Date.now() }
+        }
 
         setStorageMap(
           produce((draft: ObjectMap<NoteStorage>) => {
             if (draft[id] != null) {
-              draft[id]!.cloudStorage = cloudStorage
+              draft[id]!.cloudStorage = {
+                ...cloudStorage,
+                updatedAt: Date.now()
+              }
             }
           })
         )
-
-        try {
-          await storage.db.sync(user, cloudStorage)
-          storage = await prepareStorage(storage, 'idb')
-
-          setStorageMap(prevStorageMap => {
-            const newStorageMap = produce(prevStorageMap, draft => {
-              if (prevStorageMap[id] == null) {
-                return
-              }
-              draft[id] = storage
-            })
-            saveStorageDataList(liteStorage, newStorageMap!)
-            return newStorageMap
-          })
-
-          return true
-        } catch {
-          return false
-        }
+        return syncStorage(storage.id, user)
       },
       [storageMap]
     )
@@ -912,13 +896,38 @@ export function createDbStoreCreator(
       )
     }
 
+    const syncStorage = async (storageId: string, user: User) => {
+      let storage = storageMap[storageId]
+      if (storage == null || storage.cloudStorage == null) {
+        return
+      }
+      await storage.db.sync(user, storage.cloudStorage)
+      storage.cloudStorage.updatedAt = Date.now()
+
+      storage = await prepareStorage(storage, adapter)
+      setStorageMap(prevStorageMap => {
+        const newStorageMap = produce(
+          prevStorageMap,
+          (draft: ObjectMap<NoteStorage>) => {
+            if (draft[storageId] == null) {
+              return
+            }
+            draft[storageId] = storage
+          }
+        )
+        saveStorageDataList(liteStorage, newStorageMap)
+        return newStorageMap
+      })
+    }
+
     return {
       initialized,
       storageMap,
       initialize,
       createStorage,
       removeStorage,
       renameStorage,
+      syncStorage,
       setCloudLink,
       removeCloudLink,
       createFolder,
@@ -939,7 +948,11 @@ export function createDbStoreCreator(
 const storageDataPredicate = schema({
   id: ow.string,
   name: ow.string,
-  cloudStorage: optional({ id: ow.number, name: ow.string })
+  cloudStorage: optional({
+    id: ow.number,
+    name: ow.string,
+    updatedAt: ow.number
+  })
 })
 
 export const {

src/lib/db/types.ts

@@ -17,6 +17,7 @@ export interface NoteStorageData {
   cloudStorage?: {
     id: number
     name: string
+    updatedAt: number
   }
 }