Fixed #446

src/components/Account.tsx

@@ -34,9 +34,11 @@ const ComponentAccount: React.FC<Props> = ({
     <Pressable
       accessibilityRole='button'
       style={{
+        flex: 1,
         paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
         paddingVertical: StyleConstants.Spacing.M,
         flexDirection: 'row',
+        alignSelf: 'flex-start',
         alignItems: 'center'
       }}
       onPress={customOnPress || onPress}

src/components/Parse/HTML.tsx

@@ -207,6 +207,10 @@ const ParseHTML = React.memo(
       expandHint = t('HTML.defaultHint')
     }
 
+    if (disableDetails) {
+      numberOfLines = 4
+    }
+
     const renderNodeCallback = useCallback(
       (node: any, index: any) =>
         renderNode({
@@ -247,7 +251,7 @@ const ParseHTML = React.memo(
 
         return (
           <View style={{ overflow: 'hidden' }}>
-            {typeof totalLines === 'number' || numberOfLines === 1 ? (
+            {(!disableDetails && typeof totalLines === 'number') || numberOfLines === 1 ? (
               <Pressable
                 accessibilityLabel={t('HTML.accessibilityHint')}
                 onPress={() => {

src/components/Timeline/Default.tsx

@@ -16,8 +16,8 @@ import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { uniqBy } from 'lodash'
-import React, { useCallback, useRef } from 'react'
+import React, { useRef } from 'react'
-import { Pressable, View } from 'react-native'
+import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineContextMenu from './Shared/ContextMenu'
 import TimelineFeedback from './Shared/Feedback'
@@ -45,6 +45,10 @@ const TimelineDefault: React.FC<Props> = ({
   disableDetails = false,
   disableOnPress = false
 }) => {
+  if (highlighted) {
+    disableOnPress = true
+  }
+
   const { colors } = useTheme()
   const instanceAccount = useSelector(getInstanceAccount, () => true)
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
@@ -63,19 +67,100 @@ const TimelineDefault: React.FC<Props> = ({
     return <TimelineFiltered phrase={filtered} />
   }
 
-  const onPress = useCallback(() => {
+  const onPress = () => {
     analytics('timeline_default_press', {
       page: queryKey ? queryKey[1].page : origin
     })
-    !disableOnPress &&
+    navigation.push('Tab-Shared-Toot', {
-      !highlighted &&
+      toot: actualStatus,
-      navigation.push('Tab-Shared-Toot', {
+      rootQueryKey: queryKey
-        toot: actualStatus,
+    })
-        rootQueryKey: queryKey
+  }
-      })
-  }, [])
 
-  return (
+  const mainStyle: StyleProp<ViewStyle> = {
+    padding: StyleConstants.Spacing.Global.PagePadding,
+    backgroundColor: colors.backgroundDefault,
+    paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding : 0
+  }
+  const main = () => (
+    <>
+      {item.reblog ? (
+        <TimelineActioned action='reblog' account={item.account} />
+      ) : item._pinned ? (
+        <TimelineActioned action='pinned' account={item.account} />
+      ) : null}
+
+      <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+        <TimelineAvatar
+          queryKey={disableOnPress ? undefined : queryKey}
+          account={actualStatus.account}
+          highlighted={highlighted}
+        />
+        <TimelineHeaderDefault
+          queryKey={disableOnPress ? undefined : queryKey}
+          status={actualStatus}
+          highlighted={highlighted}
+        />
+      </View>
+
+      <View
+        style={{
+          paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+          paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+        }}
+      >
+        {typeof actualStatus.content === 'string' && actualStatus.content.length > 0 ? (
+          <TimelineContent
+            status={actualStatus}
+            highlighted={highlighted}
+            disableDetails={disableDetails}
+          />
+        ) : null}
+        {queryKey && actualStatus.poll ? (
+          <TimelinePoll
+            queryKey={queryKey}
+            rootQueryKey={rootQueryKey}
+            statusId={actualStatus.id}
+            poll={actualStatus.poll}
+            reblog={item.reblog ? true : false}
+            sameAccount={ownAccount}
+          />
+        ) : null}
+        {!disableDetails &&
+        Array.isArray(actualStatus.media_attachments) &&
+        actualStatus.media_attachments.length ? (
+          <TimelineAttachment status={actualStatus} />
+        ) : null}
+        {!disableDetails && actualStatus.card ? <TimelineCard card={actualStatus.card} /> : null}
+        {!disableDetails ? (
+          <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
+        ) : null}
+        <TimelineTranslate status={actualStatus} highlighted={highlighted} />
+        <TimelineFeedback status={actualStatus} highlighted={highlighted} />
+      </View>
+
+      {queryKey && !disableDetails ? (
+        <TimelineActions
+          queryKey={queryKey}
+          rootQueryKey={rootQueryKey}
+          highlighted={highlighted}
+          status={actualStatus}
+          ownAccount={ownAccount}
+          accts={uniqBy(
+            ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
+              .concat(actualStatus.mentions)
+              .filter(d => d?.id !== instanceAccount?.id),
+            d => d?.id
+          ).map(d => d?.acct)}
+          reblog={item.reblog ? true : false}
+        />
+      ) : null}
+    </>
+  )
+
+  return disableOnPress ? (
+    <View style={mainStyle}>{main()}</View>
+  ) : (
     <TimelineContextMenu
       copiableContent={copiableContent}
       status={actualStatus}
@@ -84,86 +169,11 @@ const TimelineDefault: React.FC<Props> = ({
     >
       <Pressable
         accessible={highlighted ? false : true}
-        style={{
+        style={mainStyle}
-          padding: StyleConstants.Spacing.Global.PagePadding,
-          backgroundColor: colors.backgroundDefault,
-          paddingBottom:
-            disableDetails && disableOnPress ? StyleConstants.Spacing.Global.PagePadding : 0
-        }}
         onPress={onPress}
         onLongPress={() => {}}
       >
-        {item.reblog ? (
+        {main()}
-          <TimelineActioned action='reblog' account={item.account} />
-        ) : item._pinned ? (
-          <TimelineActioned action='pinned' account={item.account} />
-        ) : null}
-
-        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
-          <TimelineAvatar
-            queryKey={disableOnPress ? undefined : queryKey}
-            account={actualStatus.account}
-            highlighted={highlighted}
-          />
-          <TimelineHeaderDefault
-            queryKey={disableOnPress ? undefined : queryKey}
-            status={actualStatus}
-            highlighted={highlighted}
-          />
-        </View>
-
-        <View
-          style={{
-            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-            paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-          }}
-        >
-          {typeof actualStatus.content === 'string' && actualStatus.content.length > 0 ? (
-            <TimelineContent
-              status={actualStatus}
-              highlighted={highlighted}
-              disableDetails={disableDetails}
-            />
-          ) : null}
-          {queryKey && actualStatus.poll ? (
-            <TimelinePoll
-              queryKey={queryKey}
-              rootQueryKey={rootQueryKey}
-              statusId={actualStatus.id}
-              poll={actualStatus.poll}
-              reblog={item.reblog ? true : false}
-              sameAccount={ownAccount}
-            />
-          ) : null}
-          {!disableDetails &&
-          Array.isArray(actualStatus.media_attachments) &&
-          actualStatus.media_attachments.length ? (
-            <TimelineAttachment status={actualStatus} />
-          ) : null}
-          {!disableDetails && actualStatus.card ? <TimelineCard card={actualStatus.card} /> : null}
-          {!disableDetails ? (
-            <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
-          ) : null}
-          <TimelineTranslate status={actualStatus} highlighted={highlighted} />
-          <TimelineFeedback status={actualStatus} highlighted={highlighted} />
-        </View>
-
-        {queryKey && !disableDetails ? (
-          <TimelineActions
-            queryKey={queryKey}
-            rootQueryKey={rootQueryKey}
-            highlighted={highlighted}
-            status={actualStatus}
-            ownAccount={ownAccount}
-            accts={uniqBy(
-              ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
-                .concat(actualStatus.mentions)
-                .filter(d => d?.id !== instanceAccount?.id),
-              d => d?.id
-            ).map(d => d?.acct)}
-            reblog={item.reblog ? true : false}
-          />
-        ) : null}
       </Pressable>
     </TimelineContextMenu>
   )

src/components/Timeline/Shared/Card.tsx

@@ -1,24 +1,184 @@
+import ComponentAccount from '@components/Account'
 import analytics from '@components/analytics'
 import GracefullyImage from '@components/GracefullyImage'
 import openLink from '@components/openLink'
 import CustomText from '@components/Text'
+import { matchAccount, matchStatus } from '@helpers/urlMatcher'
 import { useNavigation } from '@react-navigation/native'
+import { useAccountQuery } from '@utils/queryHooks/account'
+import { useSearchQuery } from '@utils/queryHooks/search'
+import { useStatusQuery } from '@utils/queryHooks/status'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
+import { Circle } from 'react-native-animated-spinkit'
+import TimelineDefault from '../Default'
 
 export interface Props {
-  card: Pick<
+  card: Pick<Mastodon.Card, 'url' | 'image' | 'blurhash' | 'title' | 'description'>
-    Mastodon.Card,
-    'url' | 'image' | 'blurhash' | 'title' | 'description'
-  >
 }
 
 const TimelineCard = React.memo(({ card }: Props) => {
   const { colors } = useTheme()
   const navigation = useNavigation()
 
+  const [loading, setLoading] = useState(false)
+  const isStatus = matchStatus(card.url)
+  const [foundStatus, setFoundStatus] = useState<Mastodon.Status>()
+  const isAccount = matchAccount(card.url)
+  const [foundAccount, setFoundAccount] = useState<Mastodon.Account>()
+
+  const searchQuery = useSearchQuery({
+    type: (() => {
+      if (isStatus) return 'statuses'
+      if (isAccount) return 'accounts'
+    })(),
+    term: (() => {
+      if (isStatus) {
+        if (isStatus.sameInstance) {
+          return
+        } else {
+          return card.url
+        }
+      }
+      if (isAccount) {
+        if (isAccount.sameInstance) {
+          if (isAccount.style === 'default') {
+            return
+          } else {
+            return isAccount.username
+          }
+        } else {
+          return card.url
+        }
+      }
+    })(),
+    limit: 1,
+    options: { enabled: false }
+  })
+
+  const statusQuery = useStatusQuery({
+    id: isStatus?.id || '',
+    options: { enabled: false }
+  })
+  useEffect(() => {
+    if (isStatus) {
+      setLoading(true)
+      if (isStatus.sameInstance) {
+        statusQuery
+          .refetch()
+          .then(res => {
+            res.data && setFoundStatus(res.data)
+            setLoading(false)
+          })
+          .catch(() => setLoading(false))
+      } else {
+        searchQuery
+          .refetch()
+          .then(res => {
+            const status = (res.data as any)?.statuses?.[0]
+            status && setFoundStatus(status)
+            setLoading(false)
+          })
+          .catch(() => setLoading(false))
+      }
+    }
+  }, [])
+
+  const accountQuery = useAccountQuery({
+    id: isAccount?.style === 'default' ? isAccount.id : '',
+    options: { enabled: false }
+  })
+  useEffect(() => {
+    if (isAccount) {
+      setLoading(true)
+      if (isAccount.sameInstance && isAccount.style === 'default') {
+        accountQuery
+          .refetch()
+          .then(res => {
+            res.data && setFoundAccount(res.data)
+            setLoading(false)
+          })
+          .catch(() => setLoading(false))
+      } else {
+        searchQuery
+          .refetch()
+          .then(res => {
+            const account = (res.data as any)?.accounts?.[0]
+            account && setFoundAccount(account)
+            setLoading(false)
+          })
+          .catch(() => setLoading(false))
+      }
+    }
+  }, [])
+
+  const cardContent = () => {
+    if (loading) {
+      return (
+        <View
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingVertical: StyleConstants.Spacing.M
+          }}
+        >
+          <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+        </View>
+      )
+    }
+    if (isStatus && foundStatus) {
+      return <TimelineDefault item={foundStatus} disableDetails disableOnPress origin='card' />
+    }
+    if (isAccount && foundAccount) {
+      return <ComponentAccount account={foundAccount} origin='card' />
+    }
+    return (
+      <>
+        {card.image ? (
+          <GracefullyImage
+            uri={{ original: card.image }}
+            blurhash={card.blurhash}
+            style={{ flexBasis: StyleConstants.Font.LineHeight.M * 5 }}
+            imageStyle={{ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}
+          />
+        ) : null}
+        <View style={{ flex: 1, padding: StyleConstants.Spacing.S }}>
+          <CustomText
+            fontStyle='S'
+            numberOfLines={2}
+            style={{
+              marginBottom: StyleConstants.Spacing.XS,
+              color: colors.primaryDefault
+            }}
+            fontWeight='Bold'
+            testID='title'
+          >
+            {card.title}
+          </CustomText>
+          {card.description ? (
+            <CustomText
+              fontStyle='S'
+              numberOfLines={1}
+              style={{
+                marginBottom: StyleConstants.Spacing.XS,
+                color: colors.primaryDefault
+              }}
+              testID='description'
+            >
+              {card.description}
+            </CustomText>
+          ) : null}
+          <CustomText fontStyle='S' numberOfLines={1} style={{ color: colors.secondary }}>
+            {card.url}
+          </CustomText>
+        </View>
+      </>
+    )
+  }
+
   return (
     <Pressable
       accessible
@@ -26,10 +186,10 @@ const TimelineCard = React.memo(({ card }: Props) => {
       style={{
         flex: 1,
         flexDirection: 'row',
-        height: StyleConstants.Font.LineHeight.M * 5,
+        minHeight: isAccount && foundAccount ? undefined : StyleConstants.Font.LineHeight.M * 5,
         marginTop: StyleConstants.Spacing.M,
         borderWidth: StyleSheet.hairlineWidth,
-        borderRadius: 6,
+        borderRadius: StyleConstants.Spacing.S,
         overflow: 'hidden',
         borderColor: colors.border
       }}
@@ -37,51 +197,8 @@ const TimelineCard = React.memo(({ card }: Props) => {
         analytics('timeline_shared_card_press')
         await openLink(card.url, navigation)
       }}
-      testID='base'
+      children={cardContent}
-    >
+    />
-      {card.image ? (
-        <GracefullyImage
-          uri={{ original: card.image }}
-          blurhash={card.blurhash}
-          style={{ flexBasis: StyleConstants.Font.LineHeight.M * 5 }}
-          imageStyle={{ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}
-        />
-      ) : null}
-      <View style={{ flex: 1, padding: StyleConstants.Spacing.S }}>
-        <CustomText
-          fontStyle='S'
-          numberOfLines={2}
-          style={{
-            marginBottom: StyleConstants.Spacing.XS,
-            color: colors.primaryDefault
-          }}
-          fontWeight='Bold'
-          testID='title'
-        >
-          {card.title}
-        </CustomText>
-        {card.description ? (
-          <CustomText
-            fontStyle='S'
-            numberOfLines={1}
-            style={{
-              marginBottom: StyleConstants.Spacing.XS,
-              color: colors.primaryDefault
-            }}
-            testID='description'
-          >
-            {card.description}
-          </CustomText>
-        ) : null}
-        <CustomText
-          fontStyle='S'
-          numberOfLines={1}
-          style={{ color: colors.secondary }}
-        >
-          {card.url}
-        </CustomText>
-      </View>
-    </Pressable>
   )
 })
 

src/components/openLink.ts

@@ -1,24 +1,12 @@
 import apiInstance from '@api/instance'
 import navigationRef from '@helpers/navigationRef'
+import { matchAccount, matchStatus } from '@helpers/urlMatcher'
 import { store } from '@root/store'
 import { SearchResult } from '@utils/queryHooks/search'
-import { getInstanceUrl } from '@utils/slices/instancesSlice'
 import { getSettingsBrowser } from '@utils/slices/settingsSlice'
 import * as Linking from 'expo-linking'
 import * as WebBrowser from 'expo-web-browser'
 
-// https://social.xmflsct.com/web/statuses/105590085754428765 <- default
-// https://social.xmflsct.com/@tooot/105590085754428765 <- pretty
-const matcherStatus = new RegExp(
-  /http[s]?:\/\/(.*)\/(web\/statuses|@.*)\/([0-9]*)/
-)
-
-// https://social.xmflsct.com/web/accounts/14195 <- default
-// https://social.xmflsct.com/@tooot <- pretty
-const matcherAccount = new RegExp(
-  /http[s]?:\/\/(.*)\/(web\/accounts\/([0-9]*)|@.*)/
-)
-
 export let loadingLink = false
 
 const openLink = async (url: string, navigation?: any) => {
@@ -26,10 +14,7 @@ const openLink = async (url: string, navigation?: any) => {
     return
   }
 
-  const handleNavigation = (
+  const handleNavigation = (page: 'Tab-Shared-Toot' | 'Tab-Shared-Account', options: {}) => {
-    page: 'Tab-Shared-Toot' | 'Tab-Shared-Account',
-    options: {}
-  ) => {
     if (navigation) {
       // @ts-ignore
       navigation.push(page, options)
@@ -40,14 +25,10 @@ const openLink = async (url: string, navigation?: any) => {
   }
 
   // If a tooot can be found
-  const matchedStatus = url.match(matcherStatus)
+  const isStatus = matchStatus(url)
-  if (matchedStatus) {
+  if (isStatus) {
-    // If the link in current instance
+    if (isStatus.sameInstance) {
-    const instanceUrl = getInstanceUrl(store.getState())
+      handleNavigation('Tab-Shared-Toot', { toot: { id: isStatus.id } })
-    if (matchedStatus[1] === instanceUrl) {
-      handleNavigation('Tab-Shared-Toot', {
-        toot: { id: matchedStatus[3] }
-      })
       return
     }
 
@@ -71,15 +52,11 @@ const openLink = async (url: string, navigation?: any) => {
   }
 
   // If an account can be found
-  const matchedAccount = url.match(matcherAccount)
+  const isAccount = matchAccount(url)
-  if (matchedAccount) {
+  if (isAccount) {
-    // If the link in current instance
+    if (isAccount.sameInstance) {
-    const instanceUrl = getInstanceUrl(store.getState())
+      if (isAccount.style === 'default' && isAccount.id) {
-    if (matchedAccount[1] === instanceUrl) {
+        handleNavigation('Tab-Shared-Account', { account: isAccount })
-      if (matchedAccount[3] && matchedAccount[3].match(/[0-9]*/)) {
-        handleNavigation('Tab-Shared-Account', {
-          account: { id: matchedAccount[3] }
-        })
         return
       }
     }
@@ -91,7 +68,12 @@ const openLink = async (url: string, navigation?: any) => {
         version: 'v2',
         method: 'get',
         url: 'search',
-        params: { type: 'accounts', q: url, limit: 1, resolve: true }
+        params: {
+          type: 'accounts',
+          q: isAccount.sameInstance && isAccount.style === 'pretty' ? isAccount.username : url,
+          limit: 1,
+          resolve: true
+        }
       })
     } catch {}
     if (response && response.body && response.body.accounts.length) {

src/helpers/urlMatcher.ts

@@ -0,0 +1,50 @@
+import { store } from '@root/store'
+import { getInstanceUrl } from '@utils/slices/instancesSlice'
+
+const matchStatus = (
+  url: string
+): { id: string; style: 'default' | 'pretty'; sameInstance: boolean } | null => {
+  // https://social.xmflsct.com/web/statuses/105590085754428765 <- default
+  // https://social.xmflsct.com/@tooot/105590085754428765 <- pretty
+  const matcherStatus = new RegExp(/(https?:\/\/)?([^\/]+)\/(web\/statuses|@.+)\/([0-9]+)/)
+
+  const matched = url.match(matcherStatus)
+  if (matched) {
+    const hostname = matched[2]
+    const style = matched[3] === 'web/statuses' ? 'default' : 'pretty'
+    const id = matched[4]
+
+    const instanceUrl = getInstanceUrl(store.getState())
+    return { id, style, sameInstance: hostname === instanceUrl }
+  }
+
+  return null
+}
+
+const matchAccount = (
+  url: string
+):
+  | { id: string; style: 'default'; sameInstance: boolean }
+  | { username: string; style: 'pretty'; sameInstance: boolean }
+  | null => {
+  // https://social.xmflsct.com/web/accounts/14195 <- default
+  // https://social.xmflsct.com/web/@tooot <- pretty ! cannot be searched on the same instance
+  // https://social.xmflsct.com/@tooot <- pretty
+  const matcherAccount = new RegExp(/(https?:\/\/)?([^\/]+)(\/web|\/web\/accounts)?\/([0-9]+|@.+)/)
+
+  const matched = url.match(matcherAccount)
+  if (matched) {
+    const hostname = matched[2]
+    const style = matched[4].startsWith('@') ? 'pretty' : 'default'
+    const account = matched[4]
+
+    const instanceUrl = getInstanceUrl(store.getState())
+    return style === 'default'
+      ? { id: account, style, sameInstance: hostname === instanceUrl }
+      : { username: account, style, sameInstance: hostname === instanceUrl }
+  }
+
+  return null
+}
+
+export { matchStatus, matchAccount }

src/utils/queryHooks/status.ts

@@ -0,0 +1,26 @@
+import apiInstance from '@api/instance'
+import { AxiosError } from 'axios'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+
+export type QueryKeyStatus = ['Status', { id: Mastodon.Status['id'] }]
+
+const queryFunction = ({ queryKey }: QueryFunctionContext<QueryKeyStatus>) => {
+  const { id } = queryKey[1]
+
+  return apiInstance<Mastodon.Status>({
+    method: 'get',
+    url: `statuses/${id}`
+  }).then(res => res.body)
+}
+
+const useStatusQuery = ({
+  options,
+  ...queryKeyParams
+}: QueryKeyStatus[1] & {
+  options?: UseQueryOptions<Mastodon.Status, AxiosError>
+}) => {
+  const queryKey: QueryKeyStatus = ['Status', { ...queryKeyParams }]
+  return useQuery(queryKey, queryFunction, options)
+}
+
+export { useStatusQuery }