Improve account page

src/screens/Tabs/Shared/Account.tsx

@@ -2,13 +2,16 @@ import analytics from '@components/analytics'
 import { HeaderRight } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
+import SegmentedControl from '@react-native-community/segmented-control'
 import { useAccountQuery } from '@utils/queryHooks/account'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
 import { useSharedValue } from 'react-native-reanimated'
+import { useIsFetching } from 'react-query'
 import AccountAttachments from './Account/Attachments'
 import AccountHeader from './Account/Header'
 import AccountInformation from './Account/Information'
@@ -22,7 +25,7 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
   navigation
 }) => {
   const { t, i18n } = useTranslation('screenTabs')
-  const { theme } = useTheme()
+  const { mode, theme } = useTheme()
 
   const { data } = useAccountQuery({ id: account.id })
 
@@ -59,24 +62,60 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
     scrollY.value = nativeEvent.contentOffset.y
   }, [])
 
-  const ListHeaderComponent = useMemo(() => {
-    return (
-      <View style={[styles.header, { borderBottomColor: theme.border }]}>
-        <AccountHeader account={data} />
-        <AccountInformation account={data} />
-        <AccountAttachments account={data} />
-      </View>
-    )
-  }, [data])
-
-  const queryKey: QueryKeyTimeline = [
+  const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
     'Timeline',
     { page: 'Account_Default', account: account.id }
-  ]
+  ])
   const renderItem = useCallback(
     ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />,
     []
   )
+  const isFetchingTimeline = useIsFetching(queryKey)
+  const fetchedTimeline = useRef(false)
+  useEffect(() => {
+    if (!isFetchingTimeline && !fetchedTimeline.current) {
+      fetchedTimeline.current = true
+    }
+  }, [isFetchingTimeline, fetchedTimeline.current])
+
+  const ListHeaderComponent = useMemo(() => {
+    return (
+      <>
+        <View style={[styles.header, { borderBottomColor: theme.border }]}>
+          <AccountHeader account={data} />
+          <AccountInformation account={data} />
+          {fetchedTimeline.current ? (
+            <AccountAttachments account={data} />
+          ) : null}
+        </View>
+        <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}
+        />
+      </>
+    )
+  }, [data, fetchedTimeline.current, i18n.language, mode])
 
   return (
     <>
@@ -98,6 +137,10 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
 const styles = StyleSheet.create({
   header: {
     borderBottomWidth: 1
+  },
+  segmentsContainer: {
+    marginTop: StyleConstants.Spacing.M,
+    marginHorizontal: StyleConstants.Spacing.Global.PagePadding
   }
 })