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
|
import {BlurView} from '@react-native-community/blur';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {useSelector} from 'react-redux';
import {IndividualMomentTitleBar, MomentPost} from '../../components';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootreducer';
import {MomentType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
/**
* Individual moment view opened when user clicks on a moment tile
*/
type IndividualMomentRouteProp = RouteProp<MainStackParams, 'IndividualMoment'>;
type IndividualMomentNavigationProp = StackNavigationProp<
MainStackParams,
'IndividualMoment'
>;
interface IndividualMomentProps {
route: IndividualMomentRouteProp;
navigation: IndividualMomentNavigationProp;
}
const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9;
const IndividualMoment: React.FC<IndividualMomentProps> = ({
route,
navigation,
}) => {
const {moment_category, moment_id} = route.params.moment;
const {userXId, screenType} = route.params;
const {moments} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.moments,
);
const momentData = moments.filter(
(m) => m.moment_category === moment_category,
);
const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
return (
<BlurView
blurType="light"
blurAmount={30}
reducedTransparencyFallbackColor="white"
style={styles.contentContainer}>
<IndividualMomentTitleBar
style={styles.header}
close={() => navigation.pop()}
{...{title: moment_category}}
/>
<View style={styles.content}>
<FlatList
data={momentData}
renderItem={({item}: {item: MomentType}) => (
<MomentPost userXId={userXId} screenType={screenType} item={item} />
)}
keyExtractor={(item, index) => index.toString()}
showsVerticalScrollIndicator={false}
snapToAlignment={'start'}
snapToInterval={ITEM_HEIGHT}
decelerationRate={'fast'}
initialScrollIndex={initialIndex}
getItemLayout={(data, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
})}
pagingEnabled
/>
</View>
</BlurView>
);
};
const styles = StyleSheet.create({
contentContainer: {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
paddingTop: StatusBarHeight,
flex: 1,
paddingBottom: 0,
},
content: {
flex: 9,
},
header: {
flex: 1,
},
postContainer: {
height: ITEM_HEIGHT,
width: SCREEN_WIDTH,
flex: 1,
},
postHeader: {
flex: 1,
},
postContent: {flex: 9},
});
export default IndividualMoment;
|
