Added notes to #608

Not yet able to edit

src/screens/Tabs/Shared/Account/Context.tsx

@@ -2,6 +2,7 @@ import { createContext } from 'react'
 
 type AccountContextType = {
   account?: Mastodon.Account
+  relationship?: Mastodon.Relationship
   pageMe?: boolean
 }
 const AccountContext = createContext<AccountContextType>({} as AccountContextType)

src/screens/Tabs/Shared/Account/Information.tsx

@@ -1,4 +1,3 @@
-import { useRoute } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@@ -11,16 +10,19 @@ import AccountInformationCreated from './Information/Created'
 import AccountInformationFields from './Information/Fields'
 import AccountInformationName from './Information/Name'
 import AccountInformationNote from './Information/Note'
+import AccountInformationPrivateNote from './Information/PrivateNotes'
 import AccountInformationStats from './Information/Stats'
 
 const AccountInformation: React.FC = () => {
   const { colors } = useTheme()
 
-  const { name } = useRoute()
-  const myInfo = name !== 'Tab-Shared-Account'
-
   return (
-    <View style={styles.base}>
+    <View
+      style={{
+        marginTop: -StyleConstants.Avatar.L / 2,
+        padding: StyleConstants.Spacing.Global.PagePadding
+      }}
+    >
       <Placeholder
         Animation={props => (
           <Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
@@ -35,6 +37,8 @@ const AccountInformation: React.FC = () => {
 
         <AccountInformationAccount />
 
+        <AccountInformationPrivateNote />
+
         <AccountInformationFields />
 
         <AccountInformationNote />

src/screens/Tabs/Shared/Account/Information/Account.tsx

@@ -1,6 +1,5 @@
 import Icon from '@components/Icon'
 import CustomText from '@components/Text'
-import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { getAccountStorage, useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -11,7 +10,7 @@ import { PlaceholderLine } from 'rn-placeholder'
 import AccountContext from '../Context'
 
 const AccountInformationAccount: React.FC = () => {
-  const { account, pageMe } = useContext(AccountContext)
+  const { account, relationship, pageMe } = useContext(AccountContext)
 
   const { t } = useTranslation('screenTabs')
   const { colors } = useTheme()
@@ -19,8 +18,6 @@ const AccountInformationAccount: React.FC = () => {
   const [acct] = useAccountStorage.string('auth.account.acct')
   const domain = getAccountStorage.string('auth.account.domain')
 
-  const { data: relationship } = useRelationshipQuery({ id: account?.id })
-
   const localInstance = account?.acct.includes('@') ? account?.acct.includes(`@${domain}`) : true
 
   if (account || pageMe) {

src/screens/Tabs/Shared/Account/Information/Actions.tsx

@@ -2,7 +2,6 @@ import Button from '@components/Button'
 import menuAt from '@components/contextMenu/at'
 import { RelationshipOutgoing } from '@components/Relationship'
 import { useNavigation } from '@react-navigation/native'
-import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import React, { useContext } from 'react'
@@ -12,7 +11,7 @@ import * as DropdownMenu from 'zeego/dropdown-menu'
 import AccountContext from '../Context'
 
 const AccountInformationActions: React.FC = () => {
-  const { account, pageMe } = useContext(AccountContext)
+  const { account, relationship, pageMe } = useContext(AccountContext)
 
   if (!account || account.suspended) {
     return null
@@ -50,13 +49,12 @@ const AccountInformationActions: React.FC = () => {
   const [accountId] = useAccountStorage.string('auth.account.id')
   const ownAccount = account?.id === accountId
 
-  const query = useRelationshipQuery({ id: account.id })
   const mAt = menuAt({ account })
 
   if (!ownAccount && account) {
     return (
       <View style={styles.base}>
-        {query.data && !query.data.blocked_by ? (
+        {relationship && !relationship.blocked_by ? (
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               <Button

src/screens/Tabs/Shared/Account/Information/PrivateNotes.tsx

@@ -0,0 +1,28 @@
+import { ParseHTML } from '@components/Parse'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext } from 'react'
+import { View } from 'react-native'
+import AccountContext from '../Context'
+
+const AccountInformationPrivateNote: React.FC = () => {
+  const { relationship, pageMe } = useContext(AccountContext)
+  if (pageMe) return null
+
+  const { colors } = useTheme()
+
+  return relationship?.note ? (
+    <View
+      style={{
+        marginBottom: StyleConstants.Spacing.L,
+        borderLeftColor: colors.border,
+        borderLeftWidth: StyleConstants.Spacing.XS,
+        paddingLeft: StyleConstants.Spacing.S
+      }}
+    >
+      <ParseHTML content={relationship.note} size={'S'} selectable numberOfLines={2} />
+    </View>
+  ) : null
+}
+
+export default AccountInformationPrivateNote

src/screens/Tabs/Shared/Account/index.tsx

@@ -7,6 +7,7 @@ import SegmentedControl from '@react-native-community/segmented-control'
 import { useQueryClient } from '@tanstack/react-query'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useAccountQuery } from '@utils/queryHooks/account'
+import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -51,6 +52,10 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
       onError: () => navigation.goBack()
     }
   })
+  const { data: dataRelationship } = useRelationshipQuery({
+    id: account._remote ? data?.id : account.id,
+    options: { enabled: account._remote ? !!data?.id : true }
+  })
 
   const queryClient = useQueryClient()
   const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
@@ -223,7 +228,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
   }, [segment, dataUpdatedAt, mode])
 
   return (
-    <AccountContext.Provider value={{ account: data }}>
+    <AccountContext.Provider value={{ account: data, relationship: dataRelationship }}>
       <AccountNav scrollY={scrollY} />
 
       {data?.suspended ? (