-
Notifications
You must be signed in to change notification settings - Fork 7
/
CommentView.jsx
151 lines (130 loc) · 4.28 KB
/
CommentView.jsx
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import React, { useContext, useState } from 'react';
import TimeAgo from 'javascript-time-ago';
import en from 'javascript-time-ago/locale/en';
import cs from 'javascript-time-ago/locale/cs';
import { ConfigurationContext } from '../../contexts/ConfigurationContext';
import LinkIcon from '../LinkIcon';
import IconOverlay from '../IconOverlay';
import PropTypes from 'prop-types';
import RecycleBin from "../../styles/icons/RecycleBin";
import {motion} from 'framer-motion/dist/framer-motion';
import Constants from "../../constants/Constants";
const UNKNOWN_AUTHOR = 'Unknown author';
const CommentView = (props) => {
const { options } = useContext(ConfigurationContext);
const [showIRI, setShowIRI] = useState(false);
const [showRecycleBin, setShowRecycleBin] = useState(false);
TimeAgo.addLocale(cs);
TimeAgo.addLocale(en);
TimeAgo.setDefaultLocale(Constants.LANG.en.locale);
const time = new TimeAgo(options.intl.locale);
const getAuthorLabel = () => {
if (options && options.users) {
const users = options.users;
const currentUser = users.find((c) => c.id === options.currentUser);
if (props.author) {
if (currentUser.label) {
return currentUser.label;
} else {
return getAuthorIRIAbbreviation();
}
}
}
return UNKNOWN_AUTHOR;
};
const getAuthorIRIAbbreviation = () => {
const fullAuthor = props.author['@id'];
return fullAuthor.replace(/.*[#\/]/, '... ');
};
const getAuthorIRI = () => {
if (props.author) {
return Object.values(props.author).toString();
}
return UNKNOWN_AUTHOR;
};
const renderAuthor = () => {
return (
<React.Fragment>
{showIRI ? (
<React.Fragment>
{getAuthorLabel()}
<LinkIcon iconClassContainer="emphasise-on-relevant-icon" url={getAuthorIRI()} />
</React.Fragment>
) : (
getAuthorLabel()
)}
</React.Fragment>
);
};
const renderTimeAgo = () => {
const getTimeAgoFormat = () => {
return time.format(parseInt(props.timestamp));
};
const getUTCFormat = () => {
let dateOptions = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
};
const date = new Date(parseInt(props.timestamp));
return new Intl.DateTimeFormat(options.intl.locale, dateOptions).format(date);
};
return (
<IconOverlay id="exact-time-overlay" tooltipContent={getUTCFormat()}>
{getTimeAgoFormat()}
</IconOverlay>
);
};
const handleCommentAuthorMouseEnter = () => {
setShowIRI(!showIRI);
};
const handleCommentBinMouseEnter = () => {
setShowRecycleBin(true)
}
const handleCommentBinMouseLeave = () => {
setShowRecycleBin(false)
}
const handleDeleteCommentClick = () => {
props.onDeleteQuestionComment(props.index);
props.onDeleteViewComment();
}
return (
<div className="comment-content" onMouseEnter={handleCommentBinMouseEnter} onMouseLeave={handleCommentBinMouseLeave}>
<div className="row">
<div
className="col-auto comment-author"
onMouseEnter={handleCommentAuthorMouseEnter}
onMouseLeave={handleCommentAuthorMouseEnter}
>
{renderAuthor()}
</div>
<div className="col-auto text-muted comment-timestamp">{renderTimeAgo()}</div>
{showRecycleBin ?
<motion.div
className="comment-delete emphasise-on-relevant-icon"
whileHover={{scale: 1.2}}
whileTap={{scale: 0.9}}
onClick={handleDeleteCommentClick}>
<RecycleBin/>
</motion.div>
: null }
</div>
<div className="row">
<div className="col comment-value">{props.commentValue}</div>
</div>
</div>
);
};
CommentView.propTypes = {
author: PropTypes.object.isRequired,
timestamp: PropTypes.string.isRequired,
commentValue: PropTypes.string.isRequired,
onDeleteQuestionComment: PropTypes.func.isRequired,
onDeleteViewComment: PropTypes.func,
index: PropTypes.number.isRequired
};
export default CommentView;