[PAY-1437] Fix drawers sharing state causing crash (#3595)

apps/audius-client/packages/mobile/src/components/block-messages-drawer/BlockMessagesDrawer.tsx

@@ -8,8 +8,7 @@ import IconBlockMessages from 'app/assets/images/iconBlockMessages.svg'
 import IconInfo from 'app/assets/images/iconInfo.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 { useDrawer } from 'app/hooks/useDrawer'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles, flexRowCentered } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
@@ -106,9 +105,8 @@ export const BlockMessagesDrawer = () => {
   const neutralLight2 = useColor('neutralLight2')
   const neutral = useColor('neutral')
   const dispatch = useDispatch()
-  const { userId, shouldOpenChat } = useSelector((state: AppState) =>
-    getData<'BlockMessages'>(state)
-  )
+  const { data } = useDrawer('BlockMessages')
+  const { userId, shouldOpenChat } = data
   const user = useSelector((state) => getUser(state, { id: userId }))
   // Assuming blockees have already been fetched in ProfileActionsDrawer.
   const doesBlockUser = useSelector((state) => getDoesBlockUser(state, userId))

apps/audius-client/packages/mobile/src/components/chat-actions-drawer/ChatActionsDrawer.tsx

@@ -6,9 +6,9 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { Text } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
+import { useDrawer } from 'app/hooks/useDrawer'
 import { useNavigation } from 'app/hooks/useNavigation'
 import type { AppState } from 'app/store'
-import { getData } from 'app/store/drawers/selectors'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
 
@@ -50,9 +50,8 @@ export const ChatActionsDrawer = () => {
   const styles = useStyles()
   const dispatch = useDispatch()
   const navigation = useNavigation()
-  const { userId, chatId } = useSelector((state: AppState) =>
-    getData<'ChatActions'>(state)
-  )
+  const { data } = useDrawer('ChatActions')
+  const { userId, chatId } = data
   const doesBlockUser = useSelector((state: AppState) =>
     getDoesBlockUser(state, userId)
   )

apps/audius-client/packages/mobile/src/components/create-chat-actions-drawer/CreateChatActionsDrawer.tsx

@@ -6,9 +6,9 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { Text } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
+import { useDrawer } from 'app/hooks/useDrawer'
 import { useNavigation } from 'app/hooks/useNavigation'
 import type { AppState } from 'app/store'
-import { getData } from 'app/store/drawers/selectors'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
 
@@ -50,9 +50,8 @@ export const CreateChatActionsDrawer = () => {
   const styles = useStyles()
   const dispatch = useDispatch()
   const navigation = useNavigation()
-  const { userId } = useSelector((state: AppState) =>
-    getData<'CreateChatActions'>(state)
-  )
+  const { data } = useDrawer('CreateChatActions')
+  const { userId } = data
   const doesBlockUser = useSelector((state: AppState) =>
     getDoesBlockUser(state, userId)
   )

apps/audius-client/packages/mobile/src/components/delete-chat-drawer/DeleteChatDrawer.tsx

@@ -2,13 +2,12 @@ import { useCallback } from 'react'
 
 import { chatActions } from '@audius/common'
 import { View } from 'react-native'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } 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 { useDrawer } from 'app/hooks/useDrawer'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles, flexRowCentered } from 'app/styles'
 import { useColor } from 'app/utils/theme'
@@ -66,9 +65,8 @@ export const DeleteChatDrawer = () => {
   const styles = useStyles()
   const neutralLight2 = useColor('neutralLight2')
   const dispatch = useDispatch()
-  const { chatId } = useSelector((state: AppState) =>
-    getData<'DeleteChat'>(state)
-  )
+  const { data } = useDrawer('DeleteChat')
+  const { chatId } = data
 
   const closeDrawer = useCallback(() => {
     dispatch(

apps/audius-client/packages/mobile/src/components/inbox-unavailable-drawer/InboxUnavailableDrawer.tsx

@@ -16,8 +16,8 @@ import IconMessageLocked from 'app/assets/images/iconMessageLocked.svg'
 import IconTip from 'app/assets/images/iconTip.svg'
 import { Text, Button } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
+import { useDrawer } from 'app/hooks/useDrawer'
 import { useNavigation } from 'app/hooks/useNavigation'
-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'
@@ -151,9 +151,8 @@ export const InboxUnavailableDrawer = () => {
   const styles = useStyles()
   const neutralLight2 = useColor('neutralLight2')
 
-  const { userId, shouldOpenChat } = useSelector((state) =>
-    getData<'InboxUnavailable'>(state)
-  )
+  const { data } = useDrawer('InboxUnavailable')
+  const { userId, shouldOpenChat } = data
   const user = useSelector((state) => getUser(state, { id: userId }))
   const { callToAction } = useSelector((state) =>
     getCanCreateChat(state, { userId })

apps/audius-client/packages/mobile/src/hooks/useDrawer.ts

@@ -12,7 +12,9 @@ export const useDrawer = <DrawerType extends Drawer>(
 ) => {
   const dispatch = useDispatch()
   const visibleState = useSelector(getVisibility(drawerName))
-  const data = useSelector((state: AppState) => getData<DrawerType>(state))
+  const data = useSelector((state: AppState) =>
+    getData<DrawerType>(state, drawerName)
+  )
 
   const isOpen = visibleState === true
 

apps/audius-client/packages/mobile/src/screens/wallet-connect/components/WalletConnectDrawer.tsx

@@ -16,8 +16,6 @@ import { Text } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { useDrawer } from 'app/hooks/useDrawer'
-import type { AppState } from 'app/store'
-import { getData } from 'app/store/drawers/selectors'
 import { makeStyles } from 'app/styles'
 
 import { useCanConnectNewWallet } from '../useCanConnectNewWallet'
@@ -80,9 +78,7 @@ export const WalletConnectDrawer = () => {
   const supportedWalletServices = walletServices?.filter((service) =>
     SUPPORTED_SERVICES.has(service.name)
   )
-  const data = useSelector((state: AppState) =>
-    getData<'ConnectWallets'>(state)
-  )
+  const { data } = useDrawer('ConnectWallets')
 
   const uri = data?.uri
 

apps/audius-client/packages/mobile/src/store/drawers/selectors.ts

@@ -2,8 +2,10 @@ import type { AppState } from '../'
 
 import type { Drawer, DrawerData } from './slice'
 
-export const getData = <TDrawer extends keyof DrawerData>(state: AppState) =>
-  state.drawers.data as DrawerData[TDrawer]
+export const getData = <TDrawer extends keyof DrawerData>(
+  state: AppState,
+  drawer: Drawer
+) => state.drawers.data[drawer] as DrawerData[TDrawer]
 
 export const getVisibility = (drawer: Drawer) => (state: AppState) =>
   state.drawers[drawer]

apps/audius-client/packages/mobile/src/store/drawers/slice.ts

@@ -63,7 +63,7 @@ export type DrawerData = {
 }
 
 export type DrawersState = { [drawer in Drawer]: boolean | 'closing' } & {
-  data: Nullable<BaseDrawerData>
+  data: { [drawerData in Drawer]?: Nullable<DrawerData[Drawer]> }
 }
 
 const initialState: DrawersState = {
@@ -91,7 +91,7 @@ const initialState: DrawersState = {
   DeleteChat: false,
   SupportersInfo: false,
   InboxUnavailable: false,
-  data: null
+  data: {}
 }
 
 type SetVisibilityAction = PayloadAction<{
@@ -108,9 +108,9 @@ const slice = createSlice({
       const { drawer, visible, data } = action.payload
       state[drawer] = visible
       if (visible && data) {
-        state.data = data
+        state.data[drawer] = data
       } else if (!visible) {
-        state.data = null
+        state.data[drawer] = null
       }
     }
   }