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
|
import React from 'react';
import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native';
import {AuthContext, ProfileContext} from '../../routes/';
import FollowUnfollow from './FollowUnfollow';
interface ProfileBodyProps {
onLayout: (event: LayoutChangeEvent) => void;
isProfileView: boolean;
followed: boolean;
isOwnProfile: boolean;
handleFollowUnfollow: Function;
}
const ProfileBody: React.FC<ProfileBodyProps> = ({
onLayout,
isProfileView,
followed,
isOwnProfile,
handleFollowUnfollow,
}) => {
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 ? (
<FollowUnfollow
followed={followed}
handleFollowUnfollow={handleFollowUnfollow}
/>
) : (
<></>
)}
</View>
);
};
const styles = StyleSheet.create({
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: '#4E699C',
marginBottom: 5,
},
});
export default ProfileBody;
|
