client: add comment in share

This commit is contained in:
fantasticit 2022-06-03 15:40:26 +08:00
parent 778217022a
commit a7fb655f4c
6 changed files with 51 additions and 27 deletions

View File

@ -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<IProps> = ({ documentId }) => {
const { user } = useUser();
const { user, logout } = useUser();
const {
data: commentsData,
loading,
@ -37,18 +36,21 @@ export const CommentEditor: React.FC<IProps> = ({ 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<IProps> = ({ documentId }) => {
editor.commands.clearContent();
handleClose();
});
};
}, [addComment, editComment, editor, handleClose, replyComment, updateComment]);
const handleReplyComment = (comment) => {
const handleReplyComment = useCallback(
(comment) => {
setReplyComment(comment);
setEditComment(null);
openEditor();
};
},
[openEditor]
);
const handleEditComment = (comment) => {
const handleEditComment = useCallback(
(comment) => {
setReplyComment(null);
setEditComment(comment);
openEditor();
};
},
[openEditor]
);
return (
<div ref={$container}>

View File

@ -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<IProps> = ({ documentId, hideLogo =
user={null}
id={documentId}
type="document"
hideComment
renderInEditorPortal={renderAuthor}
/>}
</>

View File

@ -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 <Button icon={<IconSpin />} theme="borderless" type="tertiary" />;
if (error || !user) {
return (
<Button theme="solid" type="primary" size="small" onClick={gotoLogin}>
<Button theme="solid" type="primary" size="small" onClick={toLogin}>
</Button>
);

View File

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

View File

@ -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<ILoginUser>('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,

View File

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