client: clean code

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<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}

packages/client/src/components/document/delete/index.tsx

@@ -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({
-                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 (
     <Text type="danger" onClick={deleteAction}>

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<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,16 +93,18 @@ export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, author
 
   return (
     <div className={cls(styles.editorWrap, className)} style={style}>
-      <CollaborationEditor
-        ref={$editor}
-        menubar
-        editable={authority && authority.editable}
-        user={currentUser}
-        id={documentId}
-        type="document"
-        onTitleUpdate={triggerChangeDocumentTitle}
-        onAwarenessUpdate={triggerJoinUser}
-      />
+      {mounted && (
+        <CollaborationEditor
+          ref={$editor}
+          menubar
+          editable={authority && authority.editable}
+          user={currentUser}
+          id={documentId}
+          type="document"
+          onTitleUpdate={triggerChangeDocumentTitle}
+          onAwarenessUpdate={triggerJoinUser}
+        />
+      )}
       <DocumentUserSetting
         visible={mentionUsersSettingVisible}
         toggleVisible={toggleMentionUsersSettingVisible}

packages/client/src/components/document/editor/index.tsx

@@ -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]);
 

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<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}

packages/client/src/components/wiki/tocs/index.tsx

@@ -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

packages/client/src/data/document.tsx

@@ -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(

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<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 };
 };
 

packages/client/src/hooks/use-router-query.tsx

@@ -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;
 }