Fix searching for remote accounts

src/api/general.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { ctx, handleError, userAgent } from './helpers'
+import { ctx, handleError, PagedResponse, userAgent } from './helpers'
 
 export type Params = {
   method: 'get' | 'post' | 'put' | 'delete'
@@ -19,7 +19,7 @@ const apiGeneral = async <T = unknown>({
   params,
   headers,
   body
-}: Params): Promise<{ body: T }> => {
+}: Params): Promise<PagedResponse<T>> => {
   console.log(
     ctx.bgGreen.bold(' API general ') +
       ' ' +

src/api/helpers/index.ts

@@ -63,4 +63,10 @@ const handleError =
     }
   }
 
+type LinkFormat = { id: string; isOffset: boolean }
+export type PagedResponse<T = unknown> = {
+  body: T
+  links: { prev?: LinkFormat; next?: LinkFormat }
+}
+
 export { ctx, handleError, userAgent }

src/api/instance.ts

@@ -1,6 +1,6 @@
 import { RootState } from '@root/store'
 import axios, { AxiosRequestConfig } from 'axios'
-import { ctx, handleError, userAgent } from './helpers'
+import { ctx, handleError, PagedResponse, userAgent } from './helpers'
 
 export type Params = {
   method: 'get' | 'post' | 'put' | 'delete' | 'patch'
@@ -14,12 +14,6 @@ export type Params = {
   extras?: Omit<AxiosRequestConfig, 'method' | 'url' | 'params' | 'headers' | 'data'>
 }
 
-type LinkFormat = { id: string; isOffset: boolean }
-export type InstanceResponse<T = unknown> = {
-  body: T
-  links: { prev?: LinkFormat; next?: LinkFormat }
-}
-
 const apiInstance = async <T = unknown>({
   method,
   version = 'v1',
@@ -28,7 +22,7 @@ const apiInstance = async <T = unknown>({
   headers,
   body,
   extras
-}: Params): Promise<InstanceResponse<T>> => {
+}: Params): Promise<PagedResponse<T>> => {
   const { store } = require('@root/store')
   const state = store.getState() as RootState
   const instanceActive = state.instances.instances.findIndex(instance => instance.active)

src/screens/Compose.tsx

@@ -286,7 +286,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                     type: 'editItem',
                     queryKey: params.queryKey,
                     rootQueryKey: params.rootQueryKey,
-                    status: res.body
+                    status: res
                   })
                   break
                 case 'deleteEdit':

src/screens/Compose/utils/post.ts

@@ -1,4 +1,4 @@
-import apiInstance, { InstanceResponse } from '@api/instance'
+import apiInstance from '@api/instance'
 import detectLanguage from '@helpers/detectLanguage'
 import { ComposeState } from '@screens/Compose/utils/types'
 import { RootStackParamList } from '@utils/navigation/navigators'
@@ -8,7 +8,7 @@ import { getPureContent } from './processText'
 const composePost = async (
   params: RootStackParamList['Screen-Compose'],
   composeState: ComposeState
-): Promise<InstanceResponse<Mastodon.Status>> => {
+): Promise<Mastodon.Status> => {
   const formData = new FormData()
 
   const detectedLanguage = await detectLanguage(
@@ -74,7 +74,7 @@ const composePost = async (
       )
     },
     body: formData
-  })
+  }).then(res => res.body)
 }
 
 export default composePost

src/screens/Tabs/Shared/Users.tsx

@@ -1,15 +1,18 @@
+import apiInstance from '@api/instance'
 import ComponentAccount from '@components/Account'
 import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
+import { SearchResult } from '@utils/queryHooks/search'
 import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
+import { Circle, Flow } from 'react-native-animated-spinkit'
 import { FlatList } from 'react-native-gesture-handler'
 
 const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
@@ -26,7 +29,7 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
   }, [])
 
   const queryKey: QueryKeyUsers = ['Users', params]
-  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({
+  const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({
     ...queryKey[1],
     options: {
       getPreviousPageParam: firstPage =>
@@ -41,17 +44,67 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
     [hasNextPage, isFetchingNextPage]
   )
 
+  const [isSearching, setIsSearching] = useState(false)
+
   return (
     <FlatList
       windowSize={7}
       data={flattenData}
       style={{
-        minHeight: '100%'
+        minHeight: '100%',
+        paddingVertical: StyleConstants.Spacing.Global.PagePadding
       }}
-      renderItem={({ item }) => <ComponentAccount account={item} />}
+      renderItem={({ item }) => (
+        <ComponentAccount
+          account={item}
+          props={{
+            disabled: isSearching,
+            onPress: () => {
+              if (data?.pages[0]?.remoteData) {
+                setIsSearching(true)
+                apiInstance<SearchResult>({
+                  version: 'v2',
+                  method: 'get',
+                  url: 'search',
+                  params: {
+                    q: `@${item.acct}`,
+                    type: 'accounts',
+                    limit: 1,
+                    resolve: true
+                  }
+                })
+                  .then(res => {
+                    setIsSearching(false)
+                    if (res.body.accounts[0]) {
+                      navigation.push('Tab-Shared-Account', { account: res.body.accounts[0] })
+                    }
+                  })
+                  .catch(() => setIsSearching(false))
+              } else {
+                navigation.push('Tab-Shared-Account', { account: item })
+              }
+            }
+          }}
+          children={<Flow size={StyleConstants.Font.Size.L} color={colors.secondary} />}
+        />
+      )}
       onEndReached={onEndReached}
       onEndReachedThreshold={0.75}
       ItemSeparatorComponent={ComponentSeparator}
+      ListEmptyComponent={
+        isFetching ? (
+          <View
+            style={{
+              flex: 1,
+              minHeight: '100%',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}
+          >
+            <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+          </View>
+        ) : null
+      }
       maintainVisibleContentPosition={{
         minIndexForVisible: 0,
         autoscrollToTopThreshold: 2

src/utils/queryHooks/lists.ts

@@ -1,4 +1,4 @@
-import apiInstance, { InstanceResponse } from '@api/instance'
+import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
 import {
   QueryFunctionContext,
@@ -9,6 +9,7 @@ import {
   useQuery,
   UseQueryOptions
 } from '@tanstack/react-query'
+import { PagedResponse } from '@api/helpers'
 
 export type QueryKeyLists = ['Lists']
 
@@ -97,7 +98,7 @@ const useListAccountsQuery = ({
   options,
   ...queryKeyParams
 }: QueryKeyListAccounts[1] & {
-  options?: UseInfiniteQueryOptions<InstanceResponse<Mastodon.Account[]>, AxiosError>
+  options?: UseInfiniteQueryOptions<PagedResponse<Mastodon.Account[]>, AxiosError>
 }) => {
   const queryKey: QueryKeyListAccounts = ['ListAccounts', queryKeyParams]
   return useInfiniteQuery(queryKey, accountsQueryFunction, options)

src/utils/queryHooks/search.ts

@@ -17,17 +17,18 @@ export type SearchResult = {
   statuses: Mastodon.Status[]
 }
 
-const queryFunction = async ({
+const queryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeySearch>) => {
-  queryKey
-}: QueryFunctionContext<QueryKeySearch>) => {
   const { type, term, limit = 20 } = queryKey[1]
+  if (!term?.length) {
+    return Promise.reject()
+  }
   const res = await apiInstance<SearchResult>({
     version: 'v2',
     method: 'get',
     url: 'search',
     params: {
+      q: term,
       ...(type && { type }),
-      ...(term && { q: term }),
       limit,
       resolve: true
     }
@@ -35,7 +36,7 @@ const queryFunction = async ({
   return res.body
 }
 
-const useSearchQuery = <T = unknown>({
+const useSearchQuery = <T = SearchResult>({
   options,
   ...queryKeyParams
 }: QueryKeySearch[1] & {

src/utils/queryHooks/tags.ts

@@ -1,4 +1,4 @@
-import apiInstance, { InstanceResponse } from '@api/instance'
+import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
 import {
   QueryFunctionContext,
@@ -10,12 +10,13 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query'
 import { infinitePageParams } from './utils'
+import { PagedResponse } from '@api/helpers'
 
 export type QueryKeyFollowedTags = ['FollowedTags']
 const useFollowedTagsQuery = (
   params: {
     options?: Omit<
-      UseInfiniteQueryOptions<InstanceResponse<Mastodon.Tag[]>, AxiosError>,
+      UseInfiniteQueryOptions<PagedResponse<Mastodon.Tag[]>, AxiosError>,
       'getPreviousPageParam' | 'getNextPageParam'
     >
   } | void

src/utils/queryHooks/timeline.ts

@@ -1,4 +1,4 @@
-import apiInstance, { InstanceResponse } from '@api/instance'
+import apiInstance from '@api/instance'
 import haptics from '@components/haptics'
 import queryClient from '@helpers/queryClient'
 import { store } from '@root/store'
@@ -15,6 +15,7 @@ import {
 import deleteItem from './timeline/deleteItem'
 import editItem from './timeline/editItem'
 import updateStatusProperty from './timeline/updateStatusProperty'
+import { PagedResponse } from '@api/helpers'
 
 export type QueryKeyTimeline = [
   'Timeline',
@@ -240,7 +241,7 @@ const useTimelineQuery = ({
   options,
   ...queryKeyParams
 }: QueryKeyTimeline[1] & {
-  options?: UseInfiniteQueryOptions<InstanceResponse<Mastodon.Status[]>, AxiosError>
+  options?: UseInfiniteQueryOptions<PagedResponse<Mastodon.Status[]>, AxiosError>
 }) => {
   const queryKey: QueryKeyTimeline = ['Timeline', { ...queryKeyParams }]
   return useInfiniteQuery(queryKey, queryFunction, {

src/utils/queryHooks/users.ts

@@ -1,4 +1,4 @@
-import apiInstance, { InstanceResponse } from '@api/instance'
+import apiInstance from '@api/instance'
 import { TabSharedStackParamList } from '@utils/navigation/navigators'
 import { AxiosError } from 'axios'
 import {
@@ -7,10 +7,15 @@ import {
   UseInfiniteQueryOptions
 } from '@tanstack/react-query'
 import apiGeneral from '@api/general'
+import { PagedResponse } from '@api/helpers'
 
 export type QueryKeyUsers = ['Users', TabSharedStackParamList['Tab-Shared-Users']]
 
-const queryFunction = ({ queryKey, pageParam }: QueryFunctionContext<QueryKeyUsers>) => {
+const queryFunction = async ({
+  queryKey,
+  pageParam,
+  meta
+}: QueryFunctionContext<QueryKeyUsers>) => {
   const page = queryKey[1]
   let params: { [key: string]: string } = { ...pageParam }
 
@@ -20,7 +25,7 @@ const queryFunction = ({ queryKey, pageParam }: QueryFunctionContext<QueryKeyUse
         method: 'get',
         url: `${page.reference}/${page.status.id}/${page.type}`,
         params
-      }).then(res => ({ ...res, warnIncomplete: false }))
+      })
     case 'accounts':
       const localInstance = page.account.username === page.account.acct
       if (localInstance) {
@@ -28,59 +33,47 @@ const queryFunction = ({ queryKey, pageParam }: QueryFunctionContext<QueryKeyUse
           method: 'get',
           url: `${page.reference}/${page.account.id}/${page.type}`,
           params
-        }).then(res => ({ ...res, warnIncomplete: false }))
+        })
       } else {
-        const domain = page.account.url.match(
+        let res: PagedResponse<Mastodon.Account[]>
-          /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/\n]+)/i
+
-        )?.[1]
+        try {
-        if (!domain) {
+          const domain = page.account.url.match(
-          return apiInstance<Mastodon.Account[]>({
+            /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/\n]+)/i
+          )?.[1]
+          if (!domain?.length) {
+            throw new Error()
+          }
+
+          const resSearch = await apiGeneral<{ accounts: Mastodon.Account[] }>({
+            method: 'get',
+            domain,
+            url: 'api/v2/search',
+            params: {
+              q: `@${page.account.acct}`,
+              type: 'accounts',
+              limit: '1'
+            }
+          })
+          if (resSearch?.body?.accounts?.length === 1) {
+            res = await apiGeneral<Mastodon.Account[]>({
+              method: 'get',
+              domain,
+              url: `api/v1/${page.reference}/${resSearch.body.accounts[0].id}/${page.type}`,
+              params
+            })
+            return { ...res, remoteData: true }
+          } else {
+            throw new Error()
+          }
+        } catch {
+          res = await apiInstance<Mastodon.Account[]>({
             method: 'get',
             url: `${page.reference}/${page.account.id}/${page.type}`,
             params
-          }).then(res => ({ ...res, warnIncomplete: true }))
+          })
+          return { ...res, warnIncomplete: true }
         }
-        return apiGeneral<{ accounts: Mastodon.Account[] }>({
-          method: 'get',
-          domain,
-          url: 'api/v2/search',
-          params: {
-            q: `@${page.account.acct}`,
-            type: 'accounts',
-            limit: '1'
-          }
-        })
-          .then(res => {
-            if (res?.body?.accounts?.length === 1) {
-              return apiGeneral<Mastodon.Account[]>({
-                method: 'get',
-                domain,
-                url: `api/v1/${page.reference}/${res.body.accounts[0].id}/${page.type}`,
-                params
-              })
-                .catch(() => {
-                  return apiInstance<Mastodon.Account[]>({
-                    method: 'get',
-                    url: `${page.reference}/${page.account.id}/${page.type}`,
-                    params
-                  }).then(res => ({ ...res, warnIncomplete: true }))
-                })
-                .then(res => ({ ...res, warnIncomplete: false }))
-            } else {
-              return apiInstance<Mastodon.Account[]>({
-                method: 'get',
-                url: `${page.reference}/${page.account.id}/${page.type}`,
-                params
-              }).then(res => ({ ...res, warnIncomplete: true }))
-            }
-          })
-          .catch(() => {
-            return apiInstance<Mastodon.Account[]>({
-              method: 'get',
-              url: `${page.reference}/${page.account.id}/${page.type}`,
-              params
-            }).then(res => ({ ...res, warnIncomplete: true }))
-          })
       }
   }
 }
@@ -90,7 +83,7 @@ const useUsersQuery = ({
   ...queryKeyParams
 }: QueryKeyUsers[1] & {
   options?: UseInfiniteQueryOptions<
-    InstanceResponse<Mastodon.Account[]> & { warnIncomplete: boolean },
+    PagedResponse<Mastodon.Account[]> & { warnIncomplete: boolean; remoteData: boolean },
     AxiosError
   >
 }) => {

src/utils/queryHooks/utils.ts

@@ -1,8 +1,8 @@
-import { InstanceResponse } from '@api/instance'
+import { PagedResponse } from '@api/helpers'
 
 export const infinitePageParams = {
-  getPreviousPageParam: (firstPage: InstanceResponse<any>) =>
+  getPreviousPageParam: (firstPage: PagedResponse<any>) =>
     firstPage.links?.prev && { min_id: firstPage.links.next },
-  getNextPageParam: (lastPage: InstanceResponse<any>) =>
+  getNextPageParam: (lastPage: PagedResponse<any>) =>
     lastPage.links?.next && { max_id: lastPage.links.next }
 }