[PAY-1246] Mobile delete chat thread UI (#3458)

AudiusProject · May 30, 2023 · 3676ee6 · 3676ee6
1 parent 4d18c99
commit 3676ee6
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 21 deletions.
diff --git a/apps/audius-client/packages/mobile/src/app/Drawers.tsx b/apps/audius-client/packages/mobile/src/app/Drawers.tsx
@@ -6,11 +6,12 @@ import { AddToPlaylistDrawer } from 'app/components/add-to-playlist-drawer'
 import { ApiRewardsDrawer } from 'app/components/api-rewards-drawer/ApiRewardsDrawer'
 import { AudioBreakdownDrawer } from 'app/components/audio-breakdown-drawer'
 import { TiersExplainerDrawer } from 'app/components/audio-rewards'
-import { BlockMessagesDrawer } from 'app/components/block-messages'
+import { BlockMessagesDrawer } from 'app/components/block-messages-drawer'
 import { ChallengeRewardsDrawer } from 'app/components/challenge-rewards-drawer'
 import { ChatActionsDrawer } from 'app/components/chat-actions-drawer'
 import { CollectibleDetailsDrawer } from 'app/components/collectible-details-drawer'
 import { DeactivateAccountConfirmationDrawer } from 'app/components/deactivate-account-confirmation-drawer'
+import { DeleteChatDrawer } from 'app/components/delete-chat-drawer'
 import { DeletePlaylistConfirmationDrawer } from 'app/components/delete-playlist-confirmation-drawer'
 import { DownloadTrackProgressDrawer } from 'app/components/download-track-progress-drawer'
 import { EditCollectiblesDrawer } from 'app/components/edit-collectibles-drawer'
@@ -119,6 +120,7 @@ const nativeDrawersMap: { [DrawerName in Drawer]?: ComponentType } = {
   GatedContentUploadPrompt: GatedContentUploadPromptDrawer,
   ChatActions: ChatActionsDrawer,
   BlockMessages: BlockMessagesDrawer,
+  DeleteChat: DeleteChatDrawer,
   SupportersInfo: SupportersInfoDrawer,
   InboxUnavailable: InboxUnavailableDrawer
 }

diff --git a/...mponents/block-messages/BlockMessages.tsx → ...k-messages-drawer/BlockMessagesDrawer.tsx b/...mponents/block-messages/BlockMessages.tsx → ...k-messages-drawer/BlockMessagesDrawer.tsx
@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { cacheUsersSelectors, chatActions, chatSelectors } from '@audius/common'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
@@ -111,7 +113,7 @@ export const BlockMessagesDrawer = () => {
   // Assuming blockees have already been fetched in ProfileActionsDrawer.
   const doesBlockUser = useSelector((state) => getDoesBlockUser(state, userId))
 
-  const handleConfirmPress = () => {
+  const handleConfirmPress = useCallback(() => {
     if (doesBlockUser) {
       dispatch(unblockUser({ userId }))
     } else {
@@ -123,16 +125,16 @@ export const BlockMessagesDrawer = () => {
         visible: false
       })
     )
-  }
+  }, [dispatch, doesBlockUser, userId])
 
-  const handleCancelPress = () => {
+  const handleCancelPress = useCallback(() => {
     dispatch(
       setVisibility({
         drawer: 'BlockMessages',
         visible: false
       })
     )
-  }
+  }, [dispatch])
 
   return (
     <NativeDrawer drawerName={BLOCK_MESSAGES_MODAL_NAME}>

diff --git a/apps/audius-client/packages/mobile/src/components/block-messages-drawer/index.ts b/apps/audius-client/packages/mobile/src/components/block-messages-drawer/index.ts
@@ -0,0 +1 @@
+export { BlockMessagesDrawer } from './BlockMessagesDrawer'
diff --git a/apps/audius-client/packages/mobile/src/components/block-messages/index.ts b/apps/audius-client/packages/mobile/src/components/block-messages/index.ts
diff --git a/apps/audius-client/packages/mobile/src/components/chat-actions-drawer/ChatActionsDrawer.tsx b/apps/audius-client/packages/mobile/src/components/chat-actions-drawer/ChatActionsDrawer.tsx
@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { chatSelectors } from '@audius/common'
 import { View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
@@ -18,7 +20,8 @@ const CHAT_ACTIONS_MODAL_NAME = 'ChatActions'
 const messages = {
   visitProfile: 'Visit Profile',
   blockMessages: 'Block Messages',
-  unblockMessages: 'Unblock Messages'
+  unblockMessages: 'Unblock Messages',
+  deleteConversation: 'Delete Conversation'
 }
 
 const useStyles = makeStyles(({ spacing, typography, palette }) => ({
@@ -33,6 +36,9 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
     color: palette.secondary,
     paddingVertical: spacing(3)
   },
+  deleteText: {
+    color: palette.accentRed
+  },
   row: {
     alignItems: 'center',
     width: '100%',
@@ -45,38 +51,48 @@ export const ChatActionsDrawer = () => {
   const styles = useStyles()
   const dispatch = useDispatch()
   const navigation = useNavigation()
-  const { userId } = useSelector((state: AppState) =>
+  const { userId, chatId } = useSelector((state: AppState) =>
     getData<'ChatActions'>(state)
   )
   const doesBlockUser = useSelector((state: AppState) =>
     getDoesBlockUser(state, userId)
   )
 
-  const handleVisitProfilePress = () => {
+  const closeDrawer = useCallback(() => {
     dispatch(
       setVisibility({
         drawer: 'ChatActions',
         visible: false
       })
     )
+  }, [dispatch])
+
+  const handleVisitProfilePress = useCallback(() => {
+    closeDrawer()
     navigation.navigate('Profile', { id: userId })
-  }
+  }, [closeDrawer, navigation, userId])
 
-  const handleBlockMessagesPress = () => {
+  const handleBlockMessagesPress = useCallback(() => {
+    closeDrawer()
     dispatch(
       setVisibility({
-        drawer: 'ChatActions',
-        visible: false
+        drawer: 'BlockMessages',
+        visible: true,
+        data: { userId }
       })
     )
+  }, [closeDrawer, dispatch, userId])
+
+  const handleDeletePress = useCallback(() => {
+    closeDrawer()
     dispatch(
       setVisibility({
-        drawer: 'BlockMessages',
+        drawer: 'DeleteChat',
         visible: true,
-        data: { userId }
+        data: { chatId }
       })
     )
-  }
+  }, [chatId, closeDrawer, dispatch])
 
   return (
     <NativeDrawer drawerName={CHAT_ACTIONS_MODAL_NAME}>
@@ -95,6 +111,13 @@ export const ChatActionsDrawer = () => {
             </Text>
           </TouchableOpacity>
         </View>
+        <View style={styles.row}>
+          <TouchableOpacity onPress={handleDeletePress}>
+            <Text style={[styles.text, styles.deleteText]}>
+              {messages.deleteConversation}
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
     </NativeDrawer>
   )

diff --git a/apps/audius-client/packages/mobile/src/components/delete-chat-drawer/DeleteChatDrawer.tsx b/apps/audius-client/packages/mobile/src/components/delete-chat-drawer/DeleteChatDrawer.tsx
@@ -0,0 +1,120 @@
+import { useCallback } from 'react'
+
+import { chatActions } from '@audius/common'
+import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
+
+import IconTrash from 'app/assets/images/iconTrash.svg'
+import { Text, Button } from 'app/components/core'
+import { NativeDrawer } from 'app/components/drawer'
+import type { AppState } from 'app/store'
+import { getData } from 'app/store/drawers/selectors'
+import { setVisibility } from 'app/store/drawers/slice'
+import { makeStyles, flexRowCentered } from 'app/styles'
+import { useColor } from 'app/utils/theme'
+
+const { deleteChat } = chatActions
+
+const DELETE_CHAT_MODAL_NAME = 'DeleteChat'
+
+const messages = {
+  title: 'Delete Thread',
+  description:
+    'Are you sure you want to delete this thread? \n\nOther people in the conversation will still be able to see it.  This can’t be undone.',
+  deleteMessages: 'Are you sure you want to delete this chat?',
+  deleteButton: 'Delete Thread',
+  cancel: 'Cancel'
+}
+
+const useStyles = makeStyles(({ spacing, typography, palette }) => ({
+  drawer: {
+    marginVertical: spacing(3),
+    padding: spacing(3.5),
+    gap: spacing(4)
+  },
+  titleContainer: {
+    ...flexRowCentered(),
+    gap: spacing(3.5),
+    marginBottom: spacing(2),
+    alignSelf: 'center'
+  },
+  title: {
+    fontSize: typography.fontSize.xl,
+    fontFamily: typography.fontByWeight.heavy,
+    color: palette.neutralLight2,
+    textTransform: 'uppercase',
+    lineHeight: typography.fontSize.xl * 1.3
+  },
+  confirm: {
+    fontSize: typography.fontSize.large,
+    lineHeight: typography.fontSize.large * 1.3,
+    color: palette.neutral
+  },
+  button: {
+    padding: spacing(4),
+    height: spacing(12)
+  },
+  blockButton: {
+    borderColor: palette.accentRed
+  },
+  blockText: {
+    fontSize: typography.fontSize.large
+  }
+}))
+
+export const DeleteChatDrawer = () => {
+  const styles = useStyles()
+  const neutralLight2 = useColor('neutralLight2')
+  const dispatch = useDispatch()
+  const { chatId } = useSelector((state: AppState) =>
+    getData<'DeleteChat'>(state)
+  )
+
+  const closeDrawer = useCallback(() => {
+    dispatch(
+      setVisibility({
+        drawer: 'DeleteChat',
+        visible: false
+      })
+    )
+  }, [dispatch])
+
+  const handleConfirmPress = useCallback(() => {
+    if (chatId) {
+      dispatch(deleteChat({ chatId }))
+    }
+    closeDrawer()
+  }, [chatId, closeDrawer, dispatch])
+
+  return (
+    <NativeDrawer drawerName={DELETE_CHAT_MODAL_NAME}>
+      <View style={styles.drawer}>
+        <View style={styles.titleContainer}>
+          <IconTrash fill={neutralLight2} />
+          <Text style={styles.title}>{messages.title}</Text>
+        </View>
+        <Text style={styles.confirm}>{messages.description}</Text>
+        <Button
+          title={messages.deleteButton}
+          onPress={handleConfirmPress}
+          variant={'destructive'}
+          styles={{
+            root: styles.button,
+            text: styles.blockText
+          }}
+          fullWidth
+        />
+        <Button
+          title={messages.cancel}
+          onPress={closeDrawer}
+          variant={'common'}
+          styles={{
+            root: styles.button,
+            text: styles.blockText
+          }}
+          fullWidth
+        />
+      </View>
+    </NativeDrawer>
+  )
+}
diff --git a/apps/audius-client/packages/mobile/src/components/delete-chat-drawer/index.ts b/apps/audius-client/packages/mobile/src/components/delete-chat-drawer/index.ts
@@ -0,0 +1 @@
+export * from './DeleteChatDrawer'
diff --git a/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -325,7 +325,7 @@ export const ChatScreen = () => {
       setVisibility({
         drawer: 'ChatActions',
         visible: true,
-        data: { userId: otherUser.user_id }
+        data: { userId: otherUser.user_id, chatId }
       })
     )
   }
@@ -442,7 +442,7 @@ export const ChatScreen = () => {
                 />
               </TouchableOpacity>
             )
-          : messages.title
+          : () => <Text style={styles.userBadgeTitle}>{messages.title}</Text>
       }
       icon={otherUser ? undefined : IconMessage}
       topbarRight={topBarRight}

diff --git a/apps/audius-client/packages/mobile/src/store/chat/sagas.ts b/apps/audius-client/packages/mobile/src/store/chat/sagas.ts
@@ -11,8 +11,13 @@ function* watchGoToChat() {
       payload: { chatId }
     } = action
     if (navigationRef.isReady()) {
-      // @ts-ignore navigationRef is not parametrized correctly (PAY-1141)
-      navigationRef.navigate('Chat', { chatId })
+      if (!chatId) {
+        // @ts-ignore navigationRef is not parametrized correctly (PAY-1141)
+        navigationRef.navigate('ChatList')
+      } else {
+        // @ts-ignore navigationRef is not parametrized correctly (PAY-1141)
+        navigationRef.navigate('Chat', { chatId })
+      }
     }
   })
 }

diff --git a/apps/audius-client/packages/mobile/src/store/drawers/slice.ts b/apps/audius-client/packages/mobile/src/store/drawers/slice.ts
@@ -25,6 +25,7 @@ export type Drawer =
   | 'ChatActions'
   | 'ProfileActions'
   | 'BlockMessages'
+  | 'DeleteChat'
   | 'SupportersInfo'
   | 'InboxUnavailable'
 
@@ -51,9 +52,10 @@ export type DrawerData = {
   }
   LockedContent: undefined
   GatedContentUploadPrompt: undefined
-  ChatActions: { userId: number }
+  ChatActions: { userId: number; chatId: string }
   ProfileActions: undefined
   BlockMessages: { userId: number }
+  DeleteChat: { chatId: string }
   SupportersInfo: undefined
   InboxUnavailable: { userId: number }
 }
@@ -83,6 +85,7 @@ const initialState: DrawersState = {
   ChatActions: false,
   ProfileActions: false,
   BlockMessages: false,
+  DeleteChat: false,
   SupportersInfo: false,
   InboxUnavailable: false,
   data: null
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { BlockMessagesDrawer } from './BlockMessagesDrawer'