feat: app multiple tab data sync

packages/erd-editor-app/src/atoms/modules/schema/index.ts

@@ -4,10 +4,16 @@ import { atomWithImmer } from 'jotai-immer';
 import { selectedSchemaIdAtom } from '@/atoms/modules/sidebar';
 import { getAppDatabaseService } from '@/services/indexeddb';
 import { SchemaEntity } from '@/services/indexeddb/modules/schema';
+import {
+  addSchemaEntityAction,
+  deleteSchemaEntityAction,
+  dispatch,
+  updateSchemaEntityAction,
+} from '@/utils/broadcastChannel';
 
-const schemaEntitiesAtom = atomWithImmer<Array<Omit<SchemaEntity, 'value'>>>(
-  []
-);
+export const schemaEntitiesAtom = atomWithImmer<
+  Array<Omit<SchemaEntity, 'value'>>
+>([]);
 
 const updateSchemaEntitiesAtom = atom(null, async (get, set) => {
   const service = getAppDatabaseService();
@@ -34,6 +40,7 @@ const addSchemaEntityAtom = atom(
       draft.push(result);
     });
     set(selectedSchemaIdAtom, result.id);
+    dispatch(addSchemaEntityAction({ value: result }));
 
     return result;
   }
@@ -44,43 +51,63 @@ const updateSchemaEntityAtom = atom(
   async (
     get,
     set,
-    {
-      id,
-      entityValue,
-    }: {
+    payload: {
       id: string;
-      entityValue: Partial<{ name: string; value: string }>;
+      entityValue: Partial<{ name: string }>;
     }
   ) => {
     const service = getAppDatabaseService();
     if (!service) throw new Error('Database service is not initialized');
 
-    set(schemaEntitiesAtom, draft => {
-      const value = draft.find(item => item.id === id);
-      if (!value) return;
-      Object.assign(value, entityValue);
-    });
+    const { id, entityValue } = payload;
+    const entities = get(schemaEntitiesAtom);
+    const prev = entities.find(item => item.id === id);
+
+    const update = (newValue?: Partial<{ name: string }>) => {
+      set(schemaEntitiesAtom, draft => {
+        const value = draft.find(item => item.id === id);
+        if (!value || !newValue) return;
+        Object.assign(value, newValue);
+      });
+    };
+
+    update(entityValue);
+
+    try {
+      const result = await service.updateSchemaEntity(id, entityValue);
 
-    return await service.updateSchemaEntity(id, entityValue);
+      result ? dispatch(updateSchemaEntityAction(payload)) : update(prev);
+      return result;
+    } catch (error) {
+      update(prev);
+      throw error;
+    }
   }
 );
 
 const deleteSchemaEntityAtom = atom(null, async (get, set, id: string) => {
   const service = getAppDatabaseService();
   if (!service) throw new Error('Database service is not initialized');
 
+  const prev = get(schemaEntitiesAtom);
+  const selectedSchemaId = get(selectedSchemaIdAtom);
+
   set(schemaEntitiesAtom, draft => {
     const index = draft.findIndex(item => item.id === id);
     if (index === -1) return;
     draft.splice(index, 1);
   });
 
-  const selectedSchemaId = get(selectedSchemaIdAtom);
-  if (selectedSchemaId === id) {
-    set(selectedSchemaIdAtom, null);
+  try {
+    await service.deleteSchemaEntity(id);
+    if (selectedSchemaId === id) {
+      set(selectedSchemaIdAtom, null);
+    }
+    dispatch(deleteSchemaEntityAction({ id }));
+  } catch (error) {
+    set(schemaEntitiesAtom, prev);
+    throw error;
   }
-
-  await service.deleteSchemaEntity(id);
 });
 
 export const useSchemaEntities = () => useAtomValue(schemaEntitiesAtom);

packages/erd-editor-app/src/atoms/modules/sidebar/index.ts

@@ -2,15 +2,18 @@ import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { loadable } from 'jotai/utils';
 
 import { getAppDatabaseService } from '@/services/indexeddb';
-import { dispatch, replicationValueAction } from '@/utils/broadcastChannel';
+import {
+  dispatch,
+  replicationSchemaEntityAction,
+} from '@/utils/broadcastChannel';
 
 export const selectedSchemaIdAtom = atom<string | null>(null);
 
 const asyncSchemaEntityAtom = atom(async get => {
+  const id = get(selectedSchemaIdAtom);
   const service = getAppDatabaseService();
-  if (!service) throw new Error('Database service is not initialized');
 
-  const id = get(selectedSchemaIdAtom);
+  if (!service) throw new Error('Database service is not initialized');
   if (!id) throw new Error('not found selected schema id');
 
   const result = await service.getSchemaEntity(id);
@@ -21,29 +24,9 @@ const asyncSchemaEntityAtom = atom(async get => {
 
 const schemaEntityAtom = loadable(asyncSchemaEntityAtom);
 
-const updateSchemaEntityValueAtom = atom(
-  null,
-  async (
-    get,
-    set,
-    {
-      id,
-      value,
-    }: {
-      id: string;
-      value: string;
-    }
-  ) => {
-    const service = getAppDatabaseService();
-    if (!service) throw new Error('Database service is not initialized');
-
-    return await service.updateSchemaEntity(id, { value });
-  }
-);
-
 const replicationSchemaEntityAtom = atom(
   null,
-  (
+  async (
     get,
     set,
     {
@@ -58,12 +41,10 @@ const replicationSchemaEntityAtom = atom(
     if (!service) throw new Error('Database service is not initialized');
 
     service.replicationSchemaEntity(id, actions);
-    dispatch(replicationValueAction({ id, actions }));
+    dispatch(replicationSchemaEntityAction({ id, actions }));
   }
 );
 
 export const useSchemaEntity = () => useAtomValue(schemaEntityAtom);
-export const useUpdateSchemaEntityValue = () =>
-  useSetAtom(updateSchemaEntityValueAtom);
 export const useReplicationSchemaEntity = () =>
   useSetAtom(replicationSchemaEntityAtom);

packages/erd-editor-app/src/components/viewer/editor/Editor.tsx

@@ -49,7 +49,7 @@ const Editor: React.FC<EditorProps> = props => {
       )
       .add(
         bridge.on({
-          replicationValue: ({ payload: { id, actions } }) => {
+          replicationSchemaEntity: ({ payload: { id, actions } }) => {
             if (id === props.entity.id) {
               sharedStore.dispatch(actions);
             }

packages/erd-editor-app/src/main.tsx

@@ -1,14 +1,18 @@
 import './styles.css';
 
+import { Provider } from 'jotai';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from '@/components/app/App';
+import { store } from '@/store';
 
 const root = createRoot(document.getElementById('app')!);
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 

packages/erd-editor-app/src/services/indexeddb/appDatabaseService.ts

@@ -48,7 +48,7 @@ export class AppDatabaseService {
   }
 
   async getSchemaEntities() {
-    return await this.schemaService.getEntities();
+    return await this.schemaService.getAll();
   }
 
   async replicationSchemaEntity(id: string, actions: any) {

packages/erd-editor-app/src/services/indexeddb/modules/schema/service.ts

@@ -18,17 +18,25 @@ export class SchemaService {
   private cache = new Map<string, SchemaEntity & { store: ReplicationStore }>();
   constructor(private db: AppDatabase) {}
 
-  async add(entityValue: Pick<SchemaEntity, 'name'>) {
-    const result = await addSchemaEntity(this.db, entityValue);
+  private createCache(entity: SchemaEntity) {
+    if (this.cache.has(entity.id)) return;
 
-    const store = createReplicationStore({ toWidth });
+    const store = createReplicationStore({
+      toWidth: value => value.length * 11,
+    });
+    store.setInitialValue(entity.value);
     store.on({
       change: () => {
-        this.update(result.id, { value: store.value });
+        this.update(entity.id, { value: store.value });
       },
     });
-    this.cache.set(result.id, { ...result, store });
+    this.cache.set(entity.id, { ...entity, store });
+  }
+
+  async add(entityValue: Pick<SchemaEntity, 'name'>) {
+    const result = await addSchemaEntity(this.db, entityValue);
 
+    this.createCache(result);
     return result;
   }
 
@@ -51,37 +59,26 @@ export class SchemaService {
   }
 
   async delete(id: string) {
-    const result = await deleteSchemaEntity(this.db, id);
+    await deleteSchemaEntity(this.db, id);
     const prev = this.cache.get(id);
 
     if (prev) {
       this.cache.delete(id);
       prev.store.destroy();
     }
-
-    return result;
   }
 
   async get(id: string) {
     const prev = this.cache.get(id);
     if (prev) return omit(prev, 'store');
 
     const result = await getSchemaEntity(this.db, id);
-    if (result) {
-      const store = createReplicationStore({ toWidth });
-      store.setInitialValue(result.value);
-      store.on({
-        change: () => {
-          this.update(result.id, { value: store.value });
-        },
-      });
-      this.cache.set(id, { ...result, store });
-    }
+    result && this.createCache(result);
 
     return result;
   }
 
-  async getEntities() {
+  async getAll() {
     return await getSchemaEntities(this.db);
   }
 
@@ -98,7 +95,3 @@ export class SchemaService {
     }
   }
 }
-
-function toWidth(value: string) {
-  return value.length * 11;
-}

packages/erd-editor-app/src/store.ts

@@ -0,0 +1,34 @@
+import { createStore } from 'jotai';
+
+import { schemaEntitiesAtom } from '@/atoms/modules/schema';
+import { selectedSchemaIdAtom } from '@/atoms/modules/sidebar';
+import { bridge } from '@/utils/broadcastChannel';
+
+export const store = createStore();
+
+bridge.on({
+  addSchemaEntity: ({ payload: { value } }) => {
+    store.set(schemaEntitiesAtom, draft => {
+      draft.push(value);
+    });
+  },
+  updateSchemaEntity: ({ payload: { id, entityValue } }) => {
+    store.set(schemaEntitiesAtom, draft => {
+      const value = draft.find(item => item.id === id);
+      if (!value) return;
+      Object.assign(value, entityValue);
+    });
+  },
+  deleteSchemaEntity: ({ payload: { id } }) => {
+    const selectedSchemaId = store.get(selectedSchemaIdAtom);
+    if (selectedSchemaId === id) {
+      store.set(selectedSchemaIdAtom, null);
+    }
+
+    store.set(schemaEntitiesAtom, draft => {
+      const index = draft.findIndex(item => item.id === id);
+      if (index === -1) return;
+      draft.splice(index, 1);
+    });
+  },
+});

packages/erd-editor-app/src/utils/broadcastChannel.ts

@@ -1,17 +1,31 @@
 import { isObject, safeCallback } from '@dineug/shared';
 
 import { AnyAction, ReducerRecord, ValuesType } from '@/internal-types';
+import { SchemaEntity } from '@/services/indexeddb/modules/schema';
 
 const BridgeActionType = {
-  replicationValue: 'replicationValue',
+  replicationSchemaEntity: 'replicationSchemaEntity',
+  addSchemaEntity: 'addSchemaEntity',
+  updateSchemaEntity: 'updateSchemaEntity',
+  deleteSchemaEntity: 'deleteSchemaEntity',
 } as const;
 type BridgeActionType = ValuesType<typeof BridgeActionType>;
 
 type BridgeActionMap = {
-  [BridgeActionType.replicationValue]: {
+  [BridgeActionType.replicationSchemaEntity]: {
     id: string;
     actions: any;
   };
+  [BridgeActionType.addSchemaEntity]: {
+    value: SchemaEntity;
+  };
+  [BridgeActionType.updateSchemaEntity]: {
+    id: string;
+    entityValue: Partial<{ name: string }>;
+  };
+  [BridgeActionType.deleteSchemaEntity]: {
+    id: string;
+  };
 };
 
 function createAction<P = void>(type: string) {
@@ -56,6 +70,18 @@ channel.addEventListener('message', event => {
   bridge.emit(action);
 });
 
-export const replicationValueAction = createAction<
-  BridgeActionMap[typeof BridgeActionType.replicationValue]
->(BridgeActionType.replicationValue);
+export const replicationSchemaEntityAction = createAction<
+  BridgeActionMap[typeof BridgeActionType.replicationSchemaEntity]
+>(BridgeActionType.replicationSchemaEntity);
+
+export const addSchemaEntityAction = createAction<
+  BridgeActionMap[typeof BridgeActionType.addSchemaEntity]
+>(BridgeActionType.addSchemaEntity);
+
+export const updateSchemaEntityAction = createAction<
+  BridgeActionMap[typeof BridgeActionType.updateSchemaEntity]
+>(BridgeActionType.updateSchemaEntity);
+
+export const deleteSchemaEntityAction = createAction<
+  BridgeActionMap[typeof BridgeActionType.deleteSchemaEntity]
+>(BridgeActionType.deleteSchemaEntity);