added user context

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<IProps> = ({
         {isLoadingComments ? (
           <NodeNoComments is_loading count={7} />
         ) : (
-          <NodeComments
+          <CommentProvider
             comments={comments}
             count={commentCount}
-            user={user}
-            order="ASC"
             onDeleteComment={onDeleteComment}
             onLoadMoreComments={onLoadMoreComments}
             onShowImageModal={onShowImageModal}
-          />
+            isLoadingComments={isLoadingComments}
+          >
+            <NodeComments order="ASC" />
+          </CommentProvider>
         )}
       </Group>
 

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<IProps> = ({ 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<IProps> = ({ commentsOrder }) => {
           <Group className={styles.comments}>
             {inline && <div className={styles.inline}>{inline}</div>}
 
-            <NodeCommentsBlock order={commentsOrder} />
+            {isLoading || isLoadingComments || (!comments.length && !inline) ? (
+              <NodeNoComments is_loading={isLoadingComments || isLoading} />
+            ) : (
+              <NodeComments order={commentsOrder} />
+            )}
 
             {isUser && !isLoading && <NodeCommentForm nodeId={node.id} />}
           </Group>

src/components/node/NodeComments/index.tsx

@@ -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<IProps> = 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 && (
-          <div className={styles.more} onClick={onLoadMoreComments}>
-            Показать ещё{' '}
-            {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
-            {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
-          </div>
-        ),
-      [left, onLoadMoreComments]
-    );
-
-    return (
-      <div className={styles.wrap}>
-        {order === 'DESC' && more}
-
-        {groupped.map(group => (
-          <Comment
-            key={group.ids.join()}
-            group={group}
-            canEdit={canEditComment(group, user)}
-            onDelete={onDeleteComment}
-            onShowImageModal={onShowImageModal}
-            isSame={group.user.id === user.id}
-          />
-        ))}
-
-        {order === 'ASC' && more}
-      </div>
-    );
-  }
-);
-
-export { NodeComments };

src/components/node/NodeCommentsBlock/index.tsx

@@ -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<IProps> = () => {
-  const {
-    node,
-    user,
-    comments,
-    count,
-    lastSeenCurrent,
-    isLoadingNode,
-    isLoadingComments,
-    onLoadMoreComments,
-    onDeleteComment,
-    onShowImageModal,
-  } = useCommentContext();
-  const { inline } = useNodeBlocks(node, isLoadingNode);
-
-  return isLoadingNode || isLoadingComments || (!comments.length && !inline) ? (
-    <NodeNoComments is_loading={isLoadingComments || isLoadingNode} />
-  ) : (
-    <NodeComments
-      count={count}
-      comments={comments}
-      user={user}
-      order="DESC"
-      lastSeenCurrent={lastSeenCurrent}
-      onShowImageModal={onShowImageModal}
-      onLoadMoreComments={onLoadMoreComments}
-      onDeleteComment={onDeleteComment}
-    />
-  );
-};
-
-export { NodeCommentsBlock };

src/containers/App.tsx

@@ -1,29 +1,23 @@
-import React, { FC } from 'react';
+import React, { VFC } from 'react';
-import { connect } from 'react-redux';
 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 => ({
+const App: VFC = () => {
-  modal: selectModal(state),
+  const user = useUser();
-});
-const mapDispatchToProps = {};
 
-type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
-
-const Component: FC<IProps> = ({ modal: { is_shown } }) => {
   return (
     <ConnectedRouter history={history}>
-      <DragDetectorProvider>
+      <UserProvider user={user}>
-        <BlurWrapper is_blurred={is_shown}>
+        <DragDetectorProvider>
           <PageCover />
 
           <MainLayout>
@@ -32,11 +26,11 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
 
             <MainRouter />
           </MainLayout>
-        </BlurWrapper>
+          <BottomContainer />
-        <BottomContainer />
+        </DragDetectorProvider>
-      </DragDetectorProvider>
+      </UserProvider>
     </ConnectedRouter>
   );
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Component);
+export { App };

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();

src/layouts/NodeLayout/index.tsx

@@ -19,7 +19,7 @@ import { useNodeContext } from '~/utils/providers/NodeProvider';
 type IProps = {};
 
 const NodeLayout: FC<IProps> = () => {
-  const { node, isUser, isLoading } = useNodeContext();
+  const { node, isLoading } = useNodeContext();
 
   useNodeCoverImage(node);
 
@@ -37,7 +37,7 @@ const NodeLayout: FC<IProps> = () => {
             <NodePanel node={node} isLoading={isLoading} />
           </div>
 
-          <NodeBottomBlock isUser={isUser} commentsOrder="DESC" />
+          <NodeBottomBlock commentsOrder="DESC" />
 
           <Footer />
         </Card>

src/pages/node/[id].tsx

@@ -40,14 +40,11 @@ const NodePage: FC<Props> = ({
   useScrollToTop([id, isLoadingComments]);
 
   return (
-    <NodeProvider node={node} related={related} isUser={user.is_user} isLoading={isLoading}>
+    <NodeProvider node={node} related={related} isLoading={isLoading}>
       <CommentProvider
-        node={node}
-        user={user}
         comments={comments}
         count={commentsCount}
         lastSeenCurrent={lastSeenCurrent}
-        isLoadingNode={isLoading}
         isLoadingComments={isLoadingComments}
         onShowImageModal={onShowImageModal}
         onLoadMoreComments={onLoadMoreComments}

src/utils/providers/CommentProvider.tsx

@@ -1,16 +1,11 @@
-import { IComment, IFile, INode } from '~/redux/types';
+import { IComment, IFile } from '~/redux/types';
-import { IUser } from '~/redux/auth/types';
 import React, { createContext, FC, useContext } from 'react';
-import { EMPTY_USER } from '~/redux/auth/constants';
-import { EMPTY_NODE } from '~/redux/node/constants';
 
 export interface CommentProviderProps {
-  node: INode;
+  // user: IUser;
-  user: IUser;
   comments: IComment[];
   count: number;
   lastSeenCurrent?: string;
-  isLoadingNode: boolean;
   isLoadingComments: boolean;
   onShowImageModal: (images: IFile[], index: number) => void;
   onLoadMoreComments: () => void;
@@ -18,12 +13,10 @@ export interface CommentProviderProps {
 }
 
 const CommentContext = createContext<CommentProviderProps>({
-  node: EMPTY_NODE,
+  // user: EMPTY_USER,
-  user: EMPTY_USER,
   comments: [],
   count: 0,
   lastSeenCurrent: undefined,
-  isLoadingNode: false,
   isLoadingComments: false,
   onShowImageModal: () => {},
   onLoadMoreComments: () => {},

src/utils/providers/NodeProvider.tsx

@@ -6,8 +6,8 @@ import React, { createContext, FC, useContext } from 'react';
 export interface NodeContextProps {
   node: INode;
   related: INodeRelated;
-  isUser: boolean;
   isLoading: boolean;
+  // isUser: boolean;
   // user: IUser;
   // isLoadingComments: boolean;
   // lastSeenCurrent?: string;
@@ -24,9 +24,10 @@ export interface NodeContextProps {
 export const NodeContext = createContext<NodeContextProps>({
   node: EMPTY_NODE,
   related: { albums: {}, similar: [] },
-  isUser: false,
   isLoading: false,
 
+  // UserContext
+  // isUser: false,
   // CommentContext
   // user: EMPTY_USER,
   // lastSeenCurrent: undefined,

src/utils/providers/UserProvider.tsx

@@ -0,0 +1,11 @@
+import React, { createContext, FC, useContext } from 'react';
+import { IUser } from '~/redux/auth/types';
+import { EMPTY_USER } from '~/redux/auth/constants';
+
+const UserContext = createContext<IUser>(EMPTY_USER);
+
+export const UserProvider: FC<{ user: IUser }> = ({ children, user }) => (
+  <UserContext.Provider value={user}>{children}</UserContext.Provider>
+);
+
+export const useUserContext = () => useContext(UserContext);

src/views/node/NodeComments/index.tsx

@@ -0,0 +1,64 @@
+import React, { FC, memo, useMemo } from 'react';
+
+import styles from './styles.module.scss';
+import { ICommentGroup } from '~/redux/types';
+import { canEditComment } from '~/utils/node';
+import { COMMENTS_DISPLAY } from '~/redux/node/constants';
+import { plural } from '~/utils/dom';
+import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
+import { useCommentContext } from '~/utils/providers/CommentProvider';
+import { Comment } from '~/components/comment/Comment';
+import { useUserContext } from '~/utils/providers/UserProvider';
+
+interface IProps {
+  order: 'ASC' | 'DESC';
+}
+
+const NodeComments: FC<IProps> = memo(({ order }) => {
+  const user = useUserContext();
+  const {
+    comments,
+    count,
+    lastSeenCurrent,
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+  } = useCommentContext();
+
+  const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
+
+  const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent);
+
+  const more = useMemo(
+    () =>
+      left > 0 && (
+        <div className={styles.more} onClick={onLoadMoreComments}>
+          Показать ещё{' '}
+          {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
+          {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
+        </div>
+      ),
+    [left, onLoadMoreComments]
+  );
+
+  return (
+    <div className={styles.wrap}>
+      {order === 'DESC' && more}
+
+      {groupped.map(group => (
+        <Comment
+          key={group.ids.join()}
+          group={group}
+          canEdit={canEditComment(group, user)}
+          onDelete={onDeleteComment}
+          onShowImageModal={onShowImageModal}
+          isSame={group.user.id === user.id}
+        />
+      ))}
+
+      {order === 'ASC' && more}
+    </div>
+  );
+});
+
+export { NodeComments };

src/views/node/NodeComments/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import "../../../styles/variables";
 
 .wrap {
   & > div {