diff --git a/packages/client/src/components/document/comments/index.tsx b/packages/client/src/components/document/comments/index.tsx index e152d9c4..fd57fa67 100644 --- a/packages/client/src/components/document/comments/index.tsx +++ b/packages/client/src/components/document/comments/index.tsx @@ -3,11 +3,10 @@ import { DataRender } from 'components/data-render'; import { useComments } from 'data/comment'; import { useUser } from 'data/user'; import { useToggle } from 'hooks/use-toggle'; -import React, { useRef, useState } from 'react'; +import React, { useCallback, useRef, useState } from 'react'; import { CommentKit, CommentMenuBar, EditorContent, useEditor } from 'tiptap/editor'; import { Comments } from './comments'; -import { CommentItemPlaceholder } from './comments/Item'; import styles from './index.module.scss'; interface IProps { @@ -17,7 +16,7 @@ interface IProps { const { Text, Paragraph } = Typography; export const CommentEditor: React.FC = ({ documentId }) => { - const { user } = useUser(); + const { user, logout } = useUser(); const { data: commentsData, loading, @@ -37,18 +36,21 @@ export const CommentEditor: React.FC = ({ documentId }) => { extensions: CommentKit, }); - const openEditor = () => { + const openEditor = useCallback(() => { + if (!user) { + return logout(); + } toggleIsEdit(true); editor.chain().focus(); - }; + }, [editor, logout, toggleIsEdit, user]); - const handleClose = () => { + const handleClose = useCallback(() => { setReplyComment(null); setEditComment(null); toggleIsEdit(false); - }; + }, [toggleIsEdit]); - const save = () => { + const save = useCallback(() => { const html = editor.getHTML(); if (editComment) { @@ -71,19 +73,25 @@ export const CommentEditor: React.FC = ({ documentId }) => { editor.commands.clearContent(); handleClose(); }); - }; + }, [addComment, editComment, editor, handleClose, replyComment, updateComment]); - const handleReplyComment = (comment) => { - setReplyComment(comment); - setEditComment(null); - openEditor(); - }; + const handleReplyComment = useCallback( + (comment) => { + setReplyComment(comment); + setEditComment(null); + openEditor(); + }, + [openEditor] + ); - const handleEditComment = (comment) => { - setReplyComment(null); - setEditComment(comment); - openEditor(); - }; + const handleEditComment = useCallback( + (comment) => { + setReplyComment(null); + setEditComment(comment); + openEditor(); + }, + [openEditor] + ); return (
diff --git a/packages/client/src/components/document/reader/public/index.tsx b/packages/client/src/components/document/reader/public/index.tsx index 6b4c40a7..1514d04b 100644 --- a/packages/client/src/components/document/reader/public/index.tsx +++ b/packages/client/src/components/document/reader/public/index.tsx @@ -10,6 +10,7 @@ import { } from '@douyinfe/semi-ui'; import { FormApi } from '@douyinfe/semi-ui/lib/es/form'; import { DataRender } from 'components/data-render'; +import { CommentEditor } from 'components/document/comments'; import { DocumentStyle } from 'components/document/style'; import { LogoImage, LogoText } from 'components/logo'; import { Seo } from 'components/seo'; @@ -118,7 +119,6 @@ export const DocumentPublicReader: React.FC = ({ documentId, hideLogo = user={null} id={documentId} type="document" - hideComment renderInEditorPortal={renderAuthor} />} diff --git a/packages/client/src/components/user/index.tsx b/packages/client/src/components/user/index.tsx index e008f432..d6bb585b 100644 --- a/packages/client/src/components/user/index.tsx +++ b/packages/client/src/components/user/index.tsx @@ -9,14 +9,14 @@ import { UserSetting } from './setting'; const { Text } = Typography; export const User: React.FC = () => { - const { user, loading, error, gotoLogin, logout } = useUser(); + const { user, loading, error, toLogin, logout } = useUser(); const [visible, toggleVisible] = useToggle(false); if (loading) return ); diff --git a/packages/client/src/data/comment.ts b/packages/client/src/data/comment.ts index 771421b7..e6852fc4 100644 --- a/packages/client/src/data/comment.ts +++ b/packages/client/src/data/comment.ts @@ -34,7 +34,7 @@ export const useComments = (documentId) => { const { data, error, isLoading, refetch } = useQuery( [CommentApiDefinition.documents.client(documentId), page], () => getComments(documentId, page), - { keepPreviousData: true } + { keepPreviousData: true, refetchOnMount: true, refetchOnWindowFocus: true } ); const addComment = useCallback( diff --git a/packages/client/src/data/user.tsx b/packages/client/src/data/user.tsx index 3d12f747..8722ed47 100644 --- a/packages/client/src/data/user.tsx +++ b/packages/client/src/data/user.tsx @@ -5,12 +5,26 @@ import { useCallback, useEffect } from 'react'; import { useQuery } from 'react-query'; import { HttpClient } from 'services/http-client'; +/** + * 直接去登录页 + */ +export const toLogin = () => { + const currentPath = Router.asPath; + const isInLogin = currentPath.startsWith('login'); + if (!isInLogin) { + Router.push(`/login?redirect=${currentPath}`); + } +}; + export const useUser = () => { const router = useRouter(); const { data, error, refetch } = useQuery('user', () => { return getStorage('user'); }); + /** + * 清除用户信息后跳到登录页 + */ const logout = useCallback(() => { window.localStorage.removeItem('user'); window.localStorage.removeItem('token'); @@ -19,7 +33,9 @@ export const useUser = () => { method: UserApiDefinition.logout.method, url: UserApiDefinition.logout.client(), }).then(() => { - Router.replace('/login'); + const isInShare = Router.asPath.startsWith('/share'); + if (isInShare) return; + toLogin(); }); }, [refetch]); @@ -56,7 +72,7 @@ export const useUser = () => { user: data, loading: false, error: data ? null : error, - gotoLogin: logout, + toLogin, login, logout, updateUser, diff --git a/packages/client/src/services/http-client.tsx b/packages/client/src/services/http-client.tsx index 94e62540..ca1cff96 100644 --- a/packages/client/src/services/http-client.tsx +++ b/packages/client/src/services/http-client.tsx @@ -1,6 +1,6 @@ import { Toast } from '@douyinfe/semi-ui'; import axios, { Axios, AxiosRequestConfig, AxiosResponse } from 'axios'; -import Router from 'next/router'; +import { toLogin } from 'data/user'; type WithCookieAxiosRequestConfig = AxiosRequestConfig & { cookie?: string }; @@ -58,7 +58,7 @@ HttpClient.interceptors.response.use( break; case 401: if (isBrowser) { - Router.replace(`/login?redirect=${window.location.pathname}`); + toLogin(); } break; case 429: