[PAY-1434] Dismiss keyboard on create chat screen row press (#3569)

AudiusProject · Jun 12, 2023 · 001007e · 001007e
1 parent c70e9fe
commit 001007e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx b/packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx
@@ -1,14 +1,14 @@
 import { useCallback } from 'react'
 
-import type { User } from '@audius/common'
 import {
   chatActions,
   accountSelectors,
   chatSelectors,
-  ChatPermissionAction
+  ChatPermissionAction,
+  cacheUsersSelectors
 } from '@audius/common'
 import { useSelector } from 'audius-client/src/common/hooks/useSelector'
-import { Text, View, TouchableOpacity } from 'react-native'
+import { Text, View, TouchableOpacity, Keyboard } from 'react-native'
 import { useDispatch } from 'react-redux'
 
 import IconBlockMessages from 'app/assets/images/iconBlockMessages.svg'
@@ -22,6 +22,7 @@ import { makeStyles } from 'app/styles'
 const { createChat } = chatActions
 const { getCanCreateChat } = chatSelectors
 const { getUserId } = accountSelectors
+const { getUser } = cacheUsersSelectors
 
 const messages = {
   followsYou: 'Follows You',
@@ -150,23 +151,28 @@ const ctaToTextMap = {
 }
 
 type ChatUserListItemProps = {
-  user: User
+  userId: number
 }
 
-export const ChatUserListItem = ({ user }: ChatUserListItemProps) => {
+export const ChatUserListItem = ({ userId }: ChatUserListItemProps) => {
   const styles = useStyles()
   const dispatch = useDispatch()
+  const user = useSelector((state) => getUser(state, { id: userId }))
   const currentUserId = useSelector(getUserId)
   const { callToAction, canCreateChat } = useSelector((state) =>
-    getCanCreateChat(state, { userId: user.user_id })
+    getCanCreateChat(state, { userId: user?.user_id })
   )
 
   const handlePress = useCallback(() => {
-    dispatch(createChat({ userIds: [user.user_id] }))
-  }, [dispatch, user.user_id])
+    if (user?.user_id) {
+      Keyboard.dismiss()
+      dispatch(createChat({ userIds: [user.user_id] }))
+    }
+  }, [dispatch, user?.user_id])
 
   const handleNotPermittedPress = useCallback(() => {
-    if (user.user_id) {
+    if (user?.user_id) {
+      Keyboard.dismiss()
       dispatch(
         setVisibility({
           drawer: 'InboxUnavailable',
@@ -175,10 +181,11 @@ export const ChatUserListItem = ({ user }: ChatUserListItemProps) => {
         })
       )
     }
-  }, [dispatch, user.user_id])
+  }, [dispatch, user?.user_id])
 
   const handleKebabPress = useCallback(() => {
-    if (user.user_id) {
+    if (user?.user_id) {
+      Keyboard.dismiss()
       dispatch(
         setVisibility({
           drawer: 'CreateChatActions',
@@ -187,9 +194,9 @@ export const ChatUserListItem = ({ user }: ChatUserListItemProps) => {
         })
       )
     }
-  }, [dispatch, user.user_id])
+  }, [dispatch, user?.user_id])
 
-  if (currentUserId === user.user_id) {
+  if (!user || currentUserId === user?.user_id) {
     return null
   }
 

diff --git a/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx
@@ -279,7 +279,9 @@ export const ChatUserListScreen = () => {
               onEndReached={handleLoadMore}
               maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
               data={users}
-              renderItem={({ item }) => <ChatUserListItem user={item} />}
+              renderItem={({ item }) => (
+                <ChatUserListItem userId={item.user_id} />
+              )}
               keyExtractor={(user: User) => user.handle}
               contentContainerStyle={styles.flatListContainer}
               // Only show empty component if there is no search query