client: clean code

This commit is contained in:
fantasticit 2022-05-24 20:06:01 +08:00
parent f17d6bfbe0
commit c654b7fc82
9 changed files with 67 additions and 43 deletions

View File

@ -1,6 +1,6 @@
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { DocumentCreator as DocumenCreatorForm } from 'components/document/create'; import { DocumentCreator as DocumenCreatorForm } from 'components/document/create';
import { useQuery } from 'hooks/use-query'; import { useRouterQuery } from 'hooks/use-router-query';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React from 'react'; import React from 'react';
@ -9,7 +9,7 @@ interface IProps {
} }
export const DocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }) => { export const DocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }) => {
const { wikiId, docId } = useQuery<{ wikiId?: string; docId?: string }>(); const { wikiId, documentId } = useRouterQuery<{ wikiId?: string; documentId?: string }>();
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
return ( return (
@ -22,7 +22,7 @@ export const DocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }
{wikiId && ( {wikiId && (
<DocumenCreatorForm <DocumenCreatorForm
wikiId={wikiId} wikiId={wikiId}
parentDocumentId={docId} parentDocumentId={documentId}
visible={visible} visible={visible}
toggleVisible={toggleVisible} toggleVisible={toggleVisible}
onCreate={onCreateDocument} onCreate={onCreateDocument}

View File

@ -1,7 +1,7 @@
import { IconDelete } from '@douyinfe/semi-icons'; import { IconDelete } from '@douyinfe/semi-icons';
import { Modal, Space, Typography } from '@douyinfe/semi-ui'; import { Modal, Space, Typography } from '@douyinfe/semi-ui';
import { useDeleteDocument } from 'data/document'; import { useDeleteDocument } from 'data/document';
import { triggerRefreshTocs } from 'event'; import { useRouterQuery } from 'hooks/use-router-query';
import Router from 'next/router'; import Router from 'next/router';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
@ -14,6 +14,8 @@ interface IProps {
const { Text } = Typography; const { Text } = Typography;
export const DocumentDeletor: React.FC<IProps> = ({ wikiId, documentId, onDelete }) => { export const DocumentDeletor: React.FC<IProps> = ({ wikiId, documentId, onDelete }) => {
const { wikiId: currentWikiId, documentId: currentDocumentId } =
useRouterQuery<{ wikiId?: string; documentId?: string }>();
const { deleteDocument: api, loading } = useDeleteDocument(documentId); const { deleteDocument: api, loading } = useDeleteDocument(documentId);
const deleteAction = useCallback(() => { const deleteAction = useCallback(() => {
@ -22,18 +24,22 @@ export const DocumentDeletor: React.FC<IProps> = ({ wikiId, documentId, onDelete
content: <Text></Text>, content: <Text></Text>,
onOk: () => { onOk: () => {
api().then(() => { api().then(() => {
onDelete const navigate = () => {
? onDelete() if (wikiId !== currentWikiId || documentId !== currentDocumentId) {
: Router.push({ return;
}
Router.push({
pathname: `/wiki/${wikiId}`, pathname: `/wiki/${wikiId}`,
}); });
triggerRefreshTocs(); };
onDelete ? onDelete() : navigate();
}); });
}, },
okButtonProps: { loading, type: 'danger' }, okButtonProps: { loading, type: 'danger' },
style: { maxWidth: '96vw' }, style: { maxWidth: '96vw' },
}); });
}, [wikiId, api, loading, onDelete]); }, [wikiId, documentId, api, loading, onDelete, currentWikiId, currentDocumentId]);
return ( return (
<Text type="danger" onClick={deleteAction}> <Text type="danger" onClick={deleteAction}>

View File

@ -2,6 +2,7 @@ import { IAuthority, ILoginUser } from '@think/domains';
import cls from 'classnames'; import cls from 'classnames';
import { useDoumentMembers } from 'data/document'; import { useDoumentMembers } from 'data/document';
import { event, triggerChangeDocumentTitle, triggerJoinUser, USE_DOCUMENT_VERSION } from 'event'; import { event, triggerChangeDocumentTitle, triggerJoinUser, USE_DOCUMENT_VERSION } from 'event';
import { useMount } from 'hooks/use-mount';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import Router from 'next/router'; import Router from 'next/router';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
@ -22,6 +23,7 @@ interface IProps {
export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, authority, className, style }) => { export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, authority, className, style }) => {
const $hasShowUserSettingModal = useRef(false); const $hasShowUserSettingModal = useRef(false);
const $editor = useRef<ICollaborationRefProps>(); const $editor = useRef<ICollaborationRefProps>();
const mounted = useMount();
const { users, addUser, updateUser } = useDoumentMembers(documentId); const { users, addUser, updateUser } = useDoumentMembers(documentId);
const [mentionUsersSettingVisible, toggleMentionUsersSettingVisible] = useToggle(false); const [mentionUsersSettingVisible, toggleMentionUsersSettingVisible] = useToggle(false);
const [mentionUsers, setMentionUsers] = useState([]); const [mentionUsers, setMentionUsers] = useState([]);
@ -91,6 +93,7 @@ export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, author
return ( return (
<div className={cls(styles.editorWrap, className)} style={style}> <div className={cls(styles.editorWrap, className)} style={style}>
{mounted && (
<CollaborationEditor <CollaborationEditor
ref={$editor} ref={$editor}
menubar menubar
@ -101,6 +104,7 @@ export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, author
onTitleUpdate={triggerChangeDocumentTitle} onTitleUpdate={triggerChangeDocumentTitle}
onAwarenessUpdate={triggerJoinUser} onAwarenessUpdate={triggerJoinUser}
/> />
)}
<DocumentUserSetting <DocumentUserSetting
visible={mentionUsersSettingVisible} visible={mentionUsersSettingVisible}
toggleVisible={toggleMentionUsersSettingVisible} toggleVisible={toggleMentionUsersSettingVisible}

View File

@ -13,6 +13,7 @@ import { User } from 'components/user';
import { useDocumentDetail } from 'data/document'; import { useDocumentDetail } from 'data/document';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { CHANGE_DOCUMENT_TITLE, event, triggerUseDocumentVersion } from 'event'; import { CHANGE_DOCUMENT_TITLE, event, triggerUseDocumentVersion } from 'event';
import { triggerRefreshTocs } from 'event';
import { useDocumentStyle } from 'hooks/use-document-style'; import { useDocumentStyle } from 'hooks/use-document-style';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useWindowSize } from 'hooks/use-window-size'; import { useWindowSize } from 'hooks/use-window-size';
@ -44,6 +45,8 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
const goback = useCallback(() => { const goback = useCallback(() => {
Router.push({ Router.push({
pathname: `/wiki/${document.wikiId}/document/${documentId}`, pathname: `/wiki/${document.wikiId}/document/${documentId}`,
}).then(() => {
triggerRefreshTocs();
}); });
}, [document, documentId]); }, [document, documentId]);

View File

@ -3,7 +3,7 @@ import { Button, Dropdown } from '@douyinfe/semi-ui';
import { DocumentCreator } from 'components/document/create'; import { DocumentCreator } from 'components/document/create';
import { WikiCreator } from 'components/wiki/create'; import { WikiCreator } from 'components/wiki/create';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useQuery } from 'hooks/use-query'; import { useRouterQuery } from 'hooks/use-router-query';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React from 'react'; import React from 'react';
@ -13,7 +13,7 @@ interface IProps {
export const WikiOrDocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }) => { export const WikiOrDocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }) => {
const { isMobile } = IsOnMobile.useHook(); const { isMobile } = IsOnMobile.useHook();
const { wikiId, docId } = useQuery<{ wikiId?: string; docId?: string }>(); const { wikiId, documentId } = useRouterQuery<{ wikiId?: string; documentId?: string }>();
const [dropdownVisible, toggleDropdownVisible] = useToggle(false); const [dropdownVisible, toggleDropdownVisible] = useToggle(false);
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
const [createDocumentModalVisible, toggleCreateDocumentModalVisible] = useToggle(false); const [createDocumentModalVisible, toggleCreateDocumentModalVisible] = useToggle(false);
@ -44,7 +44,7 @@ export const WikiOrDocumentCreator: React.FC<IProps> = ({ onCreateDocument, chil
{wikiId && ( {wikiId && (
<DocumentCreator <DocumentCreator
wikiId={wikiId} wikiId={wikiId}
parentDocumentId={docId} parentDocumentId={documentId}
visible={createDocumentModalVisible} visible={createDocumentModalVisible}
toggleVisible={toggleCreateDocumentModalVisible} toggleVisible={toggleCreateDocumentModalVisible}
onCreate={onCreateDocument} onCreate={onCreateDocument}

View File

@ -5,7 +5,7 @@ import { DataRender } from 'components/data-render';
import { IconDocument, IconGlobe, IconOverview, IconSetting } from 'components/icons'; import { IconDocument, IconGlobe, IconOverview, IconSetting } from 'components/icons';
import { findParents } from 'components/wiki/tocs/utils'; import { findParents } from 'components/wiki/tocs/utils';
import { useWikiDetail, useWikiTocs } from 'data/wiki'; import { useWikiDetail, useWikiTocs } from 'data/wiki';
import { event, REFRESH_TOCS, triggerCreateDocument } from 'event'; import { triggerCreateDocument } from 'event';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -18,7 +18,6 @@ interface IProps {
documentId?: string; documentId?: string;
docAsLink?: string; docAsLink?: string;
getDocLink?: (arg: string) => string; getDocLink?: (arg: string) => string;
// pageTitle: string;
} }
const { Text } = Typography; const { Text } = Typography;
@ -41,15 +40,6 @@ export const WikiTocs: React.FC<IProps> = ({
setParentIds(parentIds); setParentIds(parentIds);
}, [tocs, documentId]); }, [tocs, documentId]);
useEffect(() => {
const handler = () => refresh();
event.on(REFRESH_TOCS, handler);
return () => {
event.off(REFRESH_TOCS, handler);
};
}, [refresh]);
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
<DataRender <DataRender

View File

@ -1,4 +1,5 @@
import { DocumentApiDefinition, IAuthority, IDocument, IUser, IWiki } from '@think/domains'; import { DocumentApiDefinition, IAuthority, IDocument, IUser, IWiki } from '@think/domains';
import { triggerRefreshTocs } from 'event';
import { useAsyncLoading } from 'hooks/use-async-loading'; import { useAsyncLoading } from 'hooks/use-async-loading';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
@ -28,7 +29,8 @@ export const getRecentVisitedDocuments = (cookie = null): Promise<IDocumentWithV
export const useRecentDocuments = () => { export const useRecentDocuments = () => {
const { data, error, isLoading, refetch } = useQuery( const { data, error, isLoading, refetch } = useQuery(
DocumentApiDefinition.recent.client(), DocumentApiDefinition.recent.client(),
getRecentVisitedDocuments getRecentVisitedDocuments,
{ staleTime: 0 }
); );
return { data, error, loading: isLoading, refresh: refetch }; return { data, error, loading: isLoading, refresh: refetch };
}; };
@ -134,8 +136,10 @@ export const getDocumentDetail = (documentId, cookie = null): Promise<IDocumentW
* @returns * @returns
*/ */
export const useDocumentDetail = (documentId) => { export const useDocumentDetail = (documentId) => {
const { data, error, isLoading, refetch } = useQuery(DocumentApiDefinition.getDetailById.client(documentId), (url) => const { data, error, isLoading, refetch } = useQuery(
getDocumentDetail(documentId) DocumentApiDefinition.getDetailById.client(documentId),
() => getDocumentDetail(documentId),
{ staleTime: 3000 }
); );
/** /**
@ -212,6 +216,9 @@ export const useDeleteDocument = (documentId) => {
return HttpClient.request({ return HttpClient.request({
method: DocumentApiDefinition.deleteById.method, method: DocumentApiDefinition.deleteById.method,
url: DocumentApiDefinition.deleteById.client(documentId), url: DocumentApiDefinition.deleteById.client(documentId),
}).then((res) => {
triggerRefreshTocs();
return res as unknown as IDocument;
}); });
}); });
return { deleteDocument, loading }; return { deleteDocument, loading };
@ -227,6 +234,9 @@ export const useCreateDocument = () => {
method: DocumentApiDefinition.create.method, method: DocumentApiDefinition.create.method,
url: DocumentApiDefinition.create.client(), url: DocumentApiDefinition.create.client(),
data, data,
}).then((res) => {
triggerRefreshTocs();
return res as unknown as IDocument;
}); });
}); });
return { create, loading }; return { create, loading };
@ -260,7 +270,7 @@ export const usePublicDocumentDetail = (documentId) => {
const { data, error, isLoading, refetch } = useQuery( const { data, error, isLoading, refetch } = useQuery(
DocumentApiDefinition.getPublicDetailById.client(documentId), DocumentApiDefinition.getPublicDetailById.client(documentId),
() => getPublicDocumentDetail(documentId, { sharePassword }), () => getPublicDocumentDetail(documentId, { sharePassword }),
{ retry: 0, refetchOnWindowFocus: true, refetchOnReconnect: false } { retry: 0, refetchOnWindowFocus: true, refetchOnReconnect: false, staleTime: 3000 }
); );
const query = useCallback( const query = useCallback(

View File

@ -1,5 +1,6 @@
import { IDocument, IUser, IWiki, IWikiUser, WikiApiDefinition } from '@think/domains'; import { IDocument, IUser, IWiki, IWikiUser, WikiApiDefinition } from '@think/domains';
import { useCallback, useState } from 'react'; import { event, REFRESH_TOCS } from 'event';
import { useCallback, useEffect, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { HttpClient } from 'services/http-client'; import { HttpClient } from 'services/http-client';
@ -259,8 +260,10 @@ export const getWikiTocs = (wikiId, cookie = null): Promise<Array<IDocument & {
* @returns * @returns
*/ */
export const useWikiTocs = (wikiId) => { export const useWikiTocs = (wikiId) => {
const { data, error, refetch } = useQuery(WikiApiDefinition.getTocsById.client(wikiId), () => const { data, error, refetch } = useQuery(
wikiId ? getWikiTocs(wikiId) : null WikiApiDefinition.getTocsById.client(wikiId),
() => (wikiId ? getWikiTocs(wikiId) : null),
{ staleTime: 3000 }
); );
const loading = !data && !error; const loading = !data && !error;
@ -277,6 +280,14 @@ export const useWikiTocs = (wikiId) => {
[refetch, wikiId] [refetch, wikiId]
); );
useEffect(() => {
event.on(REFRESH_TOCS, refetch);
return () => {
event.off(REFRESH_TOCS, refetch);
};
}, [refetch]);
return { data, loading, error, refresh: refetch, update }; return { data, loading, error, refresh: refetch, update };
}; };

View File

@ -1,6 +1,6 @@
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
export function useQuery<T>() { export function useRouterQuery<T>() {
const router = useRouter(); const router = useRouter();
return router.query as unknown as T; return router.query as unknown as T;
} }