-
Notifications
You must be signed in to change notification settings - Fork 355
/
HistoryComment.tsx
125 lines (120 loc) · 3.87 KB
/
HistoryComment.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
116
117
118
119
120
121
122
123
124
125
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import InReplyTo from "coral-stream/tabs/Comments/Comment/InReplyTo";
import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
import styles from "./HistoryComment.css";
export interface HistoryCommentProps {
id: string;
body: string | null;
createdAt: string;
replyCount: number | null;
reactionCount: number | null;
reactionSettings: {
label: string;
icon: string;
};
parentAuthorName?: string | null;
story: {
metadata: {
title: string | null;
} | null;
};
conversationURL: string;
onGotoConversation: (e: React.MouseEvent) => void;
}
const HistoryComment: FunctionComponent<HistoryCommentProps> = (props) => {
return (
<HorizontalGutter
className={cn(styles.root, CLASSES.myComment.$root)}
data-testid={`historyComment-${props.id}`}
>
<div className={CLASSES.myComment.commentOn}>
<Localized id="profile-historyComment-comment-on">
<span className={styles.commentOn}>Comment on:</span>
</Localized>
<div className={cn(styles.storyTitle, CLASSES.myComment.story)}>
{props.story.metadata ? props.story.metadata.title : "N/A"}
</div>
</div>
<div>
<Timestamp className={CLASSES.myComment.timestamp}>
{props.createdAt}
</Timestamp>
{props.parentAuthorName && (
<div className={styles.subBar}>
<InReplyTo username={props.parentAuthorName} />
</div>
)}
<div className={styles.content}>
{props.body && (
<HTMLContent className={CLASSES.myComment.content}>
{props.body}
</HTMLContent>
)}
</div>
</div>
<Flex
direction="row"
alignItems="center"
itemGutter="double"
className={styles.footer}
>
{!!props.reactionCount && (
<div className={cn(styles.reactions, CLASSES.myComment.reactions)}>
<Icon className={styles.icon}>{props.reactionSettings.icon}</Icon>
<span>
{props.reactionSettings.label} {props.reactionCount}
</span>
</div>
)}
{!!props.replyCount && (
<div className={cn(styles.replies, CLASSES.myComment.replies)}>
<Icon className={styles.icon}>reply</Icon>
<Localized
id="profile-historyComment-replies"
$replyCount={props.replyCount}
>
<span>{"Replies {$replyCount}"}</span>
</Localized>
</div>
)}
<Button
anchor
target="_parent"
href={props.conversationURL}
onClick={props.onGotoConversation}
className={cn(
styles.viewConversation,
CLASSES.myComment.viewConversationButton
)}
variant="textUnderlined"
uppercase={false}
color="regular"
size="regular"
classes={{
variantTextUnderlined: styles.variantTextUnderlined,
colorRegular: styles.colorRegular,
mouseHover: styles.mouseHover,
active: styles.active,
disabled: styles.disabled,
sizeRegular: styles.sizeRegular,
}}
>
<Flex justifyContent="center">
<Icon className={styles.viewConversationIcon} size="sm">
open_in_new
</Icon>
<Localized id="profile-historyComment-viewConversation">
View Conversation
</Localized>
</Flex>
</Button>
</Flex>
</HorizontalGutter>
);
};
export default HistoryComment;