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
|
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 {useSelector} from 'react-redux';
import {
AvatarTitle,
SocialMediaInfo,
TabsGradient,
TaggPost,
TwitterTaggPost,
} from '../../components';
import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
import {AVATAR_GRADIENT} from '../../constants';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootReducer';
import {SimplePostType, SocialAccountType, TwitterPostType} from '../../types';
import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
type SocialMediaTaggsRouteProp = RouteProp<MainStackParams, 'SocialMediaTaggs'>;
type SocialMediaTaggsNavigationProp = StackNavigationProp<
MainStackParams,
'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},
} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.user,
);
const {socialAccounts} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : 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 />
)}
</LinearGradient>
);
};
const styles = StyleSheet.create({
contentContainer: {
paddingBottom: SCREEN_HEIGHT / 15,
},
flex: {
flex: 1,
},
});
export default SocialMediaTaggs;
|
