muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed node related

Browse source
This commit is contained in:
Fedor Katurov 2019-11-26 14:38:40 +07:00
parent 63ae5039fe
commit 5a3b122d97
1 changed files with 39 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/containers/node/NodeLayout/index.tsx
View file

@ -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,20 +139,15 @@ 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 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
{!is_loading && related && related.similar && related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</div>
</Group>