mirror of https://github.com/fantasticit/think.git
client: clean code
This commit is contained in:
parent
f17d6bfbe0
commit
c654b7fc82
|
@ -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}
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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]);
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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 };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
Loading…
Reference in New Issue