Actions working for #638

src/components/Timeline/Shared/Actions.tsx

@@ -113,6 +113,7 @@ const TimelineActions: React.FC = () => {
                 rootQueryKey,
                 id: status.id,
                 isReblog: !!reblogStatus,
+                fetchRemoteURI: status._remote ? status.uri : undefined,
                 payload: {
                   property: 'reblogged',
                   currentValue: status.reblogged,
@@ -129,6 +130,7 @@ const TimelineActions: React.FC = () => {
                 rootQueryKey,
                 id: status.id,
                 isReblog: !!reblogStatus,
+                fetchRemoteURI: status._remote ? status.uri : undefined,
                 payload: {
                   property: 'reblogged',
                   currentValue: status.reblogged,
@@ -148,6 +150,7 @@ const TimelineActions: React.FC = () => {
         rootQueryKey,
         id: status.id,
         isReblog: !!reblogStatus,
+        fetchRemoteURI: status._remote ? status.uri : undefined,
         payload: {
           property: 'reblogged',
           currentValue: status.reblogged,
@@ -165,6 +168,7 @@ const TimelineActions: React.FC = () => {
       rootQueryKey,
       id: status.id,
       isReblog: !!reblogStatus,
+      fetchRemoteURI: status._remote ? status.uri : undefined,
       payload: {
         property: 'favourited',
         currentValue: status.favourited,
@@ -180,6 +184,7 @@ const TimelineActions: React.FC = () => {
       rootQueryKey,
       id: status.id,
       isReblog: !!reblogStatus,
+      fetchRemoteURI: status._remote ? status.uri : undefined,
       payload: {
         property: 'bookmarked',
         currentValue: status.bookmarked,

src/screens/Compose/index.tsx

@@ -7,11 +7,10 @@ import ComposeRoot from '@screens/Compose/Root'
 import { formatText } from '@screens/Compose/utils/processText'
 import { useQueryClient } from '@tanstack/react-query'
 import { handleError } from '@utils/api/helpers'
-import apiInstance from '@utils/api/instance'
 import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { useInstanceQuery } from '@utils/queryHooks/instance'
 import { usePreferencesQuery } from '@utils/queryHooks/preferences'
-import { SearchResult } from '@utils/queryHooks/search'
+import { searchFetchToot, SearchResult } from '@utils/queryHooks/search'
 import { useTimelineMutation } from '@utils/queryHooks/timeline'
 import {
   getAccountStorage,
@@ -157,23 +156,11 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
             content: params.accts.map(acct => `@${acct}`).join(' ') + ' ',
             disableDebounce: true
           })
-        apiInstance<SearchResult>({
+        searchFetchToot(params.incomingStatus.uri).then(status => {
-          version: 'v2',
+          if (status?.uri === params.incomingStatus.uri) {
-          method: 'get',
+            composeDispatch({ type: 'updateReply', payload: status })
-          url: 'search',
-          params: {
-            q: params.incomingStatus.uri,
-            type: 'statuses',
-            limit: 1,
-            resolve: true
           }
         })
-          .then(res => {
-            if (res.body.statuses[0]?.uri === params.incomingStatus.uri) {
-              composeDispatch({ type: 'updateReply', payload: res.body.statuses[0] })
-            }
-          })
-          .catch(() => {})
         break
       case 'conversation':
         formatText({

src/screens/Tabs/Shared/Toot.tsx

@@ -59,7 +59,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
 
   const finalData = useRef<Mastodon.Status[]>([{ ...toot, _level: 0, _remote: false }])
   const highlightIndex = useRef<number>(0)
-  const queryKey: { [key: string]: QueryKeyTimeline } = {
+  const queryKey: { local: QueryKeyTimeline; remote: QueryKeyTimeline } = {
     local: ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
     remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
   }
@@ -199,7 +199,12 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
         if (finalData.current?.length < data.pages[0].body.length) {
           finalData.current = data.pages[0].body.map(remote => {
             const localMatch = finalData.current?.find(local => local.uri === remote.uri)
-            return localMatch || { ...remote, _remote: true }
+            if (localMatch) {
+              return localMatch
+            } else {
+              remote._remote = true
+              return remote
+            }
           })
           setHasRemoteContent(true)
         }
@@ -302,7 +307,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
           >
             <TimelineDefault
               item={item}
-              queryKey={queryKey.local}
+              queryKey={item._remote ? queryKey.remote : queryKey.local}
               rootQueryKey={rootQueryKey}
               highlighted={toot.id === item.id}
               isConversation={toot.id !== item.id}

src/utils/queryHooks/search.ts

@@ -46,4 +46,19 @@ const useSearchQuery = <T = SearchResult>({
   return useQuery(queryKey, queryFunction, options)
 }
 
+export const searchFetchToot = (uri: Mastodon.Status['uri']): Promise<Mastodon.Status | void> =>
+  apiInstance<SearchResult>({
+    version: 'v2',
+    method: 'get',
+    url: 'search',
+    params: {
+      q: uri,
+      type: 'statuses',
+      limit: 1,
+      resolve: true
+    }
+  })
+    .then(res => res.body.statuses[0])
+    .catch(() => {})
+
 export { useSearchQuery }

src/utils/queryHooks/timeline.ts

@@ -4,9 +4,7 @@ import {
   QueryFunctionContext,
   useInfiniteQuery,
   UseInfiniteQueryOptions,
-  useMutation,
+  useMutation
-  useQuery,
-  UseQueryOptions
 } from '@tanstack/react-query'
 import { PagedResponse } from '@utils/api/helpers'
 import apiInstance from '@utils/api/instance'
@@ -15,6 +13,7 @@ import queryClient from '@utils/queryHooks'
 import { getAccountStorage } from '@utils/storage/actions'
 import { AxiosError } from 'axios'
 import { uniqBy } from 'lodash'
+import { searchFetchToot } from './search'
 import deleteItem from './timeline/deleteItem'
 import editItem from './timeline/editItem'
 import updateStatusProperty from './timeline/updateStatusProperty'
@@ -251,6 +250,7 @@ export type MutationVarsTimelineUpdateStatusProperty = {
   rootQueryKey?: QueryKeyTimeline
   id: Mastodon.Status['id'] | Mastodon.Poll['id']
   isReblog?: boolean
+  fetchRemoteURI?: Mastodon.Status['uri']
   payload:
     | {
         property: 'bookmarked' | 'muted' | 'pinned'
@@ -344,13 +344,22 @@ const mutationFunction = async (params: MutationVarsTimeline) => {
             ...(params.payload.type === 'vote' && { body: formData })
           })
         default:
+          let tootId = params.id
+          if (params.fetchRemoteURI) {
+            const fetched = await searchFetchToot(params.fetchRemoteURI)
+            if (fetched) {
+              tootId = fetched.id
+            } else {
+              return Promise.reject()
+            }
+          }
           const body = new FormData()
           if (params.payload.property === 'reblogged') {
             body.append('visibility', params.payload.visibility)
           }
           return apiInstance<Mastodon.Status>({
             method: 'post',
-            url: `statuses/${params.id}/${params.payload.currentValue ? 'un' : ''}${
+            url: `statuses/${tootId}/${params.payload.currentValue ? 'un' : ''}${
               MapPropertyToUrl[params.payload.property]
             }`,
             ...(params.payload.property === 'reblogged' && { body })