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
|
import React from 'react';
import {Text, View} from 'react-native-animatable';
import {ProfilePreview} from '../profile';
import {CommentType, ScreenType} from '../../types';
import {StyleSheet} from 'react-native';
import {getTimePosted} from '../../utils';
import ClockIcon from '../../assets/icons/clock-icon-01.svg';
/**
* Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
*/
interface CommentTileProps {
comment_object: CommentType;
screenType: ScreenType;
}
const CommentTile: React.FC<CommentTileProps> = ({
comment_object,
screenType,
}) => {
const timePosted = getTimePosted(comment_object.date_time);
return (
<View style={styles.container}>
<ProfilePreview
profilePreview={{
id: comment_object.commenter.id,
username: comment_object.commenter.username,
first_name: comment_object.commenter.first_name,
last_name: comment_object.commenter.last_name,
}}
previewType={'Comment'}
screenType={screenType}
/>
<View style={styles.body}>
<Text style={styles.comment}>{comment_object.comment}</Text>
<View style={styles.clockIconAndTime}>
<ClockIcon style={styles.clockIcon} />
<Text style={styles.date_time}>{' ' + timePosted}</Text>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginLeft: '3%',
marginRight: '3%',
borderBottomWidth: 1,
borderColor: 'lightgray',
marginBottom: '3%',
},
body: {
marginLeft: 56,
},
comment: {
position: 'relative',
top: -5,
marginBottom: '2%',
},
date_time: {
color: 'gray',
},
clockIcon: {
width: 12,
height: 12,
alignSelf: 'center',
},
clockIconAndTime: {
flexDirection: 'row',
marginBottom: '3%',
},
});
export default CommentTile;
|
