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
|
import React, {useState} from 'react';
import {StyleSheet, Text, View, ViewProps} from 'react-native';
import {MomentMoreInfoDrawer} from '../profile';
import {loadUserMoments} from '../../store/actions';
import {useDispatch, useSelector} from 'react-redux';
import {ScreenType} from '../../types';
import Avatar from '../profile/Avatar';
import {useNavigation} from '@react-navigation/native';
import {RootState} from '../../store/rootReducer';
interface MomentPostHeaderProps extends ViewProps {
userXId?: string;
screenType: ScreenType;
username: string;
momentId: string;
}
const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
userXId,
screenType,
username,
momentId,
style,
}) => {
const [drawerVisible, setDrawerVisible] = useState(false);
const dispatch = useDispatch();
const navigation = useNavigation();
const {userId: loggedInUserId, username: loggedInUserName} = useSelector(
(state: RootState) => state.user.user,
);
const isOwnProfile = loggedInUserName === username;
return (
<View style={[styles.container, style]}>
<View style={styles.header}>
<Avatar
style={styles.avatar}
userXId={userXId}
screenType={screenType}
/>
<Text style={styles.headerText}>{username}</Text>
</View>
<MomentMoreInfoDrawer
isOpen={drawerVisible}
setIsOpen={setDrawerVisible}
momentId={momentId}
isOwnProfile={isOwnProfile}
dismissScreenAndUpdate={() => {
dispatch(loadUserMoments(loggedInUserId));
navigation.pop();
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
flexDirection: 'row',
alignItems: 'center',
marginVertical: '2%',
},
header: {
alignItems: 'center',
flexDirection: 'row',
flex: 1,
},
avatar: {
flex: 0.2,
aspectRatio: 1,
borderRadius: 999999,
marginLeft: '3%',
},
headerText: {
fontSize: 15,
fontWeight: 'bold',
color: 'white',
paddingHorizontal: '3%',
flex: 1,
},
});
export default MomentPostHeader;
|
