-
Notifications
You must be signed in to change notification settings - Fork 61
/
ContentRow.js
127 lines (120 loc) · 3.38 KB
/
ContentRow.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Tag, Intent } from '@blueprintjs/core';
import { Icon } from 'components';
import { generateAuthorString } from 'components/PubPreview/pubPreviewUtils';
import { getDashUrl } from 'utils/dashboard';
require('./contentRow.scss');
const propTypes = {
content: PropTypes.object.isRequired,
parentSlug: PropTypes.string,
};
const defaultProps = {
parentSlug: undefined,
};
const ContentRow = (props) => {
const { content, parentSlug } = props;
const isCollection = content.pubs;
const [collectionIsOpen, setCollectionIsOpen] = useState(false);
const slug = content.slug || content.title.toLowerCase().replace(/ /gi, '-');
const collectionReviews = isCollection
? content.pubs.reduce((prev, curr) => {
return prev + curr.reviews.length;
}, 0)
: content.reviews.length;
const collectionConversations = isCollection
? content.pubs.reduce((prev, curr) => {
return prev + curr.discussions.length;
}, 0)
: content.discussions.length;
const collectionMerges = isCollection
? content.pubs.reduce((prev, curr) => {
const merges = curr.merges || [];
return prev + merges.length;
}, 0)
: content.merges.length;
return (
<React.Fragment>
<a
className="content-row-component"
href={getDashUrl({
collectionSlug: isCollection ? slug : parentSlug,
pubSlug: isCollection ? undefined : slug,
})}
>
<div className="top">
<div
className={classNames({
arrow: true,
active: isCollection && !!content.pubs.length,
opened: collectionIsOpen,
})}
role="button"
// tabIndex needs to be removed when not visible
tabIndex={0}
onClick={(evt) => {
if (isCollection) {
evt.preventDefault();
setCollectionIsOpen(!collectionIsOpen);
}
}}
>
{isCollection && !!content.pubs.length && <Icon icon="caret-right" />}
</div>
<div className="icon">
<Icon icon={isCollection ? 'collection' : 'pubDoc'} iconSize={14} />
</div>
<div className="title">
<div className="header">{content.title}</div>
<div className="authors">{generateAuthorString(content)}</div>
</div>
{isCollection && (
<div className="pubs">
<Icon icon="pubDoc" iconSize={14} />
{content.pubs.length}
</div>
)}
<div className="conversations">
<Icon icon="chat2" iconSize={14} />
{collectionConversations}
</div>
<div className="merges">
<Icon icon="git-pull" iconSize={14} />
{collectionMerges}
{Math.random() < 0.3 && (
<Tag minimal intent={Intent.SUCCESS}>
{collectionReviews}
</Tag>
)}
</div>
<div className="reviews">
<Icon icon="social-media" iconSize={14} />
{collectionReviews}
{Math.random() < 0.3 && (
<Tag minimal intent={Intent.SUCCESS}>
{collectionReviews}
</Tag>
)}
</div>
</div>
</a>
{isCollection && collectionIsOpen && (
<div className="child-rows">
{content.pubs.map((pub) => {
return (
<ContentRow
key={`${content.id}-${pub.id}`}
content={pub}
parentSlug={slug}
/>
);
})}
</div>
)}
</React.Fragment>
);
};
ContentRow.propTypes = propTypes;
ContentRow.defaultProps = defaultProps;
export default ContentRow;