/
NewMessageBottomSheet.tsx
109 lines (97 loc) · 2.96 KB
/
NewMessageBottomSheet.tsx
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
import React, { useContext } from 'react';
import { StyleSheet, View } from 'react-native';
import { Modalize } from 'react-native-modalize';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { FlatGrid } from 'react-native-super-grid';
import EmptyConnectionsBanner from '@app/../assets/svg/empty-connections.svg';
import { AppContext } from '@app/context';
import { BottomSheetHeader, SvgBanner, ConnectionsPlaceholder, UserCard } from '@app/layout';
import { ThemeColors } from '@app/types/theme';
import { useQuery } from '@apollo/react-hooks';
import { QUERY_USER_CONNECTIONS } from '@app/graphql/query';
import { Connections } from '@app/constants';
interface NewMessageBottomSheetProps {
ref: React.Ref<any>,
onConnectionSelect: (targetId: string, avatar: string, handle: string) => void
};
const NewMessageBottomSheet: React.FC<NewMessageBottomSheetProps> = React.forwardRef(({ onConnectionSelect }, ref) => {
const { user, theme } = useContext(AppContext);
const { data, loading, error } = useQuery(QUERY_USER_CONNECTIONS, {
variables: { userId: user.id, type: Connections.FOLLOWING },
fetchPolicy: 'network-only'
});
let content = <ConnectionsPlaceholder />;
const ListEmptyComponent = () => (
<SvgBanner
Svg={EmptyConnectionsBanner}
placeholder={`You're not following anyone`}
spacing={16}
/>
);
const renderItem = ({ item }) => {
const { id, avatar, handle, name } = item;
return (
<UserCard
userId={id}
avatar={avatar}
handle={handle}
name={name}
onPress={() => onConnectionSelect(id, avatar, handle)}
/>
);
};
if (!loading && !error) {
const { userConnections } = data;
content = (
<FlatGrid
bounces={false}
itemDimension={responsiveWidth(85)}
showsVerticalScrollIndicator={false}
items={userConnections}
itemContainerStyle={styles().listItemContainer}
contentContainerStyle={styles().listContentContainer}
ListEmptyComponent={ListEmptyComponent}
style={styles().listContainer}
spacing={20}
renderItem={renderItem}
/>
);
}
return (
<Modalize
//@ts-ignore
ref={ref}
scrollViewProps={{ showsVerticalScrollIndicator: false }}
modalStyle={styles(theme).container}>
<BottomSheetHeader
heading={`Let's talk`}
subHeading='Connect with your friends'
/>
<View style={styles(theme).content}>
{content}
</View>
</Modalize>
);
});
const styles = (theme = {} as ThemeColors) => StyleSheet.create({
container: {
marginTop: 40,
padding: 20,
backgroundColor: theme.base
},
content: {
flex: 1,
paddingBottom: responsiveHeight(5)
},
listContainer: {
flex: 1
},
listItemContainer: {
width: '106%'
},
listContentContainer: {
alignItems: 'center',
justifyContent: 'flex-start'
}
});
export default NewMessageBottomSheet;