refactor(infra): directory structure (#4615)

packages/frontend/core/src/utils/cloud-utils.tsx

@@ -0,0 +1,114 @@
+import {
+  generateRandUTF16Chars,
+  SPAN_ID_BYTES,
+  TRACE_ID_BYTES,
+  traceReporter,
+} from '@affine/graphql';
+import { refreshRootMetadataAtom } from '@affine/workspace/atom';
+import { getCurrentStore } from '@toeverything/infra/atom';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { signIn, signOut } from 'next-auth/react';
+import { startTransition } from 'react';
+
+type TraceParams = {
+  startTime: string;
+  spanId: string;
+  traceId: string;
+  event: string;
+};
+
+function genTraceParams(): TraceParams {
+  const startTime = new Date().toISOString();
+  const spanId = generateRandUTF16Chars(SPAN_ID_BYTES);
+  const traceId = generateRandUTF16Chars(TRACE_ID_BYTES);
+  const event = 'signInCloud';
+  return { startTime, spanId, traceId, event };
+}
+
+function onResolveHandleTrace<T>(
+  res: Promise<T> | T,
+  params: TraceParams
+): Promise<T> | T {
+  const { startTime, spanId, traceId, event } = params;
+  traceReporter &&
+    traceReporter.cacheTrace(traceId, spanId, startTime, { event });
+  return res;
+}
+
+function onRejectHandleTrace<T>(
+  res: Promise<T> | T,
+  params: TraceParams
+): Promise<T> {
+  const { startTime, spanId, traceId, event } = params;
+  traceReporter &&
+    traceReporter.uploadTrace(traceId, spanId, startTime, { event });
+  return Promise.reject(res);
+}
+
+export const signInCloud: typeof signIn = async (provider, ...rest) => {
+  const traceParams = genTraceParams();
+  if (environment.isDesktop) {
+    if (provider === 'google') {
+      open(
+        `${
+          runtimeConfig.serverUrlPrefix
+        }/desktop-signin?provider=google&callback_url=${buildCallbackUrl(
+          '/open-app/signin-redirect'
+        )}`,
+        '_target'
+      );
+      return;
+    } else {
+      const [options, ...tail] = rest;
+      const callbackUrl =
+        runtimeConfig.serverUrlPrefix +
+        (provider === 'email'
+          ? '/open-app/signin-redirect'
+          : location.pathname);
+      return signIn(
+        provider,
+        {
+          ...options,
+          callbackUrl: buildCallbackUrl(callbackUrl),
+        },
+        ...tail
+      )
+        .then(res => onResolveHandleTrace(res, traceParams))
+        .catch(err => onRejectHandleTrace(err, traceParams));
+    }
+  } else {
+    return signIn(provider, ...rest)
+      .then(res => onResolveHandleTrace(res, traceParams))
+      .catch(err => onRejectHandleTrace(err, traceParams));
+  }
+};
+
+export const signOutCloud: typeof signOut = async options => {
+  const traceParams = genTraceParams();
+  return signOut({
+    callbackUrl: '/',
+    ...options,
+  })
+    .then(result => {
+      if (result) {
+        startTransition(() => {
+          localStorage.removeItem('last_workspace_id');
+          getCurrentStore().set(refreshRootMetadataAtom);
+        });
+      }
+      return onResolveHandleTrace(result, traceParams);
+    })
+    .catch(err => onRejectHandleTrace(err, traceParams));
+};
+
+export function buildCallbackUrl(callbackUrl: string) {
+  const params: string[][] = [];
+  if (environment.isDesktop && window.appInfo.schema) {
+    params.push(['schema', window.appInfo.schema]);
+  }
+  const query =
+    params.length > 0
+      ? '?' + params.map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')
+      : '';
+  return callbackUrl + query;
+}

packages/frontend/core/src/utils/create-emotion-cache.ts

@@ -0,0 +1,15 @@
+import { isBrowser } from '@affine/env/constant';
+import createCache from '@emotion/cache';
+
+export default function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'affine', insertionPoint });
+}

packages/frontend/core/src/utils/email-regex.ts

