Fix #608

fastlane/metadata/en-US/release_notes.txt

@@ -1,2 +1,3 @@
 Enjoy toooting! This version includes following improvements and fixes:
-- Added following remote instance
+- Added following remote instance
+- Added set note of followed users

fastlane/metadata/zh-Hans/release_notes.txt

@@ -1,2 +1,3 @@
 toooting愉快！此版本包括以下改进和修复：
-- 新增关注远程实例功能
+- 新增关注远程实例功能
+- 新增关注用户备注功能

src/components/Relationship/Outgoing.tsx

@@ -29,20 +29,20 @@ const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
   const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
   const queryClient = useQueryClient()
   const mutation = useRelationshipMutation({
-    onSuccess: (res, { payload: { action } }) => {
+    onSuccess: (res, vars) => {
       haptics('Success')
       queryClient.setQueryData<Mastodon.Relationship[]>(queryKeyRelationship, [res])
-      if (action === 'block') {
+      if (vars.type === 'outgoing' && vars.payload.action === 'block') {
         const queryKey = ['Timeline', { page: 'Following' }]
         queryClient.invalidateQueries({ queryKey, exact: false })
       }
     },
-    onError: (err: any, { payload: { action } }) => {
+    onError: (err: any, vars) => {
       displayMessage({
         theme,
         type: 'error',
         message: t('common:message.error.message', {
-          function: t(`componentRelationship:${action}.function` as any)
+          function: t(`componentRelationship:${(vars.payload as any).action}.function` as any)
         }),
         ...(err.status &&
           typeof err.status === 'number' &&

src/components/contextMenu/account.ts

@@ -105,21 +105,21 @@ const menuAccount = ({
   })
   const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id: actualAccount?.id }]
   const relationshipMutation = useRelationshipMutation({
-    onSuccess: (res, { payload: { action } }) => {
+    onSuccess: (res, vars) => {
       haptics('Success')
       queryClient.setQueryData<Mastodon.Relationship[]>(queryKeyRelationship, [res])
-      if (action === 'block') {
+      if (vars.type === 'outgoing' && vars.payload.action === 'block') {
         queryClient.invalidateQueries({
           queryKey: ['Timeline', { page: 'Following' }],
           exact: false
         })
       }
     },
-    onError: (err: any, { payload: { action } }) => {
+    onError: (err: any, vars) => {
       displayMessage({
         type: 'danger',
         message: t('common:message.error.message', {
-          function: t(`componentContextMenu:${action}.function` as any)
+          function: t(`componentContextMenu:${(vars.payload as any).action}.function` as any)
         }),
         ...(err.status &&
           typeof err.status === 'number' &&

src/i18n/en/screens/tabs.json

@@ -386,6 +386,7 @@
         "accessibilityHint": "You can mute, block, report or share this user"
       },
       "followed_by": " is following you",
+      "privateNote": "Set private note",
       "moved": "User moved",
       "created_at": "Joined: {{date}}",
       "summary": {

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

@@ -1,27 +1,147 @@
-import { ParseHTML } from '@components/Parse'
+import Button from '@components/Button'
+import { discardConfirmation } from '@components/discardConfirmation'
+import Icon from '@components/Icon'
+import CustomText from '@components/Text'
+import { queryClient } from '@utils/queryHooks'
+import { QueryKeyRelationship, useRelationshipMutation } from '@utils/queryHooks/relationship'
 import { StyleConstants } from '@utils/styles/constants'
+import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext } from 'react'
-import { View } from 'react-native'
+import React, { useContext, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Pressable, TextInput, View } from 'react-native'
 import AccountContext from '../Context'
 
 const AccountInformationPrivateNote: React.FC = () => {
   const { relationship, pageMe } = useContext(AccountContext)
-  if (pageMe) return null
+  if (!relationship || pageMe) return null
 
-  const { colors } = useTheme()
+  const { colors, mode } = useTheme()
+  const { t } = useTranslation(['common', 'screenTabs'])
 
-  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>
+  const [editing, setEditing] = useState(false)
+  const [notes, setNotes] = useState(relationship?.note)
+
+  const queryKey: QueryKeyRelationship = ['Relationship', { id: relationship.id }]
+  const mutation = useRelationshipMutation({
+    onMutate: async vars => {
+      await queryClient.cancelQueries({ queryKey })
+      queryClient.setQueryData<Mastodon.Relationship[]>(queryKey, old => {
+        return old
+          ? vars.type === 'note'
+            ? old.map(o => (o.id === relationship.id ? { ...o, note: notes } : o))
+            : old
+          : undefined
+      })
+    },
+    onError: () => {
+      queryClient.invalidateQueries(queryKey)
+    }
+  })
+  const submit = () => {
+    mutation.mutate({ id: relationship.id, type: 'note', payload: notes || '' })
+    setEditing(!editing)
+    layoutAnimation()
+  }
+
+  return relationship?.following ? (
+    editing ? (
+      <View
+        style={{
+          marginBottom: StyleConstants.Spacing.L,
+          padding: StyleConstants.Spacing.Global.PagePadding,
+          borderWidth: 1,
+          borderRadius: StyleConstants.BorderRadius,
+          borderColor: colors.border
+        }}
+      >
+        <TextInput
+          style={{
+            flex: 1,
+            borderBottomWidth: 1,
+            ...StyleConstants.FontStyle.M,
+            color: colors.primaryDefault,
+            borderBottomColor: colors.border,
+            paddingVertical: StyleConstants.Spacing.S
+          }}
+          value={notes}
+          onChangeText={setNotes}
+          multiline
+          textAlignVertical='top'
+          clearButtonMode='never'
+          onSubmitEditing={() => submit()}
+          placeholder={t('screenTabs:shared.account.privateNote')}
+          placeholderTextColor={colors.secondary}
+          returnKeyType='done'
+          keyboardAppearance={mode}
+          autoFocus
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            marginTop: StyleConstants.Spacing.M,
+            gap: StyleConstants.Spacing.S
+          }}
+        >
+          <Button
+            type='text'
+            content={t('common:buttons.cancel')}
+            onPress={() => {
+              discardConfirmation({
+                condition: notes != relationship?.note,
+                action: () => {
+                  setEditing(false)
+                  layoutAnimation()
+                }
+              })
+            }}
+          />
+          <Button type='text' content={t('common:buttons.confirm')} onPress={() => submit()} />
+        </View>
+      </View>
+    ) : (
+      <Pressable
+        style={{
+          marginBottom: StyleConstants.Spacing.L,
+          borderLeftColor: colors.border,
+          borderLeftWidth: StyleConstants.Spacing.XS,
+          flexDirection: 'row',
+          alignItems: 'center'
+        }}
+        onPress={() => {
+          setEditing(!editing)
+          layoutAnimation()
+        }}
+      >
+        {!!relationship?.note.length ? (
+          <CustomText
+            fontSize='S'
+            style={{
+              color: colors.primaryDefault,
+              paddingHorizontal: StyleConstants.Spacing.S,
+              flexShrink: 1
+            }}
+            children={relationship.note}
+            selectable
+            numberOfLines={2}
+          />
+        ) : (
+          <CustomText
+            fontSize='S'
+            style={{
+              color: colors.secondary,
+              paddingHorizontal: StyleConstants.Spacing.S,
+              flexShrink: 1
+            }}
+            children={t('screenTabs:shared.account.privateNote')}
+            selectable
+            numberOfLines={2}
+          />
+        )}
+        <Icon name='edit' size={StyleConstants.Font.Size.M} color={colors.secondary} />
+      </Pressable>
+    )
   ) : null
 }
 

src/utils/queryHooks/relationship.ts

@@ -65,6 +65,11 @@ type MutationVarsRelationship =
         notify?: boolean
       }
     }
+  | {
+      id: Mastodon.Account['id']
+      type: 'note'
+      payload: Mastodon.Relationship['note']
+    }
 
 const mutationFunction = async (params: MutationVarsRelationship) => {
   switch (params.type) {
@@ -83,11 +88,17 @@ const mutationFunction = async (params: MutationVarsRelationship) => {
         url: `accounts/${params.id}/${params.payload.state ? 'un' : ''}${params.payload.action}`,
         body
       }).then(res => res.body)
+    case 'note':
+      return apiInstance<Mastodon.Relationship>({
+        method: 'post',
+        url: `accounts/${params.id}/note`,
+        body: { comment: params.payload }
+      }).then(res => res.body)
   }
 }
 
 const useRelationshipMutation = (
-  options: UseMutationOptions<Mastodon.Relationship, AxiosError, MutationVarsRelationship>
+  options?: UseMutationOptions<Mastodon.Relationship, AxiosError, MutationVarsRelationship>
 ) => {
   return useMutation(mutationFunction, options)
 }