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
|
import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {useSelector} from 'react-redux';
import {MomentPostContent, MomentPostHeader} from '.';
import {deleteMomentTag, loadMomentTags} from '../../services';
import {RootState} from '../../store/rootReducer';
import {MomentTagType, MomentType, ScreenType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
interface MomentPostProps {
item: MomentType;
userXId: string | undefined;
screenType: ScreenType;
}
const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9;
const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => {
const {userId: loggedInUserId, username: loggedInUsername} = useSelector(
(state: RootState) => state.user.user,
);
const {
user: {username},
} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.user,
);
const [tags, setTags] = useState<MomentTagType[]>([]);
const [momentTagId, setMomentTagId] = useState<string>('');
const isOwnProfile = username === loggedInUsername;
const loadTags = async () => {
const response = await loadMomentTags(item.moment_id);
setTags(response ? response : []);
};
/*
* Load tags on initial render to pass tags data to moment header and content
*/
useEffect(() => {
loadTags();
}, []);
/*
* Check if loggedInUser has been tagged in the picture and set the id
*/
useEffect(() => {
const getMomentTagId = () => {
const ownTag: MomentTagType[] = tags.filter(
(tag) => tag.user.id === loggedInUserId,
);
if (ownTag?.length > 0) {
setMomentTagId(ownTag[0].id);
} else {
setMomentTagId('');
}
};
getMomentTagId();
}, [tags]);
/*
* Remove tag and update the current tags
*/
const removeTag = async () => {
const success = await deleteMomentTag(momentTagId);
if (success) {
const filteredTags = tags.filter((tag) => tag.user.id !== loggedInUserId);
setTags(filteredTags);
}
};
return (
<View style={styles.postContainer}>
<MomentPostHeader
userXId={userXId}
screenType={screenType}
username={isOwnProfile ? loggedInUsername : username}
momentId={item.moment_id}
style={styles.postHeader}
momentTagId={momentTagId}
removeTag={removeTag}
/>
<MomentPostContent
style={styles.postContent}
momentId={item.moment_id}
caption={item.caption}
pathHash={item.moment_url}
dateTime={item.date_created}
screenType={screenType}
momentTags={tags}
/>
</View>
);
};
const styles = StyleSheet.create({
contentContainer: {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
paddingTop: StatusBarHeight,
flex: 1,
paddingBottom: 0,
},
content: {
flex: 9,
},
header: {
flex: 1,
},
postContainer: {
height: ITEM_HEIGHT,
width: SCREEN_WIDTH,
flex: 1,
},
postHeader: {
flex: 1,
},
postContent: {flex: 9},
});
export default MomentPost;
|