@@ -0,0 +1,2 @@
+export const emailRegex =
+  /^(?:(?:[^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?:(?:\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|((?:[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

packages/frontend/core/src/utils/filter.ts

@@ -0,0 +1,18 @@
+import { filterByFilterList } from '@affine/component/page-list';
+import type { Collection } from '@affine/env/filter';
+import type { PageMeta } from '@blocksuite/store';
+
+export const filterPage = (collection: Collection, page: PageMeta) => {
+  if (collection.excludeList?.includes(page.id)) {
+    return false;
+  }
+  if (collection.allowList?.includes(page.id)) {
+    return true;
+  }
+  return filterByFilterList(collection.filterList, {
+    'Is Favourited': !!page.favorite,
+    Created: page.createDate,
+    Updated: page.updatedDate ?? page.createDate,
+    Tags: page.tags,
+  });
+};

packages/frontend/core/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './create-emotion-cache';
+export * from './string2color';
+export * from './toast';

packages/frontend/core/src/utils/string2color.ts

@@ -0,0 +1,20 @@
+export function stringToColour(str: string) {
+  str = str || 'affine';
+  let colour = '#';
+  let hash = 0;
+  // str to hash
+  for (
+    let i = 0;
+    i < str.length;
+    hash = str.charCodeAt(i++) + ((hash << 5) - hash)
+  );
+
+  // int/hash to hex
+  for (
+    let i = 0;
+    i < 3;
+    colour += ('00' + ((hash >> (i++ * 8)) & 0xff).toString(16)).slice(-2)
+  );
+
+  return colour;
+}

packages/frontend/core/src/utils/toast.ts

@@ -0,0 +1,30 @@
+import type { ToastOptions } from '@affine/component';
+import { toast as basicToast } from '@affine/component';
+import { assertEquals, assertExists } from '@blocksuite/global/utils';
+import { getCurrentStore } from '@toeverything/infra/atom';
+
+import { mainContainerAtom } from '../atoms/element';
+
+export const toast = (message: string, options?: ToastOptions) => {
+  const mainContainer = getCurrentStore().get(mainContainerAtom);
+  const modal = document.querySelector(
+    '[role=presentation]'
+  ) as HTMLDivElement | null;
+  assertExists(mainContainer, 'main container should exist');
+  if (modal) {
+    assertEquals(modal.constructor, HTMLDivElement, 'modal should be div');
+  }
+  return basicToast(message, {
+    portal: modal || mainContainer || document.body,
+    ...options,
+  });
+};
+
+declare global {
+  // global Events
+  interface WindowEventMap {
+    'affine-toast:emit': CustomEvent<{
+      message: string;
+    }>;
+  }
+}

packages/frontend/core/src/utils/user-setting.ts

@@ -0,0 +1,208 @@
+import type { CollectionsAtom } from '@affine/component/page-list';
+import type { Collection } from '@affine/env/filter';
+import { DisposableGroup } from '@blocksuite/global/utils';
+import { currentWorkspaceAtom } from '@toeverything/infra/atom';
+import { type DBSchema, openDB } from 'idb';
+import { atom } from 'jotai';
+import { atomWithObservable } from 'jotai/utils';
+import { nanoid } from 'nanoid';
+import { Observable } from 'rxjs';
+import type { Map as YMap } from 'yjs';
+import { Doc as YDoc } from 'yjs';
+
+import { sessionAtom } from '../atoms/cloud-user';
+
+export interface PageCollectionDBV1 extends DBSchema {
+  view: {
+    key: Collection['id'];
+    value: Collection;
+  };
+}
+
+export interface StorageCRUD<Value> {
+  get: (key: string) => Promise<Value | null>;
+  set: (key: string, value: Value) => Promise<string>;
+  delete: (key: string) => Promise<void>;
+  list: () => Promise<string[]>;
+}
+
+type Subscribe = () => void;
+
+const collectionDBAtom = atom(
+  openDB<PageCollectionDBV1>('page-view', 1, {
+    upgrade(database) {
+      database.createObjectStore('view', {
+        keyPath: 'id',
+      });
+    },
+  })
+);
+
+const callbackSet = new Set<Subscribe>();
+
+const localCollectionCRUDAtom = atom(get => ({
+  get: async (key: string) => {
+    const db = await get(collectionDBAtom);
+    const t = db.transaction('view').objectStore('view');
+    return (await t.get(key)) ?? null;
+  },
+  set: async (key: string, value: Collection) => {
+    const db = await get(collectionDBAtom);
+    const t = db.transaction('view', 'readwrite').objectStore('view');
+    await t.put(value);
+    callbackSet.forEach(cb => cb());
+    return key;
+  },
+  delete: async (key: string) => {
+    const db = await get(collectionDBAtom);
+    const t = db.transaction('view', 'readwrite').objectStore('view');
+    callbackSet.forEach(cb => cb());
+    await t.delete(key);
+  },
+  list: async () => {
+    const db = await get(collectionDBAtom);
+    const t = db.transaction('view').objectStore('view');
+    return t.getAllKeys();
+  },
+}));
+
+const getCollections = async (
+  storage: StorageCRUD<Collection>
+): Promise<Collection[]> => {
+  return storage
+    .list()
+    .then(async keys => {
+      return await Promise.all(keys.map(key => storage.get(key))).then(v =>
+        v.filter((v): v is Collection => v !== null)
+      );
+    })
+    .catch(error => {
+      console.error('Failed to load collections', error);
+      return [];
+    });
+};
+
+const pageCollectionBaseAtom = atomWithObservable<Collection[]>(get => {
+  const currentWorkspacePromise = get(currentWorkspaceAtom);
+  const session = get(sessionAtom);
+  const localCRUD = get(localCollectionCRUDAtom);
+  const userId = session?.data?.user.id ?? null;
+
+  const useLocalStorage = userId === null;
+
+  return new Observable<Collection[]>(subscriber => {
+    // initial value
+    subscriber.next([]);
+    if (useLocalStorage) {
+      const fn = () => {
+        getCollections(localCRUD).then(async collections => {
+          const workspaceId = (await currentWorkspacePromise).id;
+          subscriber.next(
+            collections.filter(c => c.workspaceId === workspaceId)
+          );
+        });
+      };
+      fn();
+      callbackSet.add(fn);
+      return () => {
+        callbackSet.delete(fn);
+      };
+    } else {
+      const group = new DisposableGroup();
+      currentWorkspacePromise.then(async currentWorkspace => {
+        const collectionsFromLocal = await getCollections(localCRUD);
+        const rootDoc = currentWorkspace.doc;
+        const settingMap = rootDoc.getMap('settings') as YMap<YDoc>;
+        if (!settingMap.has(userId)) {
+          settingMap.set(
+            userId,
+            new YDoc({
+              guid: nanoid(),
+            })
+          );
+        }
+        const settingDoc = settingMap.get(userId) as YDoc;
+        if (!settingDoc.isLoaded) {
+          settingDoc.load();
+          await settingDoc.whenLoaded;
+        }
+        const viewMap = settingDoc.getMap('view') as YMap<Collection>;
+        // sync local storage to doc
+        collectionsFromLocal.map(v => viewMap.set(v.id, v));
+        // delete from indexeddb
+        Promise.all(
+          collectionsFromLocal.map(async v => {
+            await localCRUD.delete(v.id);
+          })
+        ).catch(error => {
+          console.error('Failed to delete collections from indexeddb', error);
+        });
+        const collectionsFromDoc: Collection[] = Array.from(viewMap.keys())
+          .map(key => viewMap.get(key))
+          .filter((v): v is Collection => !!v);
+        const collections = [...collectionsFromDoc];
+        subscriber.next(collections);
+        if (group.disposed) {
+          return;
+        }
+        const fn = () => {
+          const collectionsFromDoc: Collection[] = Array.from(viewMap.keys())
+            .map(key => viewMap.get(key))
+            .filter((v): v is Collection => !!v);
+          const collections = [...collectionsFromLocal, ...collectionsFromDoc];
+          subscriber.next(collections);
+        };
+        viewMap.observe(fn);
+        group.add(() => {
+          viewMap.unobserve(fn);
+        });
+      });
+      return () => {
+        group.dispose();
+      };
+    }
+  });
+});
+
+export const currentCollectionsAtom: CollectionsAtom = atom(
+  get => get(pageCollectionBaseAtom),
+  async (get, _, apply) => {
+    const collections = await get(pageCollectionBaseAtom);
+    let newCollections: Collection[];
+    if (typeof apply === 'function') {
+      newCollections = apply(collections);
+    } else {
+      newCollections = apply;
+    }
+    const session = get(sessionAtom);
+    const userId = session?.data?.user.id ?? null;
+    const useLocalStorage = userId === null;
+    const added = newCollections.filter(v => !collections.includes(v));
+    const removed = collections.filter(v => !newCollections.includes(v));
+    if (useLocalStorage) {
+      const localCRUD = get(localCollectionCRUDAtom);
+      await Promise.all([
+        ...added.map(async v => {
+          await localCRUD.set(v.id, v);
+        }),
+        ...removed.map(async v => {
+          await localCRUD.delete(v.id);
+        }),
+      ]);
+    } else {
+      const currentWorkspace = await get(currentWorkspaceAtom);
+      const rootDoc = currentWorkspace.doc;
+      const settingMap = rootDoc.getMap('settings') as YMap<YDoc>;
+      const settingDoc = settingMap.get(userId) as YDoc;
+      const viewMap = settingDoc.getMap('view') as YMap<Collection>;
+      await Promise.all([
+        ...added.map(async v => {
+          viewMap.set(v.id, v);
+        }),
+        ...removed.map(async v => {
+          viewMap.delete(v.id);
+        }),
+      ]);
+    }
+  }
+);