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