/
feedItem.tsx
115 lines (103 loc) · 3.83 KB
/
feedItem.tsx
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
import * as React from "react";
import * as moment from "moment";
import { Link } from "react-router-dom";
import Type from "../../articleShow/components/type";
import { IArticleRecord } from "../../../model/article";
import formatNumber from "../../../helpers/formatNumber";
import UserProfileIcon from "../../common/userProfileIcon";
import { trackAction } from "../../../helpers/handleGA";
const shave = require("shave").default;
const styles = require("./feedItem.scss");
export interface IFeedItemProps {
article: IArticleRecord;
}
const ACTIVATE_POINT_THRESHOLD = 4;
class FeedItem extends React.PureComponent<IFeedItemProps, {}> {
private abstractElement: HTMLDivElement;
private shaveTexts() {
if (!!this.abstractElement) {
shave(this.abstractElement, 88);
}
}
private getReviewPoint() {
const { article } = this.props;
const totalPoint = article.point ? formatNumber(article.point.total, 2) : 0;
if (article.reviewSize >= ACTIVATE_POINT_THRESHOLD) {
return <div className={`${styles.reviewPoint} ${styles.activeReviewPoint}`}>{totalPoint}</div>;
} else {
return <div className={styles.reviewPoint}>{totalPoint}</div>;
}
}
private getReviewPointText() {
const { article } = this.props;
if (article.reviewSize >= ACTIVATE_POINT_THRESHOLD) {
return <div className={`${styles.reviewPointText} ${styles.activeReviewPointText}`}>pointed</div>;
} else {
return <div className={styles.reviewPointText}>pointed</div>;
}
}
public componentDidMount() {
this.shaveTexts();
}
public render() {
const { article } = this.props;
return (
<div className={styles.feedItemWrapper}>
<div className={styles.contentSection}>
<div className={styles.leftBox}>
<div className={styles.tagWrapper}>
<Type tag={article.type} />
</div>
<div className={styles.contentWrapper}>
<Link
to={`/articles/${article.id}`}
onClick={() => trackAction(`/articles/${article.id}`, "FeedItemTitle")}
className={styles.title}
>
{article.title}
</Link>
<Link
to={`/articles/${article.id}`}
onClick={() => trackAction(`/articles/${article.id}`, "FeedItemSummary")}
>
<div ref={ele => (this.abstractElement = ele)} className={styles.abstractSummary}>
{article.summary}
</div>
</Link>
</div>
</div>
<div className={styles.rightBox}>
<div className={styles.rightBoxContent}>
{this.getReviewPoint()}
{this.getReviewPointText()}
</div>
</div>
</div>
<div className={styles.informationBox}>
<div className={styles.informationLeftBox}>
<Link
to={`/users/${article.createdBy.id}`}
onClick={() => trackAction(`/users/${article.createdBy.id}`, "FeedItemInformationLeftBox")}
>
<div className={styles.profileImageWrapper}>
<UserProfileIcon
profileImage={article.createdBy.profileImage}
userId={article.createdBy.id}
type="small"
/>
</div>
<div className={styles.authorInformation}>
<div className={styles.authorName}>{article.createdBy.name}</div>
<div className={styles.authorInstitution}>{article.createdBy.affiliation}</div>
</div>
</Link>
</div>
<div className={styles.informationRightBox}>
<div className={styles.createdAt}>{moment(article.createdAt).format("ll")}</div>
</div>
</div>
</div>
);
}
}
export default FeedItem;