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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useState} from 'react';
import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
AvatarTitle,
SocialMediaInfo,
TabsGradient,
TaggPost,
TwitterTaggPost,
} from '../../components';
import {AVATAR_GRADIENT} from '../../constants';
import {ProfileStackParams} from '../../routes';
import {
SimplePostType,
TwitterPostType,
SocialAccountType,
ScreenType,
} from '../../types';
import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
import {useSelector} from 'react-redux';
import {RootState} from '../../store/rootReducer';
import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
type SocialMediaTaggsRouteProp = RouteProp<
ProfileStackParams,
'SocialMediaTaggs'
>;
type SocialMediaTaggsNavigationProp = StackNavigationProp<
ProfileStackParams,
'SocialMediaTaggs'
>;
interface SocialMediaTaggsProps {
route: SocialMediaTaggsRouteProp;
navigation: SocialMediaTaggsNavigationProp;
}
const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
route,
navigation,
}) => {
const [accountData, setAccountData] = useState<SocialAccountType>({
posts: [],
});
const {socialMediaType, userXId, screenType} = route.params;
const {
avatar,
profile: {name},
} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
: useSelector((state: RootState) => state.user);
const {socialAccounts} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
: useSelector((state: RootState) => state.socialAccounts);
useEffect(() => {
const currentSocialData = {...socialAccounts[socialMediaType]};
if (currentSocialData) {
setAccountData(currentSocialData);
}
}, [socialAccounts, setAccountData]);
useEffect(() => {
navigation.setOptions({
headerTitle: () => {
return <AvatarTitle avatar={avatar} />;
},
});
}, [avatar, navigation]);
return (
<LinearGradient
useAngle={true}
angle={148}
style={styles.flex}
colors={[AVATAR_GRADIENT.start, AVATAR_GRADIENT.end]}>
<StatusBar barStyle={'light-content'} />
{/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
{accountData?.posts && accountData.posts.length > 0 ? (
<View
// we want a slightly bigger header here for the avatar image
style={[styles.flex, {marginTop: AvatarHeaderHeight}]}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}>
<SocialMediaInfo
fullname={name}
type={socialMediaType}
handle={accountData?.handle}
/>
{(accountData?.posts as Array<
SimplePostType | TwitterPostType
>).map((post, index) =>
socialMediaType === 'Twitter' ? (
<TwitterTaggPost
key={index}
ownerHandle={accountData?.handle || '_'}
post={post as TwitterPostType}
/>
) : (
<TaggPost
key={index}
post={post as SimplePostType}
social={socialMediaType}
/>
),
)}
</ScrollView>
<TabsGradient />
</View>
) : (
<TaggLoadingIndicator color="white" />
)}
</LinearGradient>
);
};
const styles = StyleSheet.create({
contentContainer: {
paddingBottom: SCREEN_HEIGHT / 15,
},
flex: {
flex: 1,
},
});
export default SocialMediaTaggs;
|
