Improve account page

package.json

@@ -4,7 +4,7 @@
     "native": "210511",
     "major": 2,
     "minor": 0,
-    "patch": 2,
+    "patch": 3,
     "expo": "41.0.0"
   },
   "description": "tooot app for Mastodon",

src/i18n/en/screens/tabs.json

@@ -265,6 +265,10 @@
         "statuses_count": "{{count}} toots",
         "following_count": "$t(shared.users.accounts.following)",
         "followers_count": "$t(shared.users.accounts.followers)"
+      },
+      "toots": {
+        "default": "Toots",
+        "all": "Toots and replies"
       }
     },
     "attachments": {

src/screens/Tabs/Me/Root/MyInfo.tsx

@@ -10,7 +10,7 @@ const MyInfo: React.FC<Props> = ({ account }) => {
   return (
     <>
       <AccountHeader account={account} />
-      <AccountInformation account={account} myInfo />
+      <AccountInformation account={account} />
     </>
   )
 }

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
   }
 })
 

src/screens/Tabs/Shared/Account/Information.tsx

@@ -1,3 +1,4 @@
+import { useRoute } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback } from 'react'
@@ -14,13 +15,15 @@ import AccountInformationStats from './Information/Stats'
 
 export interface Props {
   account: Mastodon.Account | undefined
-  myInfo?: boolean // Showing from my info page
 }
 
 const AccountInformation = React.memo(
-  ({ account, myInfo = false }: Props) => {
+  ({ account }: Props) => {
     const { mode, theme } = useTheme()
 
+    const { name } = useRoute()
+    const myInfo = name !== 'Tab-Shared-Account'
+
     const animation = useCallback(
       props => (
         <Fade {...props} style={{ backgroundColor: theme.shimmerHighlight }} />
@@ -46,7 +49,7 @@ const AccountInformation = React.memo(
 
           <AccountInformationCreated account={account} hidden={myInfo} />
 
-          <AccountInformationStats account={account} />
+          <AccountInformationStats account={account} myInfo={myInfo} />
         </Placeholder>
       </View>
     )

src/screens/Tabs/Shared/Account/Information/Stats.tsx

@@ -10,9 +10,10 @@ import { PlaceholderLine } from 'rn-placeholder'
 
 export interface Props {
   account: Mastodon.Account | undefined
+  myInfo: boolean
 }
 
-const AccountInformationStats: React.FC<Props> = ({ account }) => {
+const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
   >()
@@ -27,6 +28,12 @@ const AccountInformationStats: React.FC<Props> = ({ account }) => {
           children={t('shared.account.summary.statuses_count', {
             count: account.statuses_count || 0
           })}
+          onPress={() => {
+            analytics('account_stats_toots_press')
+            myInfo &&
+              account &&
+              navigation.push('Tab-Shared-Account', { account })
+          }}
         />
       ) : (
         <PlaceholderLine

src/utils/queryHooks/translate.ts

@@ -59,7 +59,7 @@ const useTranslateQuery = ({
   options?: UseQueryOptions<Translations, AxiosError, Translations>
 }) => {
   const queryKey: QueryKeyTranslate = ['Translate', { ...queryKeyParams }]
-  return useQuery(queryKey, queryFunction, options)
+  return useQuery(queryKey, queryFunction, { ...options, retry: false })
 }
 
 export { useTranslateQuery }