Clear search term after adding chat member (#10831)

src/components/dms/AddMembersFlow.tsx

@@ -67,6 +67,7 @@ type Item = LabelItem | ProfileItem | EmptyItem | PlaceholderItem | LoadingItem
 export type State = {
   groupChatDids: string[]
   groupChatProfiles: bsky.profile.AnyProfileView[]
+  searchText: string
 }
 
 export type Action =
@@ -80,6 +81,10 @@ export type Action =
       groupChatDids: string[]
       groupChatProfiles: bsky.profile.AnyProfileView[]
     }
+  | {
+      type: 'setSearchText'
+      searchText: string
+    }
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -88,6 +93,7 @@ function reducer(state: State, action: Action): State {
         ...state,
         groupChatDids: action.groupChatDids,
         groupChatProfiles: action.groupChatProfiles,
+        searchText: '',
       }
     }
     case 'removeDids': {
@@ -97,6 +103,12 @@ function reducer(state: State, action: Action): State {
         groupChatProfiles: action.groupChatProfiles,
       }
     }
+    case 'setSearchText': {
+      return {
+        ...state,
+        searchText: action.searchText,
+      }
+    }
   }
 }
 
@@ -121,11 +133,19 @@ export function AddMembersFlow({
 
   const [headerHeight, setHeaderHeight] = useState(0)
   const [footerHeight, setFooterHeight] = useState(0)
-  const [searchText, setSearchText] = useState('')
 
   const listRef = useRef<ListMethods>(null)
   const inputRef = useRef<TextInput>(null)
 
+  const [{groupChatDids, groupChatProfiles, searchText}, dispatch] = useReducer(
+    reducer,
+    {
+      groupChatDids: [],
+      groupChatProfiles: [],
+      searchText: '',
+    },
+  )
+
   const {
     data: autocompleteResults,
     isError,
@@ -151,11 +171,6 @@ export function AddMembersFlow({
       ? Math.max(0, groupMemberLimit - memberListData.length)
       : undefined
 
-  const [{groupChatDids, groupChatProfiles}, dispatch] = useReducer(reducer, {
-    groupChatDids: [],
-    groupChatProfiles: [],
-  })
-
   const onRemoveDid = useCallback(
     (did: string) => {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -405,7 +420,7 @@ export function AddMembersFlow({
               inputRef={inputRef}
               value={searchText}
               onChangeText={text => {
-                setSearchText(text)
+                dispatch({type: 'setSearchText', searchText: text})
                 listRef.current?.scrollToOffset({offset: 0, animated: false})
               }}
               onEscape={control.close}

src/components/dms/InitiateChatFlow.tsx

@@ -99,6 +99,7 @@ export type State = {
   groupChatDids: string[]
   groupChatProfiles: bsky.profile.AnyProfileView[]
   groupName: string
+  searchText: string
 }
 
 export type Action =
@@ -132,6 +133,10 @@ export type Action =
       type: 'goBackFromGroupName'
       screenTitle: string
     }
+  | {
+      type: 'setSearchText'
+      searchText: string
+    }
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -150,6 +155,7 @@ function reducer(state: State, action: Action): State {
         ...state,
         groupChatDids: action.groupChatDids,
         groupChatProfiles: action.groupChatProfiles,
+        searchText: '',
       }
     }
     case 'removeDids': {
@@ -164,6 +170,7 @@ function reducer(state: State, action: Action): State {
         ...state,
         chatState: ChatState.GROUP_NAME,
         screenTitle: action.screenTitle,
+        searchText: '',
       }
     }
     case 'nameGroup': {
@@ -180,6 +187,7 @@ function reducer(state: State, action: Action): State {
         groupChatDids: [],
         groupChatProfiles: [],
         groupName: '',
+        searchText: '',
       }
     }
     case 'goBackFromGroupName': {
@@ -190,6 +198,12 @@ function reducer(state: State, action: Action): State {
         groupName: '',
       }
     }
+    case 'setSearchText': {
+      return {
+        ...state,
+        searchText: action.searchText,
+      }
+    }
   }
 }
 
@@ -218,17 +232,15 @@ export function InitiateChatFlow({
   const canCreateGroups = chatStatus?.canCreateGroups ?? true
   const groupMemberLimit = chatStatus?.groupMemberLimit
 
-  const [searchText, setSearchText] = useState('')
-
-  const {
-    data: results,
-    isError,
-    isFetching,
-  } = useActorAutocompleteQuery(searchText, true, 12)
-  const {data: follows} = useProfileFollowsQuery(currentAccount?.did)
-
   const [
-    {chatState, screenTitle, groupChatDids, groupChatProfiles, groupName},
+    {
+      chatState,
+      screenTitle,
+      groupChatDids,
+      groupChatProfiles,
+      groupName,
+      searchText,
+    },
     dispatch,
   ] = useReducer(reducer, {
     chatState: ChatState.NEW_CHAT,
@@ -236,8 +248,16 @@ export function InitiateChatFlow({
     groupChatDids: [],
     groupChatProfiles: [],
     groupName: '',
+    searchText: '',
   })
 
+  const {
+    data: results,
+    isError,
+    isFetching,
+  } = useActorAutocompleteQuery(searchText, true, 12)
+  const {data: follows} = useProfileFollowsQuery(currentAccount?.did)
+
   const newGroupChatTitle = l`New group chat`
   const groupNameTitle = l`Group name`
 
@@ -362,7 +382,6 @@ export function InitiateChatFlow({
       case ChatState.NEW_GROUP_CHAT:
         LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
         dispatch({type: 'goBackFromNewGroupChat', screenTitle: title})
-        setSearchText('')
         break
       case ChatState.GROUP_NAME:
         LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -383,7 +402,6 @@ export function InitiateChatFlow({
   const handlePressNext = useCallback(() => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
     dispatch({type: 'startNameGroup', screenTitle: groupNameTitle})
-    setSearchText('')
   }, [groupNameTitle])
 
   const handlePressConfirm = useCallback(() => {
@@ -617,7 +635,7 @@ export function InitiateChatFlow({
                 inputRef={inputRef}
                 value={searchText}
                 onChangeText={text => {
-                  setSearchText(text)
+                  dispatch({type: 'setSearchText', searchText: text})
                   listRef.current?.scrollToOffset({offset: 0, animated: false})
                 }}
                 onEscape={control.close}