Fixed #17

src/components/Timeline/Empty.tsx

@@ -0,0 +1,85 @@
+import analytics from '@components/analytics'
+import Button from '@components/Button'
+import Icon from '@components/Icon'
+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
+}
+
+const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
+  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}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    minHeight: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  error: {
+    ...StyleConstants.FontStyle.M,
+    marginTop: StyleConstants.Spacing.S,
+    marginBottom: StyleConstants.Spacing.L
+  }
+})
+
+export default TimelineEmpty