moved related out of node context

src/components/boris/BorisComments/index.tsx

@@ -44,7 +44,7 @@ const BorisComments: FC<IProps> = ({
             onDeleteComment={onDeleteComment}
             onLoadMoreComments={onLoadMoreComments}
             onShowImageModal={onShowImageModal}
-            isLoadingComments={isLoadingComments}
+            isLoading={isLoadingComments}
           >
             <NodeComments order="ASC" />
           </CommentProvider>

src/pages/node/[id].tsx

@@ -11,6 +11,7 @@ import { NodeProvider } from '~/utils/providers/NodeProvider';
 import { CommentProvider } from '~/utils/providers/CommentProvider';
 import { TagProvider } from '~/utils/providers/TagProvider';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
+import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
@@ -40,28 +41,30 @@ const NodePage: FC<Props> = ({
   useScrollToTop([id, isLoadingComments]);
 
   return (
-    <NodeProvider node={node} related={related} isLoading={isLoading}>
+    <NodeProvider node={node} isLoading={isLoading}>
-      <CommentProvider
+      <NodeRelatedProvider related={related} isLoading={isLoading}>
-        comments={comments}
+        <CommentProvider
-        count={commentsCount}
+          comments={comments}
-        lastSeenCurrent={lastSeenCurrent}
+          count={commentsCount}
-        isLoadingComments={isLoadingComments}
+          lastSeenCurrent={lastSeenCurrent}
-        onShowImageModal={onShowImageModal}
+          isLoading={isLoadingComments}
-        onLoadMoreComments={onLoadMoreComments}
+          onShowImageModal={onShowImageModal}
-        onDeleteComment={onDeleteComment}
+          onLoadMoreComments={onLoadMoreComments}
-      >
+          onDeleteComment={onDeleteComment}
-        <TagProvider
-          tags={node.tags}
-          canAppend={user.is_user}
-          canDelete={canEdit}
-          isLoading={isLoading}
-          onChange={onTagsChange}
-          onTagClick={onTagClick}
-          onTagDelete={onTagDelete}
         >
-          <NodeLayout />
+          <TagProvider
-        </TagProvider>
+            tags={node.tags}
-      </CommentProvider>
+            canAppend={user.is_user}
+            canDelete={canEdit}
+            isLoading={isLoading}
+            onChange={onTagsChange}
+            onTagClick={onTagClick}
+            onTagDelete={onTagDelete}
+          >
+            <NodeLayout />
+          </TagProvider>
+        </CommentProvider>
+      </NodeRelatedProvider>
     </NodeProvider>
   );
 };

src/utils/providers/CommentProvider.tsx

@@ -6,7 +6,7 @@ export interface CommentProviderProps {
   comments: IComment[];
   count: number;
   lastSeenCurrent?: string;
-  isLoadingComments: boolean;
+  isLoading: boolean;
   onShowImageModal: (images: IFile[], index: number) => void;
   onLoadMoreComments: () => void;
   onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
@@ -17,7 +17,7 @@ const CommentContext = createContext<CommentProviderProps>({
   comments: [],
   count: 0,
   lastSeenCurrent: undefined,
-  isLoadingComments: false,
+  isLoading: false,
   onShowImageModal: () => {},
   onLoadMoreComments: () => {},
   onDeleteComment: () => {},

src/utils/providers/NodeProvider.tsx

@@ -1,47 +1,15 @@
 import { INode } from '~/redux/types';
-import { INodeRelated } from '~/redux/node/types';
 import { EMPTY_NODE } from '~/redux/node/constants';
 import React, { createContext, FC, useContext } from 'react';
 
 export interface NodeContextProps {
   node: INode;
-  related: INodeRelated;
   isLoading: boolean;
-  // isUser: boolean;
-  // user: IUser;
-  // isLoadingComments: boolean;
-  // lastSeenCurrent?: string;
-  // commentsCount: number;
-  // comments: IComment[];
-  // onShowImageModal: (images: IFile[], index: number) => void;
-  // onLoadMoreComments: () => void;
-  // onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
-  // onTagsChange: (tags: string[]) => void;
-  // onTagClick: (tag: Partial<ITag>) => void;
-  // onTagDelete: (id: ITag['ID']) => void;
 }
 
 export const NodeContext = createContext<NodeContextProps>({
   node: EMPTY_NODE,
-  related: { albums: {}, similar: [] },
   isLoading: false,
-
-  // UserContext
-  // isUser: false,
-  // CommentContext
-  // user: EMPTY_USER,
-  // lastSeenCurrent: undefined,
-  // comments: [],
-  // commentsCount: 0,
-  // onLoadMoreComments: () => {},
-  // onShowImageModal: () => {},
-  // onDeleteComment: () => {},
-  // isLoadingComments: false,
-
-  // TagContext
-  // onTagsChange: () => {},
-  // onTagClick: () => {},
-  // onTagDelete: () => {},
 });
 
 export const NodeProvider: FC<NodeContextProps> = ({ children, ...contextValue }) => {

src/utils/providers/NodeRelatedProvider.tsx

@@ -0,0 +1,18 @@
+import { INodeRelated } from '~/redux/node/types';
+import React, { createContext, FC, useContext } from 'react';
+
+interface NodeRelatedProviderProps {
+  related: INodeRelated;
+  isLoading: boolean;
+}
+
+const NodeRelatedContext = createContext<NodeRelatedProviderProps>({
+  related: { albums: {}, similar: [] },
+  isLoading: false,
+});
+
+export const NodeRelatedProvider: FC<NodeRelatedProviderProps> = ({ children, ...rest }) => (
+  <NodeRelatedContext.Provider value={rest}>{children}</NodeRelatedContext.Provider>
+);
+
+export const useNodeRelatedContext = () => useContext<NodeRelatedProviderProps>(NodeRelatedContext);

src/views/node/NodeBottomBlock/index.tsx

@@ -14,6 +14,7 @@ import { useCommentContext } from '~/utils/providers/CommentProvider';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeComments } from '~/views/node/NodeComments';
 import { useUserContext } from '~/utils/providers/UserProvider';
+import { useNodeRelatedContext } from '~/utils/providers/NodeRelatedProvider';
 
 interface IProps {
   commentsOrder: 'ASC' | 'DESC';
@@ -21,8 +22,9 @@ interface IProps {
 
 const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
   const { is_user: isUser } = useUserContext();
-  const { node, related, isLoading } = useNodeContext();
+  const { node, isLoading } = useNodeContext();
-  const { comments, isLoadingComments } = useCommentContext();
+  const { comments, isLoading: isLoadingComments } = useCommentContext();
+  const { related, isLoading: isLoadingRelated } = useNodeRelatedContext();
   const { inline } = useNodeBlocks(node, isLoading);
 
   if (node.deleted_at) {
@@ -56,7 +58,7 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
                   <NodeTagsBlock />
                 </div>
                 <div className={styles.left_item}>
-                  <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />
+                  <NodeRelatedBlock isLoading={isLoadingRelated} node={node} related={related} />
                 </div>
               </div>
             </StickyBox>