Fix issue where last RecentProfileItem can't be removed (#10441)

src/screens/Search/Shell.tsx

@@ -94,12 +94,12 @@ export function SearchScreenShell({
   const [activeTab, setActiveTab] = useState(() => getTabIndex(tabParam))
 
   // Query terms
-  const [searchText, _setSearchText] = useState<string>(queryParam)
+  const [searchText, setSearchText] = useState<string>(queryParam)
   const searchTextRef = useRef(searchText)
-  const setSearchText = (text: string) => {
+  const updateSearchText = useCallback((text: string) => {
     searchTextRef.current = text
-    _setSearchText(text)
-  }
+    setSearchText(text)
+  }, [])
   const {data: autocompleteData, isFetching: isAutocompleteFetching} =
     useActorAutocompleteQuery(searchText, true)
 
@@ -175,21 +175,24 @@ export function SearchScreenShell({
   useFocusEffect(
     useNonReactiveCallback(() => {
       if (IS_WEB) {
-        setSearchText(queryParam)
+        updateSearchText(queryParam)
       }
     }),
   )
 
   const onPressClearQuery = useCallback(() => {
     scrollToTopWeb()
-    setSearchText('')
+    updateSearchText('')
     textInput.current?.focus()
-  }, [])
+  }, [updateSearchText])
 
-  const onChangeText = useCallback((text: string) => {
-    scrollToTopWeb()
-    setSearchText(text)
-  }, [])
+  const onChangeText = useCallback(
+    (text: string) => {
+      scrollToTopWeb()
+      updateSearchText(text)
+    },
+    [updateSearchText],
+  )
 
   const navigateToItem = useCallback(
     (item: string) => {
@@ -225,10 +228,16 @@ export function SearchScreenShell({
       // @ts-expect-error route is not typesafe
       navigation.replace(route.name, parameters)
     } else {
-      setSearchText('')
+      updateSearchText('')
       navigation.setParams({q: '', tab: undefined})
     }
-  }, [setShowAutocomplete, setSearchText, navigation, route.params, route.name])
+  }, [
+    setShowAutocomplete,
+    updateSearchText,
+    navigation,
+    route.params,
+    route.name,
+  ])
 
   const onSubmit = (source: 'typed' | 'autocomplete') => () => {
     ax.metric('search:query', {
@@ -247,10 +256,10 @@ export function SearchScreenShell({
 
   const handleHistoryItemClick = useCallback(
     (item: string) => {
-      setSearchText(item)
+      updateSearchText(item)
       navigateToItem(item)
     },
-    [navigateToItem],
+    [navigateToItem, updateSearchText],
   )
 
   const handleProfileClick = useCallback(
@@ -278,11 +287,11 @@ export function SearchScreenShell({
       // @ts-expect-error route is not typesafe
       navigation.replace(route.name, parameters)
     } else {
-      setSearchText('')
+      updateSearchText('')
       navigation.setParams({q: '', tab: undefined})
       textInput.current?.focus()
     }
-  }, [navigation, route])
+  }, [navigation, route.name, route.params, updateSearchText])
 
   useFocusEffect(
     useCallback(() => {
@@ -435,7 +444,11 @@ export function SearchScreenShell({
         ) : (
           <SearchHistory
             searchHistory={termHistory}
-            selectedProfiles={accountHistoryProfiles?.profiles || []}
+            selectedProfiles={
+              accountHistoryProfiles?.profiles.filter(p =>
+                accountHistory.includes(p.did),
+              ) ?? []
+            }
             onItemClick={handleHistoryItemClick}
             onProfileClick={handleProfileClick}
             onRemoveItemClick={deleteSearchHistoryItem}