2020-11-28 17:07:30 +01:00
|
|
|
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
import { Dimensions, FlatList, StyleSheet, Text, View } from 'react-native'
|
2020-10-24 16:44:32 +02:00
|
|
|
import SegmentedControl from '@react-native-community/segmented-control'
|
2020-11-21 13:19:05 +01:00
|
|
|
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
|
|
|
import { useSelector } from 'react-redux'
|
2020-10-24 16:44:32 +02:00
|
|
|
import { Feather } from '@expo/vector-icons'
|
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
import Timeline from './Timelines/Timeline'
|
2020-11-21 13:19:05 +01:00
|
|
|
import sharedScreens from 'src/screens/Shared/sharedScreens'
|
2020-11-24 00:18:47 +01:00
|
|
|
import { getRemoteUrl, InstancesState } from 'src/utils/slices/instancesSlice'
|
|
|
|
import { RootState, store } from 'src/store'
|
2020-11-23 00:07:32 +01:00
|
|
|
import { useTheme } from 'src/utils/styles/ThemeManager'
|
2020-11-24 00:18:47 +01:00
|
|
|
import { useNavigation } from '@react-navigation/native'
|
|
|
|
import getCurrentTab from 'src/utils/getCurrentTab'
|
|
|
|
import PleaseLogin from './PleaseLogin'
|
2020-10-24 16:44:32 +02:00
|
|
|
|
|
|
|
const Stack = createNativeStackNavigator()
|
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
const Page = ({
|
|
|
|
item: { page },
|
|
|
|
localRegistered
|
|
|
|
}: {
|
|
|
|
item: { page: App.Pages }
|
|
|
|
localRegistered: InstancesState['local']['url'] | undefined
|
|
|
|
}) => {
|
2020-10-29 14:52:28 +01:00
|
|
|
return (
|
|
|
|
<View style={{ width: Dimensions.get('window').width }}>
|
2020-11-21 13:19:05 +01:00
|
|
|
{localRegistered || page === 'RemotePublic' ? (
|
|
|
|
<Timeline page={page} />
|
|
|
|
) : (
|
2020-11-24 00:18:47 +01:00
|
|
|
<PleaseLogin />
|
2020-11-21 13:19:05 +01:00
|
|
|
)}
|
2020-10-29 14:52:28 +01:00
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
export interface Props {
|
2020-11-24 00:18:47 +01:00
|
|
|
name: 'Screen-Local-Root' | 'Screen-Public-Root'
|
2020-11-21 00:40:55 +01:00
|
|
|
content: { title: string; page: App.Pages }[]
|
2020-10-31 21:04:46 +01:00
|
|
|
}
|
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
const Timelines: React.FC<Props> = ({ name, content }) => {
|
2020-11-24 00:18:47 +01:00
|
|
|
const navigation = useNavigation()
|
2020-11-23 00:07:32 +01:00
|
|
|
const { theme } = useTheme()
|
2020-11-21 13:19:05 +01:00
|
|
|
const localRegistered = useSelector(
|
|
|
|
(state: RootState) => state.instances.local.url
|
|
|
|
)
|
2020-11-24 00:18:47 +01:00
|
|
|
const publicDomain = getRemoteUrl(store.getState())
|
2020-10-24 16:44:32 +02:00
|
|
|
const [segment, setSegment] = useState(0)
|
|
|
|
const [renderHeader, setRenderHeader] = useState(false)
|
2020-10-29 14:52:28 +01:00
|
|
|
const [segmentManuallyTriggered, setSegmentManuallyTriggered] = useState(
|
|
|
|
false
|
|
|
|
)
|
2020-10-24 16:44:32 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const nbr = setTimeout(() => setRenderHeader(true), 50)
|
|
|
|
return
|
|
|
|
}, [])
|
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
const horizontalPaging = useRef<FlatList>(null!)
|
2020-10-24 16:44:32 +02:00
|
|
|
|
2020-11-28 17:07:30 +01:00
|
|
|
const onChangeSegment = useCallback(({ nativeEvent }) => {
|
|
|
|
setSegmentManuallyTriggered(true)
|
|
|
|
setSegment(nativeEvent.selectedSegmentIndex)
|
|
|
|
horizontalPaging.current.scrollToIndex({
|
|
|
|
index: nativeEvent.selectedSegmentIndex
|
|
|
|
})
|
|
|
|
}, [])
|
|
|
|
const onPressSearch = useCallback(() => {
|
|
|
|
navigation.navigate(getCurrentTab(navigation), {
|
|
|
|
screen: 'Screen-Shared-Search'
|
|
|
|
})
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const flGetItemLayout = useCallback(
|
|
|
|
(data, index) => ({
|
|
|
|
length: Dimensions.get('window').width,
|
|
|
|
offset: Dimensions.get('window').width * index,
|
|
|
|
index
|
|
|
|
}),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
const flKeyExtrator = useCallback(({ page }) => page, [])
|
|
|
|
const flRenderItem = useCallback(
|
|
|
|
({ item, index }) => {
|
|
|
|
if (!localRegistered && index === 0) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
return <Page item={item} localRegistered={localRegistered} />
|
|
|
|
},
|
|
|
|
[localRegistered]
|
|
|
|
)
|
|
|
|
const flOnMomentumScrollEnd = useCallback(
|
|
|
|
() => setSegmentManuallyTriggered(false),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
const flOnScroll = useCallback(
|
|
|
|
({ nativeEvent }) =>
|
|
|
|
!segmentManuallyTriggered &&
|
|
|
|
setSegment(
|
|
|
|
nativeEvent.contentOffset.x <= Dimensions.get('window').width / 2
|
|
|
|
? 0
|
|
|
|
: 1
|
|
|
|
),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
|
2020-10-24 16:44:32 +02:00
|
|
|
return (
|
2020-10-26 00:27:53 +01:00
|
|
|
<Stack.Navigator>
|
|
|
|
<Stack.Screen
|
|
|
|
name={name}
|
|
|
|
options={{
|
2020-11-24 00:18:47 +01:00
|
|
|
headerTitle: name === 'Screen-Public-Root' ? publicDomain : '',
|
|
|
|
...(renderHeader &&
|
|
|
|
localRegistered && {
|
|
|
|
headerCenter: () => (
|
|
|
|
<SegmentedControl
|
|
|
|
values={[content[0].title, content[1].title]}
|
|
|
|
selectedIndex={segment}
|
2020-11-28 17:07:30 +01:00
|
|
|
onChange={onChangeSegment}
|
2020-11-24 00:18:47 +01:00
|
|
|
style={{ width: 150, height: 30 }}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
headerRight: () => (
|
|
|
|
<Feather
|
|
|
|
name='search'
|
|
|
|
size={24}
|
|
|
|
color={theme.secondary}
|
2020-11-28 17:07:30 +01:00
|
|
|
onPress={onPressSearch}
|
2020-11-24 00:18:47 +01:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
})
|
2020-10-26 00:27:53 +01:00
|
|
|
}}
|
|
|
|
>
|
2020-11-24 00:18:47 +01:00
|
|
|
{() => {
|
|
|
|
return (
|
|
|
|
<FlatList
|
|
|
|
horizontal
|
|
|
|
pagingEnabled
|
2020-11-28 17:07:30 +01:00
|
|
|
data={content}
|
|
|
|
bounces={false}
|
|
|
|
onScroll={flOnScroll}
|
|
|
|
ref={horizontalPaging}
|
|
|
|
style={styles.flatList}
|
|
|
|
renderItem={flRenderItem}
|
|
|
|
extraData={localRegistered}
|
|
|
|
keyExtractor={flKeyExtrator}
|
|
|
|
getItemLayout={flGetItemLayout}
|
2020-11-24 00:18:47 +01:00
|
|
|
showsHorizontalScrollIndicator={false}
|
2020-11-28 17:07:30 +01:00
|
|
|
onMomentumScrollEnd={flOnMomentumScrollEnd}
|
2020-11-24 00:18:47 +01:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}}
|
2020-10-24 16:44:32 +02:00
|
|
|
</Stack.Screen>
|
2020-10-30 20:03:44 +01:00
|
|
|
|
|
|
|
{sharedScreens(Stack)}
|
2020-10-24 16:44:32 +02:00
|
|
|
</Stack.Navigator>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-11-28 17:07:30 +01:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
flatList: {
|
|
|
|
width: Dimensions.get('window').width,
|
|
|
|
height: '100%'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default React.memo(Timelines, () => true)
|