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
|
import React from 'react';
import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native';
import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
import {AuthContext, ProfileContext} from '../../routes/';
import ToggleButton from './ToggleButton';
interface ProfileBodyProps {
onLayout: (event: LayoutChangeEvent) => void;
isProfileView: boolean;
isFollowed: boolean;
isBlocked: boolean;
isOwnProfile: boolean;
handleFollowUnfollow: Function;
handleBlockUnblock: Function;
}
const ProfileBody: React.FC<ProfileBodyProps> = ({
onLayout,
isProfileView,
isFollowed,
isBlocked,
isOwnProfile,
handleFollowUnfollow,
handleBlockUnblock,
}) => {
const {
profile,
user: {username},
} = isProfileView
? React.useContext(ProfileContext)
: React.useContext(AuthContext);
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}>{`${website}`}</Text>
{isProfileView && !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;
|
