fixed node related

src/containers/node/NodeLayout/index.tsx

@@ -1,36 +1,28 @@
-import React, {
-  FC,
-  createElement,
-  useEffect,
-  useCallback,
-  useState,
-  useMemo,
-  memo
-} from "react";
-import { RouteComponentProps } from "react-router";
-import { connect } from "react-redux";
-import { canEditNode, canLikeNode, canStarNode } from "~/utils/node";
-import { selectNode } from "~/redux/node/selectors";
-import { Card } from "~/components/containers/Card";
+import React, { FC, createElement, useEffect, useCallback, useState, useMemo, memo } from 'react';
+import { RouteComponentProps } from 'react-router';
+import { connect } from 'react-redux';
+import { canEditNode, canLikeNode, canStarNode } from '~/utils/node';
+import { selectNode } from '~/redux/node/selectors';
+import { Card } from '~/components/containers/Card';
 
-import { NodePanel } from "~/components/node/NodePanel";
-import { Group } from "~/components/containers/Group";
-import { Padder } from "~/components/containers/Padder";
-import { NodeNoComments } from "~/components/node/NodeNoComments";
-import { NodeRelated } from "~/components/node/NodeRelated";
-import * as styles from "./styles.scss";
-import { NodeComments } from "~/components/node/NodeComments";
-import { NodeTags } from "~/components/node/NodeTags";
-import { NODE_COMPONENTS, NODE_INLINES } from "~/redux/node/constants";
-import * as NODE_ACTIONS from "~/redux/node/actions";
-import { CommentForm } from "~/components/node/CommentForm";
-import { selectUser } from "~/redux/auth/selectors";
-import pick from "ramda/es/pick";
-import { NodeRelatedPlaceholder } from "~/components/node/NodeRelated/placeholder";
+import { NodePanel } from '~/components/node/NodePanel';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { NodeRelated } from '~/components/node/NodeRelated';
+import * as styles from './styles.scss';
+import { NodeComments } from '~/components/node/NodeComments';
+import { NodeTags } from '~/components/node/NodeTags';
+import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants';
+import * as NODE_ACTIONS from '~/redux/node/actions';
+import { CommentForm } from '~/components/node/CommentForm';
+import { selectUser } from '~/redux/auth/selectors';
+import pick from 'ramda/es/pick';
+import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
-  user: selectUser(state)
+  user: selectUser(state),
 });
 
 const mapDispatchToProps = {
@@ -39,7 +31,7 @@ const mapDispatchToProps = {
   nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage,
   nodeEdit: NODE_ACTIONS.nodeEdit,
   nodeLike: NODE_ACTIONS.nodeLike,
-  nodeStar: NODE_ACTIONS.nodeStar
+  nodeStar: NODE_ACTIONS.nodeStar,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
@@ -49,15 +41,9 @@ type IProps = ReturnType<typeof mapStateToProps> &
 const NodeLayoutUnconnected: FC<IProps> = memo(
   ({
     match: {
-      params: { id }
-    },
-    node: {
-      is_loading,
-      is_loading_comments,
-      comments = [],
-      current: node,
-      related
+      params: { id },
     },
+    node: { is_loading, is_loading_comments, comments = [], current: node, related },
     user,
     user: { is_user },
     nodeGotoNode,
@@ -65,7 +51,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     nodeEdit,
     nodeLike,
     nodeStar,
-    nodeSetCoverImage
+    nodeSetCoverImage,
   }) => {
     // const is_loading = true;
 
@@ -104,11 +90,10 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
     return (
       <Card className={styles.node} seamless>
-        {block &&
-          createElement(block, { node, is_loading, updateLayout, layout })}
+        {block && createElement(block, { node, is_loading, updateLayout, layout })}
 
         <NodePanel
-          node={pick(["title", "user", "is_liked", "is_heroic"], node)}
+          node={pick(['title', 'user', 'is_liked', 'is_heroic'], node)}
           layout={layout}
           can_edit={can_edit}
           can_like={can_like}
@@ -129,17 +114,13 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                       node,
                       is_loading,
                       updateLayout,
-                      layout
+                      layout,
                     })}
                   </div>
                 )}
 
-                {is_loading ||
-                is_loading_comments ||
-                (!comments.length && !inline_block) ? (
-                  <NodeNoComments
-                    is_loading={is_loading_comments || is_loading}
-                  />
+                {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
+                  <NodeNoComments is_loading={is_loading_comments || is_loading} />
                 ) : (
                   <NodeComments comments={comments} />
                 )}
@@ -150,11 +131,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
               <div className={styles.panel}>
                 <Group style={{ flex: 1, minWidth: 0 }}>
                   {!is_loading && (
-                    <NodeTags
-                      is_editable={is_user}
-                      tags={node.tags}
-                      onChange={onTagsChange}
-                    />
+                    <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
                   )}
 
                   {is_loading && <NodeRelatedPlaceholder />}
@@ -162,18 +139,13 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                   {!is_loading &&
                     related &&
                     related.albums &&
-                    Object.keys(related.albums).map(album => (
-                      <NodeRelated
-                        title={album}
-                        items={related.albums[album]}
-                        key={album}
-                      />
+                    Object.keys(related.albums)
+                      .filter(album => related.albums[album].length > 0)
+                      .map(album => (
+                        <NodeRelated title={album} items={related.albums[album]} key={album} />
                       ))}
 
-                  {!is_loading &&
-                    related &&
-                    related.similar &&
-                    related.similar.length > 0 && (
+                  {!is_loading && related && related.similar && related.similar.length > 0 && (
                     <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
                   )}
                 </Group>