feat: login reduce

libs/components/account/src/login/firebase.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable filename-rules/match */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { initializeApp } from 'firebase/app';
 import {
     GoogleAuthProvider,
@@ -8,15 +8,7 @@ import {
     browserLocalPersistence,
 } from 'firebase/auth';
 
-import { LogoImg } from '@toeverything/components/common';
-import {
-    MuiButton,
-    MuiBox,
-    MuiGrid,
-    MuiSnackbar,
-} from '@toeverything/components/ui';
-
-import { Error } from './../error';
+import { MuiButton } from '@toeverything/components/ui';
 
 const _firebaseConfig = {
     apiKey: 'AIzaSyD7A_VyGaKTXsPqtga9IbwrEsbWWc4rH3Y',
@@ -75,7 +67,7 @@ const GoogleIcon = () => (
     </svg>
 );
 
-export const Firebase = () => {
+export const Firebase = (props: { onError: () => void }) => {
     const [auth, provider] = useMemo(() => {
         const auth = getAuth(_app);
         auth.setPersistence(browserLocalPersistence);
@@ -83,8 +75,6 @@ export const Firebase = () => {
         return [auth, provider];
     }, []);
 
-    const [error, setError] = useState(false);
-
     const handleAuth = useCallback(() => {
         signInWithPopup(auth, provider).catch(error => {
             const errorCode = error.code;
@@ -92,53 +82,19 @@ export const Firebase = () => {
             const email = error.customData.email;
             const credential = GoogleAuthProvider.credentialFromError(error);
             console.log(errorCode, errorMessage, email, credential);
-            setError(true);
-            setTimeout(() => setError(false), 3000);
+            props.onError();
         });
-    }, [auth, provider]);
+    }, [auth, props, provider]);
 
     return (
-        <MuiGrid container>
-            <MuiSnackbar
-                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-                open={error}
-                message="Login failed, please check if you have permission"
-            />
-            <MuiGrid item xs={8}>
-                <Error
-                    title="Welcome to AFFiNE"
-                    subTitle="blocks of knowledge to power your team"
-                    action1Text="Login &nbsp; or &nbsp; Register"
-                />
-            </MuiGrid>
-
-            <MuiGrid item xs={4}>
-                <MuiBox
-                    onSubmit={handleAuth}
-                    onClick={handleAuth}
-                    style={{
-                        textAlign: 'center',
-                        width: '300px',
-                        margin: '300px  auto 20px auto',
-                    }}
-                    sx={{ mt: 1 }}
-                >
-                    <LogoImg
-                        style={{
-                            width: '100px',
-                        }}
-                    />
-
-                    <MuiButton
-                        variant="outlined"
-                        fullWidth
-                        style={{ textTransform: 'none' }}
-                        startIcon={<GoogleIcon />}
-                    >
-                        Continue with Google
-                    </MuiButton>
-                </MuiBox>
-            </MuiGrid>
-        </MuiGrid>
+        <MuiButton
+            variant="outlined"
+            fullWidth
+            style={{ textTransform: 'none' }}
+            startIcon={<GoogleIcon />}
+            onClick={handleAuth}
+        >
+            Continue with Google
+        </MuiButton>
     );
 };

libs/components/account/src/login/fs.tsx

@@ -1,20 +1,22 @@
 /* eslint-disable filename-rules/match */
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 
-import { LogoImg } from '@toeverything/components/common';
-import {
-    MuiButton,
-    MuiBox,
-    MuiGrid,
-    MuiSnackbar,
-} from '@toeverything/components/ui';
+import { LogoIcon } from '@toeverything/components/icons';
+import { MuiButton } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
 import { useLocalTrigger } from '@toeverything/datasource/state';
 
-import { Error } from './../error';
+const cleanupWorkspace = (workspace: string) =>
+    new Promise((resolve, reject) => {
+        const req = indexedDB.deleteDatabase(workspace);
+        req.addEventListener('error', e => reject(e));
+        req.addEventListener('blocked', e => reject(e));
+        req.addEventListener('upgradeneeded', e => reject(e));
+        req.addEventListener('success', e => resolve(e));
+    });
 
 const requestPermission = async (workspace: string) => {
-    indexedDB.deleteDatabase(workspace);
+    await cleanupWorkspace(workspace);
     const dirHandler = await window.showDirectoryPicker({
         id: 'AFFiNE_' + workspace,
         mode: 'readwrite',
@@ -43,9 +45,16 @@ const requestPermission = async (workspace: string) => {
     );
 };
 
-export const FileSystem = () => {
+export const FileSystem = (props: { onError: () => void }) => {
     const onSelected = useLocalTrigger();
-    const [error, setError] = useState(false);
+
+    const apiSupported = useMemo(() => {
+        try {
+            return 'showOpenFilePicker' in window;
+        } catch (e) {
+            return false;
+        }
+    }, []);
 
     useEffect(() => {
         if (process.env['NX_E2E']) {
@@ -54,54 +63,25 @@ export const FileSystem = () => {
     }, []);
 
     return (
-        <MuiGrid container>
-            <MuiSnackbar
-                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-                open={error}
-                message="Login failed, please check if you have permission"
-            />
-            <MuiGrid item xs={8}>
-                <Error
-                    title="Welcome to AFFiNE"
-                    subTitle="blocks of knowledge to power your team"
-                    action1Text="Login &nbsp; or &nbsp; Register"
-                />
-            </MuiGrid>
-
-            <MuiGrid item xs={4}>
-                <MuiBox
-                    onClick={async () => {
-                        try {
-                            await requestPermission('AFFiNE');
-                            onSelected();
-                        } catch (e) {
-                            setError(true);
-                            onSelected();
-                            setTimeout(() => setError(false), 3000);
-                        }
-                    }}
-                    style={{
-                        textAlign: 'center',
-                        width: '300px',
-                        margin: '300px  auto 20px auto',
-                    }}
-                    sx={{ mt: 1 }}
-                >
-                    <LogoImg
-                        style={{
-                            width: '100px',
-                        }}
-                    />
-
-                    <MuiButton
-                        variant="outlined"
-                        fullWidth
-                        style={{ textTransform: 'none' }}
-                    >
-                        Sync to Disk
-                    </MuiButton>
-                </MuiBox>
-            </MuiGrid>
-        </MuiGrid>
+        <MuiButton
+            variant="outlined"
+            fullWidth
+            style={{ textTransform: 'none' }}
+            startIcon={<LogoIcon />}
+            onClick={async () => {
+                try {
+                    if (apiSupported) {
+                        await requestPermission('AFFiNE');
+                        onSelected();
+                    } else {
+                        onSelected();
+                    }
+                } catch (e) {
+                    props.onError();
+                }
+            }}
+        >
+            {apiSupported ? 'Sync to Disk' : 'Try Live Demo'}
+        </MuiButton>
     );
 };

libs/components/account/src/login/index.tsx

@@ -1,13 +1,64 @@
 /* eslint-disable filename-rules/match */
+import { useCallback, useState } from 'react';
+import { LogoImg } from '@toeverything/components/common';
+import { MuiBox, MuiGrid, MuiSnackbar } from '@toeverything/components/ui';
+
 // import { Authing } from './authing';
 import { Firebase } from './firebase';
 import { FileSystem } from './fs';
+import { Error } from './../error';
 
 export function Login() {
+    const [error, setError] = useState(false);
+
+    const onError = useCallback(() => {
+        setError(true);
+        setTimeout(() => setError(false), 3000);
+    }, []);
+
     return (
-        <>
-            {/* <Authing /> */}
-            {process.env['NX_LOCAL'] ? <FileSystem /> : <Firebase />}
-        </>
+        <MuiGrid container>
+            <MuiSnackbar
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+                open={error}
+                message="Login failed, please check if you have permission"
+            />
+            <MuiGrid item xs={8}>
+                <Error
+                    title="Welcome to AFFiNE"
+                    subTitle="blocks of knowledge to power your team"
+                    action1Text="Login &nbsp; or &nbsp; Register"
+                />
+            </MuiGrid>
+
+            <MuiGrid item xs={4}>
+                {' '}
+                <MuiBox
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        rowGap: '1em',
+                        width: '300px',
+                        margin: '300px  auto 20px auto',
+                    }}
+                    sx={{ mt: 1 }}
+                >
+                    <LogoImg
+                        style={{
+                            width: '100px',
+                        }}
+                    />
+                    {/* {((process.env['NX_LOCAL'] || true) && ( */}
+                    <FileSystem onError={onError} />
+                    {/* )) ||
+                    null}
+                {((!process.env['NX_LOCAL'] || true) && ( */}
+                    <Firebase onError={onError} />
+                    {/* )) ||
+                    null} */}{' '}
+                </MuiBox>
+            </MuiGrid>
+        </MuiGrid>
     );
 }

libs/components/layout/src/header/Title.tsx

@@ -3,12 +3,14 @@ import { useParams } from 'react-router-dom';
 import { Typography, styled } from '@toeverything/components/ui';
 
 import { services } from '@toeverything/datasource/db-service';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
 
 /* card.7: Demand changes, temporarily closed, see https://github.com/toeverything/AFFiNE/issues/522 */
 // import { usePageTree} from '@toeverything/components/layout';
 // import { pickPath } from './utils';
 
 export const CurrentPageTitle = () => {
+    const { user } = useUserAndSpaces();
     const params = useParams();
     const { workspace_id } = params;
     const [pageId, setPageId] = useState<string>('');
@@ -40,11 +42,11 @@ export const CurrentPageTitle = () => {
     }, [pageId, workspace_id]);
 
     useEffect(() => {
-        fetchPageTitle();
-    }, [fetchPageTitle]);
+        if (user) fetchPageTitle();
+    }, [fetchPageTitle, user]);
 
     useEffect(() => {
-        if (!workspace_id || !pageId || pageTitle === undefined)
+        if (!user || !workspace_id || !pageId || pageTitle === undefined)
             return () => {};
 
         let unobserve: () => void;
@@ -63,7 +65,7 @@ export const CurrentPageTitle = () => {
         return () => {
             // unobserve?.();
         };
-    }, [fetchPageTitle, pageId, pageTitle, workspace_id]);
+    }, [fetchPageTitle, pageId, pageTitle, user, workspace_id]);
 
     useEffect(() => {
         document.title = pageTitle || '';