Search page (#1912)

* Desktop web work

* Mobile search

* Dedupe suggestions

* Clean up and reorg

* Cleanup

* Cleanup

* Use Pager

* Delete unused code

* Fix conflicts

* Remove search ui model

* Soft reset

* Fix scrollable results, remove observer

* Use correct ScrollView

* Clean up layout

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

3 files changed, 54 insertions, 12 deletions

diff --git a/src/state/queries/actor-autocomplete.ts b/src/state/queries/actor-autocomplete.ts
index 57f30f9c5..de7a2e1f6 100644
--- a/src/state/queries/actor-autocomplete.ts
+++ b/src/state/queries/actor-autocomplete.ts
@@ -36,7 +36,7 @@ export function useActorAutocompleteFn() {
   const {data: follows} = useMyFollowsQuery()
 
   return React.useCallback(
-    async ({query}: {query: string}) => {
+    async ({query, limit = 8}: {query: string; limit?: number}) => {
       let res
       if (query) {
         try {
@@ -47,7 +47,7 @@ export function useActorAutocompleteFn() {
             queryFn: () =>
               agent.searchActorsTypeahead({
                 term: query,
-                limit: 8,
+                limit,
               }),
           })
         } catch (e) {
diff --git a/src/state/queries/search-posts.ts b/src/state/queries/search-posts.ts
new file mode 100644
index 000000000..ab6ed4d41
--- /dev/null
+++ b/src/state/queries/search-posts.ts
@@ -0,0 +1,32 @@
+import {AppBskyFeedSearchPosts} from '@atproto/api'
+import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query'
+
+import {useSession} from '#/state/session'
+
+const searchPostsQueryKey = ({query}: {query: string}) => [
+  'search-posts',
+  query,
+]
+
+export function useSearchPostsQuery({query}: {query: string}) {
+  const {agent} = useSession()
+
+  return useInfiniteQuery<
+    AppBskyFeedSearchPosts.OutputSchema,
+    Error,
+    InfiniteData<AppBskyFeedSearchPosts.OutputSchema>,
+    QueryKey,
+    string | undefined
+  >({
+    queryKey: searchPostsQueryKey({query}),
+    queryFn: async () => {
+      const res = await agent.app.bsky.feed.searchPosts({
+        q: query,
+        limit: 25,
+      })
+      return res.data
+    },
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+  })
+}
diff --git a/src/state/queries/suggested-follows.ts b/src/state/queries/suggested-follows.ts
index 5b5e142ca..b31e69366 100644
--- a/src/state/queries/suggested-follows.ts
+++ b/src/state/queries/suggested-follows.ts
@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   AppBskyActorGetSuggestions,
   AppBskyGraphGetSuggestedFollowsByActor,
@@ -5,7 +6,7 @@ import {
 } from '@atproto/api'
 import {
   useInfiniteQuery,
-  useMutation,
+  useQueryClient,
   useQuery,
   InfiniteData,
   QueryKey,
@@ -15,7 +16,7 @@ import {useSession} from '#/state/session'
 import {useModerationOpts} from '#/state/queries/preferences'
 
 const suggestedFollowsQueryKey = ['suggested-follows']
-const suggestedFollowsByActorQuery = (did: string) => [
+const suggestedFollowsByActorQueryKey = (did: string) => [
   'suggested-follows-by-actor',
   did,
 ]
@@ -73,7 +74,7 @@ export function useSuggestedFollowsByActorQuery({did}: {did: string}) {
   const {agent} = useSession()
 
   return useQuery<AppBskyGraphGetSuggestedFollowsByActor.OutputSchema, Error>({
-    queryKey: suggestedFollowsByActorQuery(did),
+    queryKey: suggestedFollowsByActorQueryKey(did),
     queryFn: async () => {
       const res = await agent.app.bsky.graph.getSuggestedFollowsByActor({
         actor: did,
@@ -83,17 +84,26 @@ export function useSuggestedFollowsByActorQuery({did}: {did: string}) {
   })
 }
 
-// TODO: Delete and replace usages with the one above.
+// TODO refactor onboarding to use above, but this is still used
 export function useGetSuggestedFollowersByActor() {
   const {agent} = useSession()
+  const queryClient = useQueryClient()
 
-  return useMutation({
-    mutationFn: async (actor: string) => {
-      const res = await agent.app.bsky.graph.getSuggestedFollowsByActor({
-        actor: actor,
+  return React.useCallback(
+    async (actor: string) => {
+      const res = await queryClient.fetchQuery({
+        staleTime: 60 * 1000,
+        queryKey: suggestedFollowsByActorQueryKey(actor),
+        queryFn: async () => {
+          const res = await agent.app.bsky.graph.getSuggestedFollowsByActor({
+            actor: actor,
+          })
+          return res.data
+        },
       })
 
-      return res.data
+      return res
     },
-  })
+    [agent, queryClient],
+  )
 }