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 { 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 React from 'react';
@ -9,7 +9,7 @@ interface IProps {
}
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);
return (
@ -22,7 +22,7 @@ export const DocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }
{wikiId && (
<DocumenCreatorForm
wikiId={wikiId}
parentDocumentId={docId}
parentDocumentId={documentId}
visible={visible}
toggleVisible={toggleVisible}
onCreate={onCreateDocument}

View File

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

View File

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

View File

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

View File

@ -3,7 +3,7 @@ import { Button, Dropdown } from '@douyinfe/semi-ui';
import { DocumentCreator } from 'components/document/create';
import { WikiCreator } from 'components/wiki/create';
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 React from 'react';
@ -13,7 +13,7 @@ interface IProps {
export const WikiOrDocumentCreator: React.FC<IProps> = ({ onCreateDocument, children }) => {
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 [visible, toggleVisible] = useToggle(false);
const [createDocumentModalVisible, toggleCreateDocumentModalVisible] = useToggle(false);
@ -44,7 +44,7 @@ export const WikiOrDocumentCreator: React.FC<IProps> = ({ onCreateDocument, chil
{wikiId && (
<DocumentCreator
wikiId={wikiId}
parentDocumentId={docId}
parentDocumentId={documentId}
visible={createDocumentModalVisible}
toggleVisible={toggleCreateDocumentModalVisible}
onCreate={onCreateDocument}

View File

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

View File

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

View File

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

View File

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