From c654b7fc8281e82ff8218f54783021a66cbb3d8f Mon Sep 17 00:00:00 2001 From: fantasticit Date: Tue, 24 May 2022 20:06:01 +0800 Subject: [PATCH] client: clean code --- .../src/components/document-creator/index.tsx | 6 ++--- .../src/components/document/delete/index.tsx | 22 ++++++++++------- .../src/components/document/editor/editor.tsx | 24 +++++++++++-------- .../src/components/document/editor/index.tsx | 3 +++ .../wiki-or-document-creator/index.tsx | 6 ++--- .../client/src/components/wiki/tocs/index.tsx | 12 +--------- packages/client/src/data/document.tsx | 18 ++++++++++---- packages/client/src/data/wiki.tsx | 17 ++++++++++--- .../{use-query.tsx => use-router-query.tsx} | 2 +- 9 files changed, 67 insertions(+), 43 deletions(-) rename packages/client/src/hooks/{use-query.tsx => use-router-query.tsx} (74%) diff --git a/packages/client/src/components/document-creator/index.tsx b/packages/client/src/components/document-creator/index.tsx index 03b2bc81..07933c05 100644 --- a/packages/client/src/components/document-creator/index.tsx +++ b/packages/client/src/components/document-creator/index.tsx @@ -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 = ({ 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 = ({ onCreateDocument, children } {wikiId && ( = ({ 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 = ({ wikiId, documentId, onDelete content: 文档删除后不可恢复！, onOk: () => { api().then(() => { - onDelete - ? onDelete() - : Router.push({ - pathname: `/wiki/${wikiId}`, - }); - triggerRefreshTocs(); + const navigate = () => { + if (wikiId !== currentWikiId || documentId !== currentDocumentId) { + return; + } + Router.push({ + pathname: `/wiki/${wikiId}`, + }); + }; + + onDelete ? onDelete() : navigate(); }); }, okButtonProps: { loading, type: 'danger' }, style: { maxWidth: '96vw' }, }); - }, [wikiId, api, loading, onDelete]); + }, [wikiId, documentId, api, loading, onDelete, currentWikiId, currentDocumentId]); return ( diff --git a/packages/client/src/components/document/editor/editor.tsx b/packages/client/src/components/document/editor/editor.tsx index 1abae3c4..05ff0a12 100644 --- a/packages/client/src/components/document/editor/editor.tsx +++ b/packages/client/src/components/document/editor/editor.tsx @@ -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 = ({ user: currentUser, documentId, authority, className, style }) => { const $hasShowUserSettingModal = useRef(false); const $editor = useRef(); + const mounted = useMount(); const { users, addUser, updateUser } = useDoumentMembers(documentId); const [mentionUsersSettingVisible, toggleMentionUsersSettingVisible] = useToggle(false); const [mentionUsers, setMentionUsers] = useState([]); @@ -91,16 +93,18 @@ export const Editor: React.FC = ({ user: currentUser, documentId, author return (
- + {mounted && ( + + )} = ({ documentId }) => { const goback = useCallback(() => { Router.push({ pathname: `/wiki/${document.wikiId}/document/${documentId}`, + }).then(() => { + triggerRefreshTocs(); }); }, [document, documentId]); diff --git a/packages/client/src/components/wiki-or-document-creator/index.tsx b/packages/client/src/components/wiki-or-document-creator/index.tsx index e26caf3c..6bebfd4b 100644 --- a/packages/client/src/components/wiki-or-document-creator/index.tsx +++ b/packages/client/src/components/wiki-or-document-creator/index.tsx @@ -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 = ({ 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 = ({ onCreateDocument, chil {wikiId && ( string; - // pageTitle: string; } const { Text } = Typography; @@ -41,15 +40,6 @@ export const WikiTocs: React.FC = ({ setParentIds(parentIds); }, [tocs, documentId]); - useEffect(() => { - const handler = () => refresh(); - event.on(REFRESH_TOCS, handler); - - return () => { - event.off(REFRESH_TOCS, handler); - }; - }, [refresh]); - return (
{ 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 { - 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( diff --git a/packages/client/src/data/wiki.tsx b/packages/client/src/data/wiki.tsx index d40f8bad..cfd64153 100644 --- a/packages/client/src/data/wiki.tsx +++ b/packages/client/src/data/wiki.tsx @@ -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 { - 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 }; }; diff --git a/packages/client/src/hooks/use-query.tsx b/packages/client/src/hooks/use-router-query.tsx similarity index 74% rename from packages/client/src/hooks/use-query.tsx rename to packages/client/src/hooks/use-router-query.tsx index b343c0a3..59065bfb 100644 --- a/packages/client/src/hooks/use-query.tsx +++ b/packages/client/src/hooks/use-router-query.tsx @@ -1,6 +1,6 @@ import { useRouter } from 'next/router'; -export function useQuery() { +export function useRouterQuery() { const router = useRouter(); return router.query as unknown as T; }