diff --git a/src/components/boris/BorisComments/index.tsx b/src/components/boris/BorisComments/index.tsx index 6b15049a..b78bf835 100644 --- a/src/components/boris/BorisComments/index.tsx +++ b/src/components/boris/BorisComments/index.tsx @@ -3,10 +3,11 @@ import styles from './styles.module.scss'; import { Group } from '~/components/containers/Group'; import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import { NodeNoComments } from '~/components/node/NodeNoComments'; -import { NodeComments } from '~/components/node/NodeComments'; +import { NodeComments } from '~/views/node/NodeComments'; import { Footer } from '~/components/main/Footer'; import { IComment, IFile, INode } from '~/redux/types'; import { IUser } from '~/redux/auth/types'; +import { CommentProvider } from '~/utils/providers/CommentProvider'; interface IProps { node: INode; @@ -37,15 +38,16 @@ const BorisComments: FC = ({ {isLoadingComments ? ( ) : ( - + isLoadingComments={isLoadingComments} + > + + )} diff --git a/src/components/node/NodeBottomBlock/index.tsx b/src/components/node/NodeBottomBlock/index.tsx index 3739d71d..75904e3f 100644 --- a/src/components/node/NodeBottomBlock/index.tsx +++ b/src/components/node/NodeBottomBlock/index.tsx @@ -2,7 +2,6 @@ import React, { FC } from 'react'; import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge'; import { Group } from '~/components/containers/Group'; import { Padder } from '~/components/containers/Padder'; -import { NodeCommentsBlock } from '~/components/node/NodeCommentsBlock'; import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock'; import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks'; @@ -11,14 +10,19 @@ import StickyBox from 'react-sticky-box/dist/esnext'; import styles from './styles.module.scss'; import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock'; import { useNodeContext } from '~/utils/providers/NodeProvider'; +import { useCommentContext } from '~/utils/providers/CommentProvider'; +import { NodeNoComments } from '~/components/node/NodeNoComments'; +import { NodeComments } from '~/views/node/NodeComments'; +import { useUserContext } from '~/utils/providers/UserProvider'; interface IProps { - isUser: boolean; commentsOrder: 'ASC' | 'DESC'; } const NodeBottomBlock: FC = ({ commentsOrder }) => { - const { node, related, isUser, isLoading } = useNodeContext(); + const { is_user: isUser } = useUserContext(); + const { node, related, isLoading } = useNodeContext(); + const { comments, isLoadingComments } = useCommentContext(); const { inline } = useNodeBlocks(node, isLoading); if (node.deleted_at) { @@ -32,7 +36,11 @@ const NodeBottomBlock: FC = ({ commentsOrder }) => { {inline &&
{inline}
} - + {isLoading || isLoadingComments || (!comments.length && !inline) ? ( + + ) : ( + + )} {isUser && !isLoading && }
diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx deleted file mode 100644 index a01b29b7..00000000 --- a/src/components/node/NodeComments/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { FC, memo, useMemo } from 'react'; -import { Comment } from '../../comment/Comment'; - -import styles from './styles.module.scss'; -import { IComment, ICommentGroup, IFile } from '~/redux/types'; -import { IUser } from '~/redux/auth/types'; -import { canEditComment } from '~/utils/node'; -import { INodeState } from '~/redux/node/reducer'; -import { COMMENTS_DISPLAY } from '~/redux/node/constants'; -import { plural } from '~/utils/dom'; -import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments'; - -interface IProps { - comments: IComment[]; - count: INodeState['comment_count']; - user: IUser; - order?: 'ASC' | 'DESC'; - lastSeenCurrent?: string; - onShowImageModal: (images: IFile[], index: number) => void; - onLoadMoreComments: () => void; - onDeleteComment: (id: IComment['id'], isLocked: boolean) => void; -} - -const NodeComments: FC = memo( - ({ - comments, - user, - count = 0, - order = 'DESC', - onLoadMoreComments, - onDeleteComment, - onShowImageModal, - lastSeenCurrent, - }) => { - const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]); - - const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent); - - const more = useMemo( - () => - left > 0 && ( -
- Показать ещё{' '} - {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')} - {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''} -
- ), - [left, onLoadMoreComments] - ); - - return ( -
- {order === 'DESC' && more} - - {groupped.map(group => ( - - ))} - - {order === 'ASC' && more} -
- ); - } -); - -export { NodeComments }; diff --git a/src/components/node/NodeCommentsBlock/index.tsx b/src/components/node/NodeCommentsBlock/index.tsx deleted file mode 100644 index 853a2660..00000000 --- a/src/components/node/NodeCommentsBlock/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { FC } from 'react'; -import { NodeNoComments } from '~/components/node/NodeNoComments'; -import { NodeComments } from '~/components/node/NodeComments'; -import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks'; -import { useCommentContext } from '~/utils/providers/CommentProvider'; - -interface IProps { - order: 'ASC' | 'DESC'; -} - -const NodeCommentsBlock: FC = () => { - const { - node, - user, - comments, - count, - lastSeenCurrent, - isLoadingNode, - isLoadingComments, - onLoadMoreComments, - onDeleteComment, - onShowImageModal, - } = useCommentContext(); - const { inline } = useNodeBlocks(node, isLoadingNode); - - return isLoadingNode || isLoadingComments || (!comments.length && !inline) ? ( - - ) : ( - - ); -}; - -export { NodeCommentsBlock }; diff --git a/src/containers/App.tsx b/src/containers/App.tsx index d0393e26..52db42bc 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -1,29 +1,23 @@ -import React, { FC } from 'react'; -import { connect } from 'react-redux'; +import React, { VFC } from 'react'; import { ConnectedRouter } from 'connected-react-router'; import { history } from '~/redux/store'; import { MainLayout } from '~/containers/main/MainLayout'; import { Sprites } from '~/sprites/Sprites'; import { Modal } from '~/containers/dialogs/Modal'; -import { selectModal } from '~/redux/modal/selectors'; -import { BlurWrapper } from '~/components/containers/BlurWrapper'; import { PageCover } from '~/components/containers/PageCover'; import { BottomContainer } from '~/containers/main/BottomContainer'; import { MainRouter } from '~/containers/main/MainRouter'; import { DragDetectorProvider } from '~/utils/hooks/useDragDetector'; +import { useUser } from '~/utils/hooks/user/userUser'; +import { UserProvider } from '~/utils/providers/UserProvider'; -const mapStateToProps = state => ({ - modal: selectModal(state), -}); -const mapDispatchToProps = {}; +const App: VFC = () => { + const user = useUser(); -type IProps = typeof mapDispatchToProps & ReturnType & {}; - -const Component: FC = ({ modal: { is_shown } }) => { return ( - - + + @@ -32,11 +26,11 @@ const Component: FC = ({ modal: { is_shown } }) => { - - - + + + ); }; -export default connect(mapStateToProps, mapDispatchToProps)(Component); +export { App }; diff --git a/src/index.tsx b/src/index.tsx index b98c8553..69782e29 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { configureStore } from '~/redux/store'; -import App from '~/containers/App'; +import { App } from '~/containers/App'; import '~/styles/main.scss'; const { store, persistor } = configureStore(); diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx index 849ac5cc..4e667e95 100644 --- a/src/layouts/NodeLayout/index.tsx +++ b/src/layouts/NodeLayout/index.tsx @@ -19,7 +19,7 @@ import { useNodeContext } from '~/utils/providers/NodeProvider'; type IProps = {}; const NodeLayout: FC = () => { - const { node, isUser, isLoading } = useNodeContext(); + const { node, isLoading } = useNodeContext(); useNodeCoverImage(node); @@ -37,7 +37,7 @@ const NodeLayout: FC = () => { - +