diff --git a/libs/components/account/src/login/firebase.tsx b/libs/components/account/src/login/firebase.tsx index 55453782b..0c295010e 100644 --- a/libs/components/account/src/login/firebase.tsx +++ b/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 = () => ( ); -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 ( - - - - - - - - - - - } - > - Continue with Google - - - - + } + onClick={handleAuth} + > + Continue with Google + ); }; diff --git a/libs/components/account/src/login/fs.tsx b/libs/components/account/src/login/fs.tsx index 07d6465ba..104e13ed6 100644 --- a/libs/components/account/src/login/fs.tsx +++ b/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 ( - - - - - - - - { - 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 }} - > - - - - Sync to Disk - - - - + } + onClick={async () => { + try { + if (apiSupported) { + await requestPermission('AFFiNE'); + onSelected(); + } else { + onSelected(); + } + } catch (e) { + props.onError(); + } + }} + > + {apiSupported ? 'Sync to Disk' : 'Try Live Demo'} + ); }; diff --git a/libs/components/account/src/login/index.tsx b/libs/components/account/src/login/index.tsx index ba7a589c8..e29b84f12 100644 --- a/libs/components/account/src/login/index.tsx +++ b/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 ( - <> - {/* */} - {process.env['NX_LOCAL'] ? : } - + + + + + + + + {' '} + + + {/* {((process.env['NX_LOCAL'] || true) && ( */} + + {/* )) || + null} + {((!process.env['NX_LOCAL'] || true) && ( */} + + {/* )) || + null} */}{' '} + + + ); } diff --git a/libs/components/layout/src/header/Title.tsx b/libs/components/layout/src/header/Title.tsx index 16017e43f..61f2d3a24 100644 --- a/libs/components/layout/src/header/Title.tsx +++ b/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(''); @@ -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 || '';