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
|
import React from 'react';
import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
import ToggleButton from './ToggleButton';
import {RootState} from '../../store/rootReducer';
import {useSelector} from 'react-redux';
import {ScreenType} from '../../types';
import {NO_PROFILE} from '../../store/initialStates';
interface ProfileBodyProps {
onLayout: (event: LayoutChangeEvent) => void;
isFollowed: boolean;
isBlocked: boolean;
isOwnProfile: boolean;
handleFollowUnfollow: Function;
handleBlockUnblock: Function;
userXId: string;
screenType: ScreenType;
}
const ProfileBody: React.FC<ProfileBodyProps> = ({
onLayout,
isFollowed,
isBlocked,
isOwnProfile,
handleFollowUnfollow,
handleBlockUnblock,
userXId,
screenType,
}) => {
const {
profile = NO_PROFILE,
user: {username},
} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
: useSelector((state: RootState) => state.user);
const {biography, website} = profile;
return (
<View onLayout={onLayout} style={styles.container}>
<Text style={styles.username}>{`@${username}`}</Text>
<Text style={styles.biography}>{`${biography}`}</Text>
<Text
style={styles.website}
onPress={() => {
Linking.openURL(
website.startsWith('http') ? website : 'http://' + website,
);
}}>{`${website}`}</Text>
{userXId && !isOwnProfile ? (
<View style={styles.toggleButtonContainer}>
{!isBlocked && (
<ToggleButton
toggleState={isFollowed}
handleToggle={handleFollowUnfollow}
buttonType={TOGGLE_BUTTON_TYPE.FOLLOW_UNFOLLOW}
/>
)}
<ToggleButton
toggleState={isBlocked}
handleToggle={handleBlockUnblock}
buttonType={TOGGLE_BUTTON_TYPE.BLOCK_UNBLOCK}
/>
</View>
) : (
<></>
)}
</View>
);
};
const styles = StyleSheet.create({
toggleButtonContainer: {
flexDirection: 'row',
flex: 1,
},
container: {
paddingVertical: 5,
paddingHorizontal: 20,
backgroundColor: 'white',
},
username: {
fontWeight: '600',
fontSize: 16,
marginBottom: 5,
},
biography: {
fontSize: 16,
lineHeight: 22,
marginBottom: 5,
},
website: {
fontSize: 16,
color: TAGG_DARK_BLUE,
marginBottom: 5,
},
});
export default ProfileBody;
|
