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
|
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useRef, useState} from 'react';
import {FlatList, Keyboard, ViewToken} from 'react-native';
import {useSelector} from 'react-redux';
import {MomentPost, TabsGradient} from '../../components';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootreducer';
import {MomentPostType} from '../../types';
type MomentContextType = {
keyboardVisible: boolean;
currentVisibleMomentId: string | undefined;
};
export const MomentContext = React.createContext({} as MomentContextType);
type IndividualMomentRouteProp = RouteProp<MainStackParams, 'IndividualMoment'>;
type IndividualMomentNavigationProp = StackNavigationProp<
MainStackParams,
'IndividualMoment'
>;
interface IndividualMomentProps {
route: IndividualMomentRouteProp;
navigation: IndividualMomentNavigationProp;
}
const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
const {
userXId,
screenType,
moment: {moment_category, moment_id},
} = route.params;
const {moments} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.moments,
);
const scrollRef = useRef<FlatList<MomentPostType>>(null);
const momentData = moments.filter(
(m) => m.moment_category === moment_category,
);
const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
const [keyboardVisible, setKeyboardVisible] = useState(false);
const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
string | undefined
>();
// https://stackoverflow.com/a/57502343
const viewabilityConfigCallback = useRef(
(info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
const index = info.viewableItems[0].index;
if (index !== null) {
setCurrentVisibleMomentId(momentData[index].moment_id);
}
},
);
useEffect(() => {
const showKeyboard = () => setKeyboardVisible(true);
const hideKeyboard = () => setKeyboardVisible(false);
Keyboard.addListener('keyboardWillShow', showKeyboard);
Keyboard.addListener('keyboardWillHide', hideKeyboard);
return () => {
Keyboard.removeListener('keyboardWillShow', showKeyboard);
Keyboard.removeListener('keyboardWillHide', hideKeyboard);
};
}, []);
return (
<MomentContext.Provider
value={{
keyboardVisible,
currentVisibleMomentId,
}}>
<FlatList
ref={scrollRef}
data={momentData}
renderItem={({item}) => (
<MomentPost
key={item.moment_id}
moment={item}
userXId={userXId}
screenType={screenType}
/>
)}
keyExtractor={(item, _) => item.moment_id}
showsVerticalScrollIndicator={false}
initialScrollIndex={initialIndex}
onViewableItemsChanged={viewabilityConfigCallback.current}
onScrollToIndexFailed={(info) => {
setTimeout(() => {
scrollRef.current?.scrollToIndex({
index: info.index,
});
}, 500);
}}
pagingEnabled
/>
<TabsGradient />
</MomentContext.Provider>
);
};
export default IndividualMoment;
|
