octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Rewrite timeline logic

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-02-27 16:33:54 +01:00
parent 45681fc1f5
commit f3fa6bc662
67 changed files with 1980 additions and 1395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/Timeline/Empty.tsx
View File

@ -1,72 +1,79 @@
import analytics from '@components/analytics'
import Button from '@components/Button'
import Icon from '@components/Icon'
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
import { QueryStatus } from 'react-query'
export interface Props {
status: QueryStatus
refetch: () => void
queryKey: QueryKeyTimeline
}
const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
const { mode, theme } = useTheme()
const { t, i18n } = useTranslation('componentTimeline')
const TimelineEmpty = React.memo(
({ queryKey }: Props) => {
const { status, refetch } = useTimelineQuery({
...queryKey[1],
options: { notifyOnChangeProps: ['status'] }
})
const children = useMemo(() => {
switch (status) {
case 'loading':
return (
<Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
)
case 'error':
return (
<>
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
color={theme.primary}
/>
<Text style={[styles.error, { color: theme.primary }]}>
{t('empty.error.message')}
</Text>
<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}
color={theme.primary}
/>
<Text style={[styles.error, { color: theme.primary }]}>
{t('empty.success.message')}
</Text>
</>
)
}
}, [mode, i18n.language, status])
return (
<View
style={[styles.base, { backgroundColor: theme.background }]}
children={children}
/>
)
}
const { mode, theme } = useTheme()
const { t, i18n } = useTranslation('componentTimeline')
const children = useMemo(() => {
switch (status) {
case 'loading':
return (
<Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
)
case 'error':
return (
<>
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
color={theme.primary}
/>
<Text style={[styles.error, { color: theme.primary }]}>
{t('empty.error.message')}
</Text>
<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}
color={theme.primary}
/>
<Text style={[styles.error, { color: theme.primary }]}>
{t('empty.success.message')}
</Text>
</>
)
}
}, [mode, i18n.language, status])
return (
<View
style={[styles.base, { backgroundColor: theme.background }]}
children={children}
/>
)
},
() => true
)
const styles = StyleSheet.create({
base: {