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
|
import React, {useEffect, useState} from 'react';
import {StyleSheet} from 'react-native';
import {useSelector} from 'react-redux';
import {MomentPostContent, MomentPostHeader} from '.';
import {deleteMomentTag, loadMomentTags} from '../../services';
import {RootState} from '../../store/rootReducer';
import {MomentPostType, MomentTagType, ScreenType} from '../../types';
import {normalize, SCREEN_HEIGHT} from '../../utils';
interface MomentPostProps {
moment: MomentPostType;
userXId: string | undefined;
screenType: ScreenType;
}
const MomentPost: React.FC<MomentPostProps> = ({
moment,
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(moment.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 (
<>
<MomentPostHeader
userXId={userXId}
screenType={screenType}
username={isOwnProfile ? loggedInUsername : username}
momentId={moment.moment_id}
style={styles.postHeader}
momentTagId={momentTagId}
removeTag={removeTag}
/>
<MomentPostContent
style={styles.postContent}
moment={moment}
screenType={screenType}
momentTags={tags}
/>
</>
);
};
const styles = StyleSheet.create({
postHeader: {},
postContent: {
minHeight: SCREEN_HEIGHT * 0.8,
paddingBottom: normalize(20),
},
});
export default MomentPost;
|
