[C-5368] Default @Handles list for comments (#10390)

AudiusProject · Nov 8, 2024 · afd617d · afd617d
1 parent 2f7d116
commit afd617d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/packages/common/src/api/user.ts b/packages/common/src/api/user.ts
@@ -226,9 +226,12 @@ const userApi = createApi({
           userId,
           limit = 10,
           offset = 0
-        }: { userId: ID; offset?: number; limit?: number },
+        }: { userId: ID | null | undefined; offset?: number; limit?: number },
         { audiusSdk }
       ) => {
+        if (!userId) {
+          return []
+        }
         const sdk = await audiusSdk()
         const { data = [] } = await sdk.full.users.getFollowers({
           id: Id.parse(userId),

diff --git a/packages/mobile/src/components/comments/CommentDrawer.tsx b/packages/mobile/src/components/comments/CommentDrawer.tsx
@@ -2,7 +2,7 @@ import type { RefObject } from 'react'
 import React, { useCallback, useRef, useState } from 'react'
 
 import type { SearchCategory } from '@audius/common/api'
-import { useGetSearchResults } from '@audius/common/api'
+import { useGetSearchResults, useGetFollowers } from '@audius/common/api'
 import type { ReplyingAndEditingState } from '@audius/common/context'
 import {
   CommentSectionProvider,
@@ -89,19 +89,19 @@ const CommentDrawerAutocompleteContent = ({
     offset: 0
   }
 
-  const { data, status } = useGetSearchResults(params, { debounce: 500 })
-
-  // No search state
-  if (query === '') {
-    return (
-      <Flex p='l'>
-        <Text>Search Users</Text>
-      </Flex>
-    )
-  }
+  const { data: searchData, status: searchStatus } = useGetSearchResults(
+    params,
+    { debounce: 500 }
+  )
+  const { data: followersData, status: followersStatus } = useGetFollowers({
+    userId: currentUserId,
+    limit: 6
+  })
+  const userList = query !== '' ? searchData?.users : followersData
+  const userListStatus = query !== '' ? searchStatus : followersStatus
 
   // Loading state
-  if (status === Status.LOADING || status === Status.IDLE) {
+  if (userListStatus === Status.LOADING || userListStatus === Status.IDLE) {
     return (
       <Flex p='l' alignItems='center'>
         <LoadingSpinner style={{ height: 24 }} />
@@ -110,7 +110,7 @@ const CommentDrawerAutocompleteContent = ({
   }
 
   // Empty state
-  if (!data || !data.users || !data.users.length) {
+  if (!userList || !userList.length) {
     return (
       <Flex p='l'>
         <Text>No User Results</Text>
@@ -120,7 +120,7 @@ const CommentDrawerAutocompleteContent = ({
 
   return (
     <BottomSheetFlatList
-      data={data.users}
+      data={userList}
       keyExtractor={({ user_id }) => user_id.toString()}
       ListHeaderComponent={<Box h='l' />}
       enableFooterMarginAdjustment

diff --git a/packages/web/src/components/composer-input/components/UserMentionAutocompleteText.tsx b/packages/web/src/components/composer-input/components/UserMentionAutocompleteText.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from 'react'
 
-import { SearchCategory, useGetSearchResults } from '@audius/common/api'
+import {
+  SearchCategory,
+  useGetFollowers,
+  useGetSearchResults
+} from '@audius/common/api'
 import { Status, UserMetadata } from '@audius/common/models'
 import { accountSelectors } from '@audius/common/store'
 import {
@@ -39,6 +43,10 @@ export const UserMentionAutocompleteText = (
   const searchText = text.slice(1)
   const accountStatus = useSelector(getAccountStatus)
   const currentUserId = useSelector(getUserId)
+  const { data: followersData, status: followerStatus } = useGetFollowers({
+    userId: currentUserId,
+    limit: 6
+  })
   const optionRefs = useRef<HTMLButtonElement[]>([])
   const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -51,50 +59,53 @@ export const UserMentionAutocompleteText = (
     disableAnalytics: true
   }
 
-  const { data, status } = useGetSearchResults(params, {
-    debounce: 500,
-    disabled: accountStatus === Status.LOADING || accountStatus === Status.IDLE
-  })
+  const { data: searchUserData, status: searchStatus } = useGetSearchResults(
+    params,
+    {
+      debounce: 500,
+      disabled:
+        accountStatus === Status.LOADING || accountStatus === Status.IDLE
+    }
+  )
+
+  const userList = searchText !== '' ? searchUserData?.users : followersData
+  const userListStatus = searchText !== '' ? searchStatus : followerStatus
 
   const options = useMemo(
-    () => data?.users?.map((user) => ({ value: String(user.user_id) })) ?? [],
-    [data]
+    () => userList?.map((user) => ({ value: String(user.user_id) })) ?? [],
+    [userList]
   )
 
   useEffect(() => {
-    if (status === Status.SUCCESS && data?.users) {
-      onResultsLoaded?.(data.users)
+    if (userList && userListStatus === Status.SUCCESS) {
+      onResultsLoaded?.(userList)
     }
-  }, [data, onResultsLoaded, status])
+  }, [userList, onResultsLoaded, userListStatus, searchText, followerStatus])
 
   const handleClose = useCallback(() => {
     setIsOpen(false)
   }, [])
 
   const handleChange = useCallback(
     (userId: string) => {
-      const user = data?.users?.find((user) => user.user_id === Number(userId))
+      const user = userList?.find((user) => user.user_id === Number(userId))
       if (user) {
         onConfirm?.(user)
       }
     },
-    [data?.users, onConfirm]
+    [userList, onConfirm]
   )
 
   const renderContent = () => {
-    if (!searchText) {
-      return <Text>{messages.searchUsers}</Text>
-    }
-
-    if (status === Status.LOADING || status === Status.IDLE) {
+    if (userListStatus === Status.IDLE || userListStatus === Status.LOADING) {
       return (
         <Flex justifyContent='center' alignItems='center' p='m' w='100%'>
           <LoadingSpinner css={{ height: 32 }} />
         </Flex>
       )
     }
 
-    if (!data?.users || data.users.length === 0) {
+    if (!userList || userList.length === 0) {
       return <Text>{messages.noResults}</Text>
     }
 
@@ -139,7 +150,7 @@ export const UserMentionAutocompleteText = (
                       size='xs'
                       color={isActive ? 'staticWhite' : 'subdued'}
                     >
-                      {data.users[index].handle}
+                      {userList[index].handle}
                     </Text>
                   </Flex>
                 }