Use `SearchablePeopleList` for add user to list dialog, replace old modal (#8212)

* move to dialogs dir

* make searchable people list more generic

* new list-add-remove-users dialog

* update header text

* fix header on android

* delete old modal

* reduce spacing on items

2 files changed, 22 insertions, 16 deletions

diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index 483de99e4..1709f0288 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
+import {type Image as RNImage} from 'react-native-image-crop-picker'
+import {type AppBskyActorDefs, type AppBskyGraphDefs} from '@atproto/api'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 
@@ -26,15 +26,6 @@ export interface UserAddRemoveListsModal {
   onRemove?: (listUri: string) => void
 }
 
-export interface ListAddRemoveUsersModal {
-  name: 'list-add-remove-users'
-  list: AppBskyGraphDefs.ListView
-  onChange?: (
-    type: 'add' | 'remove',
-    profile: AppBskyActorDefs.ProfileViewBasic,
-  ) => void
-}
-
 export interface CropImageModal {
   name: 'crop-image'
   uri: string
@@ -107,7 +98,6 @@ export type Modal =
   // Lists
   | CreateOrEditListModal
   | UserAddRemoveListsModal
-  | ListAddRemoveUsersModal
 
   // Posts
   | CropImageModal
diff --git a/src/state/queries/list-memberships.ts b/src/state/queries/list-memberships.ts
index b93dc059d..410a613ad 100644
--- a/src/state/queries/list-memberships.ts
+++ b/src/state/queries/list-memberships.ts
@@ -90,7 +90,13 @@ export function getMembership(
   return membership ? membership.membershipUri : false
 }
 
-export function useListMembershipAddMutation() {
+export function useListMembershipAddMutation({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: (data: {uri: string; cid: string}) => void
+  onError?: (error: Error) => void
+} = {}) {
   const {currentAccount} = useSession()
   const agent = useAgent()
   const queryClient = useQueryClient()
@@ -117,7 +123,7 @@ export function useListMembershipAddMutation() {
       // -prf
       return res
     },
-    onSuccess(data, variables) {
+    onSuccess: (data, variables) => {
       // manually update the cache; a refetch is too expensive
       let memberships = queryClient.getQueryData<ListMembersip[]>(RQKEY())
       if (memberships) {
@@ -145,11 +151,19 @@ export function useListMembershipAddMutation() {
           queryKey: LIST_MEMBERS_RQKEY(variables.listUri),
         })
       }, 1e3)
+      onSuccess?.(data)
     },
+    onError,
   })
 }
 
-export function useListMembershipRemoveMutation() {
+export function useListMembershipRemoveMutation({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: (data: void) => void
+  onError?: (error: Error) => void
+} = {}) {
   const {currentAccount} = useSession()
   const agent = useAgent()
   const queryClient = useQueryClient()
@@ -172,7 +186,7 @@ export function useListMembershipRemoveMutation() {
       // query for that, so we use a timeout below
       // -prf
     },
-    onSuccess(data, variables) {
+    onSuccess: (data, variables) => {
       // manually update the cache; a refetch is too expensive
       let memberships = queryClient.getQueryData<ListMembersip[]>(RQKEY())
       if (memberships) {
@@ -192,6 +206,8 @@ export function useListMembershipRemoveMutation() {
           queryKey: LIST_MEMBERS_RQKEY(variables.listUri),
         })
       }, 1e3)
+      onSuccess?.(data)
     },
+    onError,
   })
 }