Try to fix #16

src/components/Timeline.tsx

@@ -1,5 +1,5 @@
 import ComponentSeparator from '@components/Separator'
-import { useScrollToTop } from '@react-navigation/native'
+import { useNavigation, useScrollToTop } from '@react-navigation/native'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
@@ -27,6 +27,7 @@ export interface Props {
   hashtag?: Mastodon.Tag['name']
   list?: Mastodon.List['id']
   toot?: Mastodon.Status['id']
+  rootQueryKey?: QueryKeyTimeline
   account?: Mastodon.Account['id']
   disableRefresh?: boolean
   disableInfinity?: boolean
@@ -38,6 +39,7 @@ const Timeline: React.FC<Props> = ({
   hashtag,
   list,
   toot,
+  rootQueryKey,
   account,
   disableRefresh = false,
   disableInfinity = false,
@@ -108,6 +110,13 @@ const Timeline: React.FC<Props> = ({
       350
     )
   }, [])
+  // Auto go back when toot page is empty
+  const navigation = useNavigation()
+  useEffect(() => {
+    if (toot && isSuccess && flattenData.length === 0) {
+      navigation.goBack()
+    }
+  }, [isSuccess, flattenData.length])
 
   const keyExtractor = useCallback(({ id }) => id, [])
   const renderItem = useCallback(
@@ -127,6 +136,7 @@ const Timeline: React.FC<Props> = ({
               item={item}
               queryKey={queryKey}
               {...(toot === item.id && { highlighted: true })}
+              {...(toot && { rootQueryKey })}
               // @ts-ignore
               {...(data?.pages[0].pinned && { pinned: data?.pages[0].pinned })}
             />

src/components/Timeline/Conversation.tsx

@@ -86,7 +86,8 @@ const TimelineConversation: React.FC<Props> = ({
     if (conversation.last_status) {
       conversation.unread && mutate()
       navigation.push('Tab-Shared-Toot', {
-        toot: conversation.last_status
+        toot: conversation.last_status,
+        rootQueryKey: queryKey
       })
     }
   }, [])

src/components/Timeline/Default.tsx

@@ -20,17 +20,19 @@ import { useSelector } from 'react-redux'
 export interface Props {
   item: Mastodon.Status & { isPinned?: boolean }
   queryKey?: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   origin?: string
   highlighted?: boolean
   disableDetails?: boolean
   disableOnPress?: boolean
-  pinned: Mastodon.Status['id'][]
+  pinned?: Mastodon.Status['id'][]
 }
 
 // When the poll is long
 const TimelineDefault: React.FC<Props> = ({
   item,
   queryKey,
+  rootQueryKey,
   origin,
   highlighted = false,
   disableDetails = false,
@@ -55,7 +57,8 @@ const TimelineDefault: React.FC<Props> = ({
     !disableOnPress &&
       !highlighted &&
       navigation.push('Tab-Shared-Toot', {
-        toot: actualStatus
+        toot: actualStatus,
+        rootQueryKey: queryKey
       })
   }, [])
 
@@ -72,6 +75,7 @@ const TimelineDefault: React.FC<Props> = ({
         }
       ]}
       onPress={onPress}
+      disabled={queryKey && queryKey[1].toot !== undefined}
     >
       {item.reblog ? (
         <TimelineActioned action='reblog' account={item.account} />
@@ -86,6 +90,7 @@ const TimelineDefault: React.FC<Props> = ({
         />
         <TimelineHeaderDefault
           queryKey={disableOnPress ? undefined : queryKey}
+          rootQueryKey={disableOnPress ? undefined : rootQueryKey}
           status={actualStatus}
         />
       </View>
@@ -109,6 +114,7 @@ const TimelineDefault: React.FC<Props> = ({
         {queryKey && actualStatus.poll ? (
           <TimelinePoll
             queryKey={queryKey}
+            rootQueryKey={rootQueryKey}
             statusId={actualStatus.id}
             poll={actualStatus.poll}
             reblog={item.reblog ? true : false}
@@ -135,6 +141,7 @@ const TimelineDefault: React.FC<Props> = ({
         >
           <TimelineActions
             queryKey={queryKey}
+            rootQueryKey={rootQueryKey}
             status={actualStatus}
             accts={([actualStatus.account] as Mastodon.Account[] &
               Mastodon.Mention[])

src/components/Timeline/Notifications.tsx

@@ -44,7 +44,8 @@ const TimelineNotifications: React.FC<Props> = ({
     analytics('timeline_notification_press')
     notification.status &&
       navigation.push('Tab-Shared-Toot', {
-        toot: notification.status
+        toot: notification.status,
+        rootQueryKey: queryKey
       })
   }, [])
 

src/components/Timeline/Shared/Actions.tsx

@@ -17,6 +17,7 @@ import { useQueryClient } from 'react-query'
 
 export interface Props {
   queryKey: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   status: Mastodon.Status
   accts: Mastodon.Account['acct'][] // When replying to conversations
   reblog: boolean
@@ -24,6 +25,7 @@ export interface Props {
 
 const TimelineActions: React.FC<Props> = ({
   queryKey,
+  rootQueryKey,
   status,
   accts,
   reblog
@@ -120,6 +122,7 @@ const TimelineActions: React.FC<Props> = ({
     mutation.mutate({
       type: 'updateStatusProperty',
       queryKey,
+      rootQueryKey,
       id: status.id,
       reblog,
       payload: {
@@ -139,6 +142,7 @@ const TimelineActions: React.FC<Props> = ({
     mutation.mutate({
       type: 'updateStatusProperty',
       queryKey,
+      rootQueryKey,
       id: status.id,
       reblog,
       payload: {
@@ -157,6 +161,7 @@ const TimelineActions: React.FC<Props> = ({
     mutation.mutate({
       type: 'updateStatusProperty',
       queryKey,
+      rootQueryKey,
       id: status.id,
       reblog,
       payload: {

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -1,22 +1,27 @@
+import Icon from '@components/Icon'
+import { useNavigation } from '@react-navigation/native'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
-import HeaderSharedVisibility from './HeaderShared/Visibility'
-import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import HeaderSharedMuted from './HeaderShared/Muted'
-import { useNavigation } from '@react-navigation/native'
-import Icon from '@components/Icon'
-import { useTheme } from '@utils/styles/ThemeManager'
+import HeaderSharedVisibility from './HeaderShared/Visibility'
 
 export interface Props {
   queryKey?: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   status: Mastodon.Status
 }
 
-const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
+const TimelineHeaderDefault: React.FC<Props> = ({
+  queryKey,
+  rootQueryKey,
+  status
+}) => {
   const navigation = useNavigation()
   const { theme } = useTheme()
 
@@ -38,6 +43,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
           onPress={() =>
             navigation.navigate('Screen-Actions', {
               queryKey,
+              rootQueryKey,
               status,
               url: status.url || status.uri,
               type: 'status'

src/components/Timeline/Shared/Poll.tsx

@@ -10,6 +10,7 @@ import {
   QueryKeyTimeline,
   useTimelineMutation
 } from '@utils/queryHooks/timeline'
+import updateStatusProperty from '@utils/queryHooks/timeline/updateStatusProperty'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { maxBy } from 'lodash'
@@ -20,6 +21,7 @@ import { useQueryClient } from 'react-query'
 
 export interface Props {
   queryKey: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   statusId: Mastodon.Status['id']
   poll: NonNullable<Mastodon.Status['poll']>
   reblog: boolean
@@ -28,6 +30,7 @@ export interface Props {
 
 const TimelinePoll: React.FC<Props> = ({
   queryKey,
+  rootQueryKey,
   statusId,
   poll,
   reblog,
@@ -43,7 +46,19 @@ const TimelinePoll: React.FC<Props> = ({
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
     queryClient,
-    onSuccess: true,
+    onSuccess: ({ body }, params) => {
+      const theParams = params as MutationVarsTimelineUpdateStatusProperty
+      queryClient.cancelQueries(queryKey)
+      rootQueryKey && queryClient.cancelQueries(rootQueryKey)
+
+      haptics('Success')
+      switch (theParams.payload.property) {
+        case 'poll':
+          theParams.payload.data = (body as unknown) as Mastodon.Poll
+          updateStatusProperty({ queryClient, ...theParams })
+          break
+      }
+    },
     onError: (err: any, params) => {
       const theParams = params as MutationVarsTimelineUpdateStatusProperty
       haptics('Error')
@@ -76,6 +91,7 @@ const TimelinePoll: React.FC<Props> = ({
                 mutation.mutate({
                   type: 'updateStatusProperty',
                   queryKey,
+                  rootQueryKey,
                   id: statusId,
                   reblog,
                   payload: {
@@ -102,6 +118,7 @@ const TimelinePoll: React.FC<Props> = ({
                 mutation.mutate({
                   type: 'updateStatusProperty',
                   queryKey,
+                  rootQueryKey,
                   id: statusId,
                   reblog,
                   payload: {