feat: create SyncDetectorModal

packages/api/src/router/snapshot.ts

@@ -5,7 +5,11 @@ export const snapshotRouter = createTRPCRouter({
   listByAddress: publicProcedure
     .input(z.object({ address: z.string() }))
     .query(({ ctx, input }) => {
-      return ctx.prisma.snapshot.findMany({ where: {} })
+      return ctx.prisma.snapshot.findMany({
+        where: {
+          address: input.address,
+        },
+      })
     }),
 
   upsert: publicProcedure

packages/app/src/EditorApp.tsx

@@ -11,6 +11,7 @@ import { ClientOnly } from './components/ClientOnly'
 import { EditorLayout } from './EditorLayout/EditorLayout'
 import { LoginSuccessModal } from './EditorLayout/LoginSuccessModal'
 import { HotkeyBinding } from './HotkeyBinding'
+import { SyncDetectorModal } from './SyncDetectorModal'
 import { UserQuery } from './UserQuery'
 import { WorkerStarter } from './WorkerStarter'
 
@@ -55,6 +56,8 @@ export const EditorApp: FC<PropsWithChildren> = ({ children }) => {
   return (
     <ClientOnly>
       <Provider store={store}>
+        {address && <SyncDetectorModal />}
+
         <WorkerStarter />
         <UserQuery />
         <LoginSuccessModal />

packages/app/src/SyncDetectorModal.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { Box } from '@fower/react'
+import { Trans } from '@lingui/macro'
+import { atom, useAtom } from 'jotai'
+import { useAccount } from 'wagmi'
+import {
+  Button,
+  Modal,
+  ModalClose,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  useModalContext,
+} from 'uikit'
+import { ModalNames } from '@penx/constants'
+import { Snapshot } from '@penx/db'
+import { useUser } from '@penx/hooks'
+import { db } from '@penx/local-db'
+import { store } from '@penx/store'
+import { trpc } from '@penx/trpc-client'
+
+const snapshotAtom = atom<Snapshot[]>([])
+
+const useSnapshots = () => {
+  const { address = '' } = useAccount()
+  const [snapshots, setSnapshots] = useAtom(snapshotAtom)
+
+  async function run() {
+    const snapshots = await trpc.snapshot.listByAddress.query({ address })
+    const spaces = await db.listSpaces()
+    const set = new Set(spaces.map((space) => space.id))
+    const data = snapshots.filter((snapshot) => !set.has(snapshot.spaceId))
+
+    console.log('data', data)
+    setSnapshots(data)
+  }
+
+  useEffect(() => {
+    run()
+  }, [])
+
+  return { snapshots }
+}
+
+function SyncItem({ spaceId }: { spaceId: string }) {
+  async function sync() {
+    const space = await db.getSpace(spaceId)
+    if (space) return
+    await store.createSpace({
+      name: spaceId,
+      id: spaceId,
+    })
+  }
+  return (
+    <Box toCenterY toBetween gap3>
+      <Box>{spaceId}</Box>
+      <Button colorScheme="white" onClick={sync}>
+        <Trans>Sync</Trans>
+      </Button>
+    </Box>
+  )
+}
+
+const Content = () => {
+  const { snapshots } = useSnapshots()
+  return (
+    <Box gap3>
+      <ModalHeader mb2>
+        <Trans>Detect {snapshots.length} to sync</Trans>
+      </ModalHeader>
+      <Box column gap3>
+        {snapshots.map((snapshot) => (
+          <SyncItem key={snapshot.id} spaceId={snapshot.spaceId}></SyncItem>
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export const SyncDetectorModal = () => {
+  const { snapshots } = useSnapshots()
+  if (!snapshots.length) return null
+  return (
+    <Modal name={ModalNames.SYNC_DETECTOR} isOpen closeOnOverlayClick={false}>
+      <ModalOverlay />
+      <ModalContent w={[500]} column gap4 toCenterX>
+        <ModalCloseButton />
+
+        <Content />
+      </ModalContent>
+    </Modal>
+  )
+}

packages/constants/src/constants.ts

@@ -54,6 +54,7 @@ export enum ModalNames {
   IMPORT_SPACE,
   DELETE_SPACE,
   LOGIN_SUCCESS,
+  SYNC_DETECTOR,
 }
 
 export const ELEMENT_P = 'p'

packages/service/src/SpaceService.ts

@@ -12,7 +12,7 @@ export class SpaceService {
   nodes: INode[] = []
 
   createSpace = async (name: string) => {
-    const space = await store.createSpace(name)
+    const space = await store.createSpace({ name })
     return space
   }
 

packages/store/src/store.ts

@@ -164,11 +164,15 @@ export const store = Object.assign(createStore(), {
     this.reloadNode(node)
   },
 
-  async createSpace(name: string) {
-    const space = await db.createSpace({ name })
+  async createSpace(input: Partial<ISpace>) {
+    const space = await db.createSpace(input)
     const spaces = await db.listSpaces()
     const nodeId = space.children[0]
+    const nodes = await db.listNormalNodes(space.id)
     const node = await db.getNode(nodeId)
+
+    this.routeTo('NODE')
+    this.setNodes(nodes)
     this.setSpaces(spaces)
     this.reloadNode(node)
     return space