Skip to content

Commit

Permalink
fix: close contact modal after deletion (#141)
Browse files Browse the repository at this point in the history 
Signed-off-by: Poonam Ghewande <[email protected]>
  • Loading branch information
@poonam-ghewande
poonam-ghewande committed Apr 16, 2024
1 parent 63f8fc7 commit 34e9d37
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 96 deletions.
91 changes: 54 additions & 37 deletions app/screens/Connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useNotifications } from '../hooks/notifications'
import { Screens, TabStacks, DeliveryStackParams, Stacks } from '../types/navigators'
import { useAppAgent } from '../utils/agent'
import { testIdWithKey } from '../utils/testable'
import { heightPercentageToDP } from 'react-native-responsive-screen'

type ConnectionProps = StackScreenProps<DeliveryStackParams, Screens.Connection>

Expand Down Expand Up @@ -72,6 +73,11 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
marginTop: 'auto',
margin: 20,
},
controlsContainerHome: {
justifyContent: 'center',
alignSelf: 'center',
marginTop: heightPercentageToDP('50%'),
},
delayMessageText: {
textAlign: 'center',
marginTop: 20,
Expand Down Expand Up @@ -151,7 +157,7 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
oobRecord &&
(!goalCode || (!goalCode.startsWith('aries.vc.verify') && !goalCode.startsWith('aries.vc.issue')))
) {
navigation.navigate(Stacks.ConnectionStack, {
navigation.navigate(Stacks.ContactStack, {
screen: Screens.ContactDetails,
params: { connectionId: connectionId },
})
Expand Down Expand Up @@ -196,44 +202,55 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
}, [notifications])

return (
<Modal
visible={state.isVisible}
transparent={true}
animationType={'slide'}
onRequestClose={() => {
dispatch({ isVisible: false })
}}>
<SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
<ScrollView style={[styles.container]}>
<View style={[styles.messageContainer]}>
<Text
style={[TextTheme.modalHeadingThree, styles.messageText]}
testID={testIdWithKey('CredentialOnTheWay')}>
{t('Connection.JustAMoment')}
</Text>
</View>
<View>
<Modal
visible={state.isVisible}
transparent={true}
animationType={'slide'}
onRequestClose={() => {
dispatch({ isVisible: false })
}}>
<SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
<ScrollView style={[styles.container]}>
<View style={[styles.messageContainer]}>
<Text
style={[TextTheme.modalHeadingThree, styles.messageText]}
testID={testIdWithKey('CredentialOnTheWay')}>
{t('Connection.JustAMoment')}
</Text>
</View>

<View style={[styles.image]}>
<ConnectionLoading />
</View>
<View style={[styles.image]}>
<ConnectionLoading />
</View>

{state.shouldShowDelayMessage && (
<Text style={[TextTheme.modalNormal, styles.delayMessageText]} testID={testIdWithKey('TakingTooLong')}>
{t('Connection.TakingTooLong')}
</Text>
)}
</ScrollView>
<View style={[styles.controlsContainer]}>
<Button
title={t('Loading.BackToHome')}
accessibilityLabel={t('Loading.BackToHome')}
testID={testIdWithKey('BackToHome')}
onPress={onDismissModalTouched}
buttonType={ButtonType.ModalSecondary}
/>
</View>
</SafeAreaView>
</Modal>
{state.shouldShowDelayMessage && (
<Text style={[TextTheme.modalNormal, styles.delayMessageText]} testID={testIdWithKey('TakingTooLong')}>
{t('Connection.TakingTooLong')}
</Text>
)}
</ScrollView>
<View style={[styles.controlsContainer]}>
<Button
title={t('Loading.BackToHome')}
accessibilityLabel={t('Loading.BackToHome')}
testID={testIdWithKey('BackToHome')}
onPress={onDismissModalTouched}
buttonType={ButtonType.ModalSecondary}
/>
</View>
</SafeAreaView>
</Modal>
<View style={[styles.controlsContainerHome]}>
<Button
title={t('Loading.BackToHome')}
accessibilityLabel={t('Loading.BackToHome')}
testID={testIdWithKey('BackToHome')}
onPress={onDismissModalTouched}
buttonType={ButtonType.ModalSecondary}
/>
</View>
</View>
)
}

Expand Down
101 changes: 55 additions & 46 deletions app/screens/ContactDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { CredentialState, useConnectionById, useCredentialByState } from '@adeya/ssi'
import { useNavigation } from '@react-navigation/core'
import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { DeviceEventEmitter, BackHandler, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { DeviceEventEmitter, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import Toast from 'react-native-toast-message'

import Button, { ButtonType } from '../components/buttons/Button'
import CommonRemoveModal from '../components/modals/CommonRemoveModal'
import { ToastType } from '../components/toast/BaseToast'
import { EventTypes } from '../constants'
Expand Down Expand Up @@ -40,6 +41,11 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
padding: 20,
backgroundColor: ColorPallet.brand.secondaryBackground,
},
controlsContainer: {
marginTop: 'auto',
margin: 20,
justifyContent: 'center',
},
})

const handleOnRemove = () => {
Expand All @@ -57,12 +63,11 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
}

await agent.connections.deleteById(connection.id)

setIsRemoveModalDisplayed(false)
navigation.navigate(Screens.Contacts)

// FIXME: This delay is a hack so that the toast doesn't appear until the modal is dismissed
await new Promise(resolve => setTimeout(resolve, 1000))

Toast.show({
type: ToastType.Success,
text1: t('ContactDetails.ContactRemoved'),
Expand All @@ -72,17 +77,6 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
}
}

useEffect(() => {
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
navigation.navigate(Screens.Home as never)
return true
})

return () => {
backHandler.remove()
}
}, [])
const handleCancelRemove = () => {
setIsRemoveModalDisplayed(false)
}
Expand All @@ -96,45 +90,60 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
}

const callOnRemove = useCallback(() => handleOnRemove(), [])
const callSubmitRemove = useCallback(() => handleSubmitRemove(), [])
const callSubmitRemove = useCallback(() => handleSubmitRemove(), [connection])
const callCancelRemove = useCallback(() => handleCancelRemove(), [])
const callGoToCredentials = useCallback(() => handleGoToCredentials(), [])
const callCancelUnableToRemove = useCallback(() => handleCancelUnableRemove(), [])

const contactLabel = useMemo(() => getConnectionName(connection) ?? '', [connection])

const onDismissModalTouched = () => {
navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
}
return (
<SafeAreaView style={{ flexGrow: 1 }} edges={['bottom', 'left', 'right']}>
<View style={styles.contentContainer}>
<Text style={{ ...TextTheme.headingThree }}>{contactLabel}</Text>
<Text style={{ ...TextTheme.normal, marginTop: 20 }}>
{t('ContactDetails.DateOfConnection', {
date: connection?.createdAt ? formatTime(connection.createdAt, { includeHour: true }) : '',
})}
</Text>
{connection && (
<View>
<View style={styles.contentContainer}>
<Text style={{ ...TextTheme.headingThree }}>{contactLabel}</Text>
<Text style={{ ...TextTheme.normal, marginTop: 20 }}>
{t('ContactDetails.DateOfConnection', {
date: connection?.createdAt ? formatTime(connection.createdAt, { includeHour: true }) : '',
})}
</Text>
</View>
<TouchableOpacity
onPress={callOnRemove}
accessibilityLabel={t('ContactDetails.RemoveContact')}
accessibilityRole={'button'}
testID={testIdWithKey('RemoveFromWallet')}
style={[styles.contentContainer, { marginTop: 10 }]}>
<Text style={{ ...TextTheme.normal, color: ColorPallet.semantic.error }}>
{t('ContactDetails.RemoveContact')}
</Text>
</TouchableOpacity>
<CommonRemoveModal
usage={ModalUsage.ContactRemove}
visible={isRemoveModalDisplayed}
onSubmit={callSubmitRemove}
onCancel={callCancelRemove}
/>
<CommonRemoveModal
usage={ModalUsage.ContactRemoveWithCredentials}
visible={isCredentialsRemoveModalDisplayed}
onSubmit={callGoToCredentials}
onCancel={callCancelUnableToRemove}
/>
</View>
)}
<View style={[styles.controlsContainer]}>
<Button
title={t('Loading.BackToHome')}
accessibilityLabel={t('Loading.BackToHome')}
testID={testIdWithKey('BackToHome')}
onPress={onDismissModalTouched}
buttonType={ButtonType.ModalSecondary}
/>
</View>
<TouchableOpacity
onPress={callOnRemove}
accessibilityLabel={t('ContactDetails.RemoveContact')}
accessibilityRole={'button'}
testID={testIdWithKey('RemoveFromWallet')}
style={[styles.contentContainer, { marginTop: 10 }]}>
<Text style={{ ...TextTheme.normal, color: ColorPallet.semantic.error }}>
{t('ContactDetails.RemoveContact')}
</Text>
</TouchableOpacity>
<CommonRemoveModal
usage={ModalUsage.ContactRemove}
visible={isRemoveModalDisplayed}
onSubmit={callSubmitRemove}
onCancel={callCancelRemove}
/>
<CommonRemoveModal
usage={ModalUsage.ContactRemoveWithCredentials}
visible={isCredentialsRemoveModalDisplayed}
onSubmit={callGoToCredentials}
onCancel={callCancelUnableToRemove}
/>
</SafeAreaView>
)
}
Expand Down
38 changes: 25 additions & 13 deletions app/screens/OrganizationDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useConnections } from '@adeya/ssi'
import { RouteProp, useNavigation, useRoute } from '@react-navigation/core'
import React, { useMemo } from 'react'
import React, { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { View, StyleSheet, Text, Image, ScrollView } from 'react-native'
import { heightPercentageToDP as hp } from 'react-native-responsive-screen'
Expand Down Expand Up @@ -30,6 +30,8 @@ const OrganizationDetails: React.FC = () => {
const { t } = useTranslation()
const params = useRoute<RouteProp<Record<string, OrganizationDetailProps>, string>>().params
const { organizationDetailData, credentialDetailData } = useOrganizationDetailData(params?.orgSlug)
const [invitationUrl, setinvitationUrl] = useState('')
const [disableConnect, setdisableConnect] = useState(false)
const { records } = useConnections()
const connections = records

Expand Down Expand Up @@ -175,33 +177,42 @@ const OrganizationDetails: React.FC = () => {
}
}
}

useEffect(() => {
const [agentInvitations] = organizationDetailData.map(item => item?.agent_invitations)

if (!agentInvitations || agentInvitations.length === 0) {
return
}
let connectionInvitationUrl = ''
if (agentInvitations.length === 1) {
connectionInvitationUrl = agentInvitations[0]?.connectionInvitation
setinvitationUrl(connectionInvitationUrl)
} else if (agentInvitations.length > 1) {
connectionInvitationUrl = agentInvitations[agentInvitations.length - 1]?.connectionInvitation
setinvitationUrl(connectionInvitationUrl)
}
}, [organizationDetailData])
const connectOrganization = async () => {
setdisableConnect(true)
try {
const [agentInvitations] = organizationDetailData.map(item => item?.agent_invitations)

if (!agentInvitations || agentInvitations.length === 0) {
if (!invitationUrl) {
Toast.show({
type: ToastType.Error,
text1: 'No agent invitations available',
text1: 'No connection invitation available',
})
setdisableConnect(false)
return
}
let connectionInvitationUrl = ''
if (agentInvitations.length === 1) {
connectionInvitationUrl = agentInvitations[0]?.connectionInvitation
} else if (agentInvitations.length > 1) {
connectionInvitationUrl = agentInvitations[agentInvitations.length - 1]?.connectionInvitation
}

await handleInvitation(connectionInvitationUrl)
await handleInvitation(invitationUrl)
} catch (error) {
Toast.show({
type: ToastType.Error,
text1: 'Accepting connection invitation failed',
})
}
}

return (
<View style={styles.container}>
<View style={styles.headerTextView}>
Expand Down Expand Up @@ -253,6 +264,7 @@ const OrganizationDetails: React.FC = () => {
accessibilityLabel={'Connect'}
testID={testIdWithKey('Connect')}
buttonType={ButtonType.Primary}
disabled={disableConnect}
/>
</View>
)}
Expand Down

0 comments on commit 34e9d37

Please sign in to comment.