Try to fix #16

src/@types/react-navigation.d.ts

@@ -5,6 +5,7 @@ declare namespace Nav {
       | {
           type: 'status'
           queryKey: QueryKeyTimeline
+          rootQueryKey?: QueryKeyTimeline
           status: Mastodon.Status
         }
       | {
@@ -86,6 +87,7 @@ declare namespace Nav {
     'Tab-Shared-Search': undefined
     'Tab-Shared-Toot': {
       toot: Mastodon.Status
+      rootQueryKey: any
     }
   }
 

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 HeaderSharedVisibility from './HeaderShared/Visibility'
-import Icon from '@components/Icon'
-import { useTheme } from '@utils/styles/ThemeManager'
 
 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: {

src/screens/Actions/Account.tsx

@@ -13,11 +13,17 @@ import { useQueryClient } from 'react-query'
 
 export interface Props {
   queryKey?: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   account: Mastodon.Account
   dismiss: () => void
 }
 
-const ActionsAccount: React.FC<Props> = ({ queryKey, account, dismiss }) => {
+const ActionsAccount: React.FC<Props> = ({
+  queryKey,
+  rootQueryKey,
+  account,
+  dismiss
+}) => {
   const { t } = useTranslation('componentTimeline')
 
   const queryClient = useQueryClient()
@@ -59,6 +65,7 @@ const ActionsAccount: React.FC<Props> = ({ queryKey, account, dismiss }) => {
     },
     onSettled: () => {
       queryKey && queryClient.invalidateQueries(queryKey)
+      rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
     }
   })
 

src/screens/Actions/Domain.tsx

@@ -14,11 +14,17 @@ import { useQueryClient } from 'react-query'
 
 export interface Props {
   queryKey: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   domain: string
   dismiss: () => void
 }
 
-const ActionsDomain: React.FC<Props> = ({ queryKey, domain, dismiss }) => {
+const ActionsDomain: React.FC<Props> = ({
+  queryKey,
+  rootQueryKey,
+  domain,
+  dismiss
+}) => {
   const { t } = useTranslation('componentTimeline')
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
@@ -31,6 +37,7 @@ const ActionsDomain: React.FC<Props> = ({ queryKey, domain, dismiss }) => {
         })
       })
       queryClient.invalidateQueries(queryKey)
+      rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
     }
   })
 

src/screens/Actions/Root.tsx

@@ -107,6 +107,7 @@ const ScreenActionsRoot = React.memo(
               {!sameAccount && (
                 <ActionsAccount
                   queryKey={params.queryKey}
+                  rootQueryKey={params.rootQueryKey}
                   account={params.status.account}
                   dismiss={dismiss}
                 />
@@ -115,6 +116,7 @@ const ScreenActionsRoot = React.memo(
                 <ActionsStatus
                   navigation={navigation}
                   queryKey={params.queryKey}
+                  rootQueryKey={params.rootQueryKey}
                   status={params.status}
                   dismiss={dismiss}
                 />
@@ -122,6 +124,7 @@ const ScreenActionsRoot = React.memo(
               {!sameDomain && statusDomain && (
                 <ActionsDomain
                   queryKey={params.queryKey}
+                  rootQueryKey={params.rootQueryKey}
                   domain={statusDomain}
                   dismiss={dismiss}
                 />

src/screens/Actions/Status.tsx

@@ -11,10 +11,12 @@ import {
 } from '@utils/queryHooks/timeline'
 import analytics from '@components/analytics'
 import { StackNavigationProp } from '@react-navigation/stack'
+import deleteItem from '@utils/queryHooks/timeline/deleteItem'
 
 export interface Props {
   navigation: StackNavigationProp<Nav.RootStackParamList, 'Screen-Actions'>
   queryKey: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   status: Mastodon.Status
   dismiss: () => void
 }
@@ -22,6 +24,7 @@ export interface Props {
 const ActionsStatus: React.FC<Props> = ({
   navigation,
   queryKey,
+  rootQueryKey,
   status,
   dismiss
 }) => {
@@ -66,6 +69,7 @@ const ActionsStatus: React.FC<Props> = ({
             type: 'deleteItem',
             source: 'statuses',
             queryKey,
+            rootQueryKey,
             id: status.id
           })
         }}
@@ -106,6 +110,11 @@ const ActionsStatus: React.FC<Props> = ({
                     queryKey,
                     id: status.id
                   })
+                  deleteItem({
+                    queryClient,
+                    rootQueryKey,
+                    id: status.id
+                  })
                   if (res.body.id) {
                     // @ts-ignore
                     navigation.navigate('Screen-Compose', {
@@ -131,6 +140,7 @@ const ActionsStatus: React.FC<Props> = ({
           mutation.mutate({
             type: 'updateStatusProperty',
             queryKey,
+            rootQueryKey,
             id: status.id,
             payload: {
               property: 'muted',
@@ -158,6 +168,7 @@ const ActionsStatus: React.FC<Props> = ({
             mutation.mutate({
               type: 'updateStatusProperty',
               queryKey,
+              rootQueryKey,
               id: status.id,
               payload: {
                 property: 'pinned',

src/screens/Tabs/Shared/Toot.tsx

@@ -4,10 +4,18 @@ import { SharedTootProp } from './sharedScreens'
 
 const TabSharedToot: React.FC<SharedTootProp> = ({
   route: {
-    params: { toot }
+    params: { toot, rootQueryKey }
   }
 }) => {
-  return <Timeline page='Toot' toot={toot.id} disableRefresh disableInfinity />
+  return (
+    <Timeline
+      page='Toot'
+      toot={toot.id}
+      rootQueryKey={rootQueryKey}
+      disableRefresh
+      disableInfinity
+    />
+  )
 }
 
 export default TabSharedToot

src/utils/queryHooks/timeline.ts

@@ -226,6 +226,7 @@ export type MutationVarsTimelineUpdateStatusProperty = {
   // This is status in general, including "status" inside conversation and notification
   type: 'updateStatusProperty'
   queryKey: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   id: Mastodon.Status['id'] | Mastodon.Poll['id']
   reblog?: boolean
   payload:
@@ -264,7 +265,8 @@ export type MutationVarsTimelineDeleteItem = {
   // This is for deleting status and conversation
   type: 'deleteItem'
   source: 'statuses' | 'conversations'
-  queryKey: QueryKeyTimeline
+  queryKey?: QueryKeyTimeline
+  rootQueryKey?: QueryKeyTimeline
   id: Mastodon.Conversation['id']
 }
 
@@ -366,7 +368,7 @@ const useTimelineMutation = ({
   onError?: MutationOptionsTimeline['onError']
   onMutate?: boolean
   onSettled?: MutationOptionsTimeline['onSettled']
-  onSuccess?: MutationOptionsTimeline['onSuccess'] | boolean
+  onSuccess?: MutationOptionsTimeline['onSuccess']
 }) => {
   return useMutation<
     { body: Mastodon.Conversation | Mastodon.Notification | Mastodon.Status },
@@ -375,27 +377,7 @@ const useTimelineMutation = ({
   >(mutationFunction, {
     onError,
     onSettled,
-    ...(typeof onSuccess === 'function'
+    onSuccess,
-      ? { onSuccess }
-      : onSuccess
-      ? {
-          onSuccess: ({ body }, params) => {
-            queryClient.cancelQueries(params.queryKey)
-
-            haptics('Success')
-            switch (params.type) {
-              case 'updateStatusProperty':
-                switch (params.payload.property) {
-                  case 'poll':
-                    params.payload.data = (body as unknown) as Mastodon.Poll
-                    updateStatusProperty({ queryClient, ...params })
-                    break
-                }
-                break
-            }
-          }
-        }
-      : undefined),
     ...(onMutate && {
       onMutate: params => {
         queryClient.cancelQueries(params.queryKey)

src/utils/queryHooks/timeline/deleteItem.ts

@@ -1,24 +1,45 @@
 import { InfiniteData, QueryClient } from 'react-query'
-import { QueryKeyTimeline, TimelineData } from '../timeline'
+import { MutationVarsTimelineDeleteItem } from '../timeline'
 
 const deleteItem = ({
   queryClient,
   queryKey,
+  rootQueryKey,
   id
 }: {
   queryClient: QueryClient
-  queryKey: QueryKeyTimeline
+  queryKey?: MutationVarsTimelineDeleteItem['queryKey']
-  id: Mastodon.Status['id']
+  rootQueryKey?: MutationVarsTimelineDeleteItem['rootQueryKey']
+  id: MutationVarsTimelineDeleteItem['id']
 }) => {
-  queryClient.setQueryData<InfiniteData<any> | undefined>(queryKey, old => {
+  queryKey &&
-    if (old) {
+    queryClient.setQueryData<InfiniteData<any> | undefined>(queryKey, old => {
-      old.pages = old.pages.map(page => {
+      if (old) {
-        page.body = page.body.filter((item: Mastodon.Status) => item.id !== id)
+        old.pages = old.pages.map(page => {
-        return page
+          page.body = page.body.filter(
-      })
+            (item: Mastodon.Status) => item.id !== id
-      return old
+          )
-    }
+          return page
-  })
+        })
+        return old
+      }
+    })
+
+  rootQueryKey &&
+    queryClient.setQueryData<InfiniteData<any> | undefined>(
+      rootQueryKey,
+      old => {
+        if (old) {
+          old.pages = old.pages.map(page => {
+            page.body = page.body.filter(
+              (item: Mastodon.Status) => item.id !== id
+            )
+            return page
+          })
+          return old
+        }
+      }
+    )
 }
 
 export default deleteItem

src/utils/queryHooks/timeline/updateStatusProperty.ts

@@ -11,12 +11,14 @@ import updateStatus from './update/status'
 const updateStatusProperty = ({
   queryClient,
   queryKey,
+  rootQueryKey,
   id,
   reblog,
   payload
 }: {
   queryClient: QueryClient
   queryKey: MutationVarsTimelineUpdateStatusProperty['queryKey']
+  rootQueryKey?: MutationVarsTimelineUpdateStatusProperty['rootQueryKey']
   id: MutationVarsTimelineUpdateStatusProperty['id']
   reblog?: MutationVarsTimelineUpdateStatusProperty['reblog']
   payload: MutationVarsTimelineUpdateStatusProperty['payload']
@@ -72,6 +74,60 @@ const updateStatusProperty = ({
       return old
     }
   )
+
+  rootQueryKey &&
+    queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(
+      rootQueryKey,
+      old => {
+        if (old) {
+          let foundToot = false
+          old.pages = old.pages.map(page => {
+            // Skip rest of the pages if any toot is found
+            if (foundToot) {
+              return page
+            } else {
+              if (
+                typeof (page.body as Mastodon.Conversation[])[0].unread ===
+                'boolean'
+              ) {
+                const items = page.body as Mastodon.Conversation[]
+                const tootIndex = findIndex(items, ['last_status.id', id])
+                if (tootIndex >= 0) {
+                  foundToot = true
+                  updateConversation({ item: items[tootIndex], payload })
+                }
+                return page
+              } else if (
+                typeof (page.body as Mastodon.Notification[])[0].type ===
+                'string'
+              ) {
+                const items = page.body as Mastodon.Notification[]
+                const tootIndex = findIndex(items, ['status.id', id])
+                if (tootIndex >= 0) {
+                  foundToot = true
+                  updateNotification({ item: items[tootIndex], payload })
+                }
+              } else {
+                const items = page.body as Mastodon.Status[]
+                const tootIndex = findIndex(items, [
+                  reblog ? 'reblog.id' : 'id',
+                  id
+                ])
+                // if favouriets page and notifications page, remove the item instead
+                if (tootIndex >= 0) {
+                  foundToot = true
+                  updateStatus({ item: items[tootIndex], reblog, payload })
+                }
+              }
+
+              return page
+            }
+          })
+        }
+
+        return old
+      }
+    )
 }
 
 export default updateStatusProperty