2021-02-08 23:47:20 +01:00
|
|
|
import Timeline from '@components/Timeline'
|
2021-02-27 16:33:54 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2021-06-01 22:27:27 +02:00
|
|
|
import SegmentedControl from '@react-native-community/segmented-control'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
2021-01-11 21:36:57 +01:00
|
|
|
import { useAccountQuery } from '@utils/queryHooks/account'
|
2021-02-27 16:33:54 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
2021-06-01 22:27:27 +02:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2021-01-16 00:00:31 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-11-06 23:39:31 +01:00
|
|
|
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
2021-04-09 21:43:12 +02:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-11-06 23:39:31 +01:00
|
|
|
import { StyleSheet, Text, View } from 'react-native'
|
2021-01-15 01:15:27 +01:00
|
|
|
import { useSharedValue } from 'react-native-reanimated'
|
2021-06-01 22:27:27 +02:00
|
|
|
import { useIsFetching } from 'react-query'
|
2021-01-16 00:00:31 +01:00
|
|
|
import AccountAttachments from './Account/Attachments'
|
2021-01-03 02:00:26 +01:00
|
|
|
import AccountHeader from './Account/Header'
|
|
|
|
import AccountInformation from './Account/Information'
|
2020-12-17 09:44:03 +01:00
|
|
|
import AccountNav from './Account/Nav'
|
2020-10-28 00:02:37 +01:00
|
|
|
|
2022-11-06 23:39:31 +01:00
|
|
|
const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>> = ({
|
2020-10-26 00:27:53 +01:00
|
|
|
route: {
|
2020-12-21 21:47:15 +01:00
|
|
|
params: { account }
|
2022-06-07 20:07:14 +02:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2021-04-09 21:43:12 +02:00
|
|
|
const { t, i18n } = useTranslation('screenTabs')
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors, mode } = useTheme()
|
2021-01-16 00:00:31 +01:00
|
|
|
|
2021-01-11 21:36:57 +01:00
|
|
|
const { data } = useAccountQuery({ id: account.id })
|
2020-11-04 22:26:38 +01:00
|
|
|
|
2021-01-04 10:50:24 +01:00
|
|
|
const scrollY = useSharedValue(0)
|
2020-10-26 00:27:53 +01:00
|
|
|
|
2021-06-01 22:27:27 +02:00
|
|
|
const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
|
2021-02-27 16:33:54 +01:00
|
|
|
'Timeline',
|
|
|
|
{ page: 'Account_Default', account: account.id }
|
2021-06-01 22:27:27 +02:00
|
|
|
])
|
|
|
|
const isFetchingTimeline = useIsFetching(queryKey)
|
|
|
|
const fetchedTimeline = useRef(false)
|
|
|
|
useEffect(() => {
|
|
|
|
if (!isFetchingTimeline && !fetchedTimeline.current) {
|
|
|
|
fetchedTimeline.current = true
|
|
|
|
}
|
|
|
|
}, [isFetchingTimeline, fetchedTimeline.current])
|
|
|
|
|
|
|
|
const ListHeaderComponent = useMemo(() => {
|
|
|
|
return (
|
|
|
|
<>
|
2022-02-12 14:51:01 +01:00
|
|
|
<View style={[styles.header, { borderBottomColor: colors.border }]}>
|
2021-06-01 22:27:27 +02:00
|
|
|
<AccountHeader account={data} />
|
|
|
|
<AccountInformation account={data} />
|
2022-11-06 23:39:31 +01:00
|
|
|
{!data?.suspended && fetchedTimeline.current ? (
|
2021-06-01 22:27:27 +02:00
|
|
|
<AccountAttachments account={data} />
|
|
|
|
) : null}
|
|
|
|
</View>
|
2022-11-06 23:39:31 +01:00
|
|
|
{!data?.suspended ? (
|
|
|
|
<SegmentedControl
|
|
|
|
appearance={mode}
|
|
|
|
values={[t('shared.account.toots.default'), t('shared.account.toots.all')]}
|
|
|
|
selectedIndex={queryKey[1].page === 'Account_Default' ? 0 : 1}
|
|
|
|
onChange={({ nativeEvent }) => {
|
|
|
|
switch (nativeEvent.selectedSegmentIndex) {
|
|
|
|
case 0:
|
|
|
|
setQueryKey([queryKey[0], { ...queryKey[1], page: 'Account_Default' }])
|
|
|
|
break
|
|
|
|
case 1:
|
|
|
|
setQueryKey([queryKey[0], { ...queryKey[1], page: 'Account_All' }])
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
style={styles.segmentsContainer}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
{data?.suspended ? (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Text style={{ ...StyleConstants.FontStyle.M, color: colors.secondary, textAlign: 'center' }}>
|
|
|
|
{t('shared.account.suspended')}
|
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
) : null}
|
2021-06-01 22:27:27 +02:00
|
|
|
</>
|
|
|
|
)
|
2021-06-02 22:27:51 +02:00
|
|
|
}, [data, fetchedTimeline.current, queryKey[1].page, i18n.language, mode])
|
2021-02-27 16:33:54 +01:00
|
|
|
|
2020-11-22 00:46:23 +01:00
|
|
|
return (
|
2021-05-09 21:59:03 +02:00
|
|
|
<>
|
2021-01-03 02:00:26 +01:00
|
|
|
<AccountNav scrollY={scrollY} account={data} />
|
2021-01-15 01:15:27 +01:00
|
|
|
|
2022-11-06 23:39:31 +01:00
|
|
|
{data?.suspended ? (
|
|
|
|
ListHeaderComponent
|
|
|
|
) : (
|
|
|
|
<Timeline
|
|
|
|
queryKey={queryKey}
|
|
|
|
disableRefresh
|
|
|
|
customProps={{
|
|
|
|
renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />,
|
|
|
|
onScroll: ({ nativeEvent }) => (scrollY.value = nativeEvent.contentOffset.y),
|
|
|
|
ListHeaderComponent,
|
|
|
|
maintainVisibleContentPosition: undefined
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
2021-05-09 21:59:03 +02:00
|
|
|
</>
|
2020-10-26 00:27:53 +01:00
|
|
|
)
|
|
|
|
}
|
2020-10-28 00:02:37 +01:00
|
|
|
|
2021-01-16 00:00:31 +01:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
header: {
|
|
|
|
borderBottomWidth: 1
|
2021-06-01 22:27:27 +02:00
|
|
|
},
|
|
|
|
segmentsContainer: {
|
|
|
|
marginTop: StyleConstants.Spacing.M,
|
|
|
|
marginHorizontal: StyleConstants.Spacing.Global.PagePadding
|
2021-01-16 00:00:31 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default TabSharedAccount
|