Feat/cloud integration (#569)

* Chore/unit test (#538)

* chore: add unit test

* chore: add github action for unit test

* feat: init firebase

* chore: add development secrets

* fix: rename auth -> data-services

* feat: update blocksuite 0.3.0-alpha.4 (#543)

* feat: add requests

* feat: optimize  swr cache

* feat: add Authorization

* feat: add confirm-invitation page

* feat: add account sdk api and proxy

* docs: update contributing (#550)

* docs: update contributing

* Update CONTRIBUTING.md

* Update CONTRIBUTING.md

Co-authored-by: ShortCipher5 <me@shortcipher.me>

* feat: update api

* feat: remove babelrc setting

* feat: add create workspace ui

* feat: choose workspaces

* feat: login modal

* feat: authorization api

* feat: login status

* fix: remove unused variables

* feat: login button

* fix: lint

* fix: workspace id

* fix: i18n type error

Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: ShortCipher5 <me@shortcipher.me>

packages/app/src/providers/app-state-provider.tsx

@@ -0,0 +1,57 @@
+import { createContext, useMemo, useContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import {
+  authorizationEvent,
+  AccessTokenMessage,
+  getWorkspaces,
+} from '@pathfinder/data-services';
+import type { Workspace } from '@pathfinder/data-services';
+
+interface AppStateValue {
+  user: AccessTokenMessage | null;
+  workspaces: Workspace[];
+}
+
+interface AppStateContext extends AppStateValue {
+  setState: (state: AppStateValue) => void;
+}
+
+const AppState = createContext<AppStateContext>({
+  user: null,
+  workspaces: [],
+  setState: () => {},
+});
+
+export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
+  const [state, setState] = useState<AppStateValue>({
+    user: null,
+    workspaces: [],
+  });
+
+  useEffect(() => {
+    const callback = async (user: AccessTokenMessage | null) => {
+      const workspaces = user ? await getWorkspaces() : [];
+      setState(state => ({ ...state, user: user, workspaces }));
+    };
+    authorizationEvent.onChange(callback);
+
+    return () => {
+      authorizationEvent.removeCallback(callback);
+    };
+  }, []);
+
+  const context = useMemo(
+    () => ({
+      ...state,
+      setState,
+    }),
+    [state, setState]
+  );
+
+  return <AppState.Provider value={context}>{children}</AppState.Provider>;
+};
+
+export const useAppState = () => {
+  const state = useContext(AppState);
+  return state;
+};

packages/app/src/providers/global-modal-provider.tsx

@@ -4,12 +4,14 @@ import ShortcutsModal from '@/components/shortcuts-modal';
 import ContactModal from '@/components/contact-modal';
 import QuickSearch from '@/components/quick-search';
 import { ImportModal } from '@/components/import';
+import { LoginModal } from '@/components/login-modal';
 
 type ModalContextValue = {
   triggerShortcutsModal: () => void;
   triggerContactModal: () => void;
   triggerQuickSearchModal: (visible?: boolean) => void;
   triggerImportModal: () => void;
+  triggerLoginModal: () => void;
 };
 type ModalContextProps = PropsWithChildren<{}>;
 type ModalMap = {
@@ -17,6 +19,7 @@ type ModalMap = {
   shortcuts: boolean;
   quickSearch: boolean;
   import: boolean;
+  login: boolean;
 };
 
 export const ModalContext = createContext<ModalContextValue>({
@@ -24,6 +27,7 @@ export const ModalContext = createContext<ModalContextValue>({
   triggerContactModal: () => {},
   triggerQuickSearchModal: (visible?) => {},
   triggerImportModal: () => {},
+  triggerLoginModal: () => {},
 });
 
 export const useModal = () => useContext(ModalContext);
@@ -36,6 +40,7 @@ export const ModalProvider = ({
     shortcuts: false,
     quickSearch: false,
     import: false,
+    login: false,
   });
 
   const triggerHandler = (key: keyof ModalMap, visible?: boolean) => {
@@ -60,6 +65,9 @@ export const ModalProvider = ({
         triggerImportModal: () => {
           triggerHandler('import');
         },
+        triggerLoginModal: () => {
+          triggerHandler('login');
+        },
       }}
     >
       <ContactModal
@@ -86,6 +94,12 @@ export const ModalProvider = ({
           triggerHandler('import', false);
         }}
       ></ImportModal>
+      <LoginModal
+        open={modalMap.login}
+        onClose={() => {
+          triggerHandler('login', false);
+        }}
+      />
       {children}
     </ModalContext.Provider>
   );