Fixed #568

src/@types/mastodon.d.ts

@@ -406,6 +406,8 @@ declare namespace Mastodon {
     id: string
     following: boolean
     showing_reblogs: boolean
+    notifying?: boolean
+    languages?: string[]
     followed_by: boolean
     blocking: boolean
     blocked_by: boolean

src/components/Relationship/Outgoing.tsx

@@ -6,21 +6,24 @@ import {
   useRelationshipMutation,
   useRelationshipQuery
 } from '@utils/queryHooks/relationship'
-import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from '@tanstack/react-query'
+import { useSelector } from 'react-redux'
+import { checkInstanceFeature } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
 
 export interface Props {
   id: Mastodon.Account['id']
 }
 
-const RelationshipOutgoing = React.memo(
+const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
-  ({ id }: Props) => {
   const { theme } = useTheme()
   const { t } = useTranslation('componentRelationship')
 
+  const canFollowNotify = useSelector(checkInstanceFeature('account_follow_notify'))
+
   const query = useRelationshipQuery({ id })
 
   const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
@@ -120,6 +123,27 @@ const RelationshipOutgoing = React.memo(
   }
 
   return (
+    <>
+      {canFollowNotify && query.data?.following ? (
+        <Button
+          type='icon'
+          content={query.data.notifying ? 'BellOff' : 'Bell'}
+          round
+          onPress={() =>
+            mutation.mutate({
+              id,
+              type: 'outgoing',
+              payload: {
+                action: 'follow',
+                state: false,
+                notify: !query.data.notifying
+              }
+            })
+          }
+          loading={query.isLoading || mutation.isLoading}
+          style={{ marginRight: StyleConstants.Spacing.S }}
+        />
+      ) : null}
       <Button
         type='text'
         content={content}
@@ -127,9 +151,8 @@ const RelationshipOutgoing = React.memo(
         loading={query.isLoading || mutation.isLoading}
         disabled={query.isError || query.data?.blocked_by}
       />
+    </>
   )
-  },
+}
-  () => true
-)
 
 export default RelationshipOutgoing

src/helpers/features.json

@@ -1,4 +1,8 @@
 [
+  {
+    "feature": "account_follow_notify",
+    "version": 3.3
+  },
   {
     "feature": "notification_type_status",
     "version": 3.3

src/utils/queryHooks/relationship.ts

@@ -8,14 +8,9 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query'
 
-export type QueryKeyRelationship = [
+export type QueryKeyRelationship = ['Relationship', { id: Mastodon.Account['id'] }]
-  'Relationship',
-  { id: Mastodon.Account['id'] }
-]
 
-const queryFunction = async ({
+const queryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyRelationship>) => {
-  queryKey
-}: QueryFunctionContext<QueryKeyRelationship>) => {
   const { id } = queryKey[1]
 
   const res = await apiInstance<Mastodon.Relationship[]>({
@@ -32,11 +27,7 @@ const useRelationshipQuery = ({
   options,
   ...queryKeyParams
 }: QueryKeyRelationship[1] & {
-  options?: UseQueryOptions<
+  options?: UseQueryOptions<Mastodon.Relationship[], AxiosError, Mastodon.Relationship>
-    Mastodon.Relationship[],
-    AxiosError,
-    Mastodon.Relationship
-  >
 }) => {
   const queryKey: QueryKeyRelationship = ['Relationship', { ...queryKeyParams }]
   return useQuery(queryKey, queryFunction, {
@@ -54,7 +45,20 @@ type MutationVarsRelationship =
   | {
       id: Mastodon.Account['id']
       type: 'outgoing'
-      payload: { action: 'follow' | 'block'; state: boolean }
+      payload: {
+        action: 'block'
+        state: boolean
+        notify?: undefined
+      }
+    }
+  | {
+      id: Mastodon.Account['id']
+      type: 'outgoing'
+      payload: {
+        action: 'follow'
+        state: boolean
+        notify?: boolean
+      }
     }
 
 const mutationFunction = async (params: MutationVarsRelationship) => {
@@ -65,21 +69,20 @@ const mutationFunction = async (params: MutationVarsRelationship) => {
         url: `follow_requests/${params.id}/${params.payload.action}`
       }).then(res => res.body)
     case 'outgoing':
+      const formData = new FormData()
+      typeof params.payload.notify === 'boolean' &&
+        formData.append('notify', params.payload.notify.toString())
+
       return apiInstance<Mastodon.Relationship>({
         method: 'post',
-        url: `accounts/${params.id}/${params.payload.state ? 'un' : ''}${
+        url: `accounts/${params.id}/${params.payload.state ? 'un' : ''}${params.payload.action}`,
-          params.payload.action
+        body: formData
-        }`
       }).then(res => res.body)
   }
 }
 
 const useRelationshipMutation = (
-  options: UseMutationOptions<
+  options: UseMutationOptions<Mastodon.Relationship, AxiosError, MutationVarsRelationship>
-    Mastodon.Relationship,
-    AxiosError,
-    MutationVarsRelationship
-  >
 ) => {
   return useMutation(mutationFunction, options)
 }