tooot/src/components/Timeline/Empty.tsx

104 lines
2.8 KiB
TypeScript
Raw Normal View History

2021-01-24 02:25:43 +01:00
import analytics from '@components/analytics'
2020-12-26 23:05:17 +01:00
import Button from '@components/Button'
import Icon from '@components/Icon'
import CustomText from '@components/Text'
2021-02-27 16:33:54 +01:00
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
2020-12-13 14:04:25 +01:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
2022-04-30 21:59:13 +02:00
import React from 'react'
2021-01-01 23:10:47 +01:00
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
2021-02-08 23:47:20 +01:00
import { Circle } from 'react-native-animated-spinkit'
2020-12-12 12:49:29 +01:00
export interface Props {
2021-02-27 16:33:54 +01:00
queryKey: QueryKeyTimeline
2020-12-12 12:49:29 +01:00
}
2021-02-27 16:33:54 +01:00
const TimelineEmpty = React.memo(
({ queryKey }: Props) => {
const { status, refetch } = useTimelineQuery({
...queryKey[1],
options: { notifyOnChangeProps: ['status'] }
})
2020-12-12 12:49:29 +01:00
2022-04-30 21:59:13 +02:00
const { colors } = useTheme()
const { t } = useTranslation('componentTimeline')
2021-02-27 16:33:54 +01:00
2022-04-30 21:59:13 +02:00
const children = () => {
2021-02-27 16:33:54 +01:00
switch (status) {
case 'loading':
return (
2022-02-12 14:51:01 +01:00
<Circle
size={StyleConstants.Font.Size.L}
color={colors.secondary}
/>
2021-02-27 16:33:54 +01:00
)
case 'error':
return (
<>
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
2022-02-12 14:51:01 +01:00
color={colors.primaryDefault}
2021-02-27 16:33:54 +01:00
/>
<CustomText
fontStyle='M'
style={{
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L,
color: colors.primaryDefault
}}
>
2021-02-27 16:33:54 +01:00
{t('empty.error.message')}
</CustomText>
2021-02-27 16:33:54 +01:00
<Button
type='text'
content={t('empty.error.button')}
onPress={() => {
analytics('timeline_error_press_refetch')
refetch()
}}
/>
</>
)
case 'success':
return (
<>
<Icon
name='Smartphone'
size={StyleConstants.Font.Size.L}
2022-02-12 14:51:01 +01:00
color={colors.primaryDefault}
2021-02-27 16:33:54 +01:00
/>
<CustomText
fontStyle='M'
style={{
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L,
color: colors.primaryDefault
}}
>
2021-02-27 16:33:54 +01:00
{t('empty.success.message')}
</CustomText>
2021-02-27 16:33:54 +01:00
</>
)
}
2022-04-30 21:59:13 +02:00
}
2021-02-27 16:33:54 +01:00
return (
<View
2022-04-30 21:59:13 +02:00
style={{
flex: 1,
minHeight: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.backgroundDefault
}}
>
{children()}
</View>
2021-02-27 16:33:54 +01:00
)
},
() => true
)
2020-12-12 12:49:29 +01:00
export default TimelineEmpty