-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add IssueReport screen and related settings screen navigation
Add the IssueReport screen and navigation to the app. This screen allows users to report issues or provide feedback. It includes a form for users to enter their email address and describe the issue they encountered. The screen also displays the event ID for reference and allows users to copy it to the clipboard. The navigation to this screen is added to the Settings page. Co-authored-by: thoulee21 <[email protected]>
- Loading branch information
Showing
4 changed files
with
139 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import Clipboard from '@react-native-clipboard/clipboard'; | ||
import { useNavigation } from '@react-navigation/native'; | ||
import * as Sentry from '@sentry/react-native'; | ||
import { UserFeedback } from '@sentry/react-native'; | ||
import React, { useState } from 'react'; | ||
import { ScrollView, StyleSheet, ToastAndroid, View } from 'react-native'; | ||
import HapticFeedback, { HapticFeedbackTypes } from 'react-native-haptic-feedback'; | ||
import { Appbar, HelperText, TextInput, useTheme } from 'react-native-paper'; | ||
import { BlurBackground, VersionItem } from '../components'; | ||
import { useAppSelector } from '../hook'; | ||
import { selectUser } from '../redux/slices'; | ||
|
||
export const IssueReport = () => { | ||
const navigation = useNavigation(); | ||
const appTheme = useTheme(); | ||
const currentUser = useAppSelector(selectUser); | ||
|
||
const [issue, setIssue] = useState(''); | ||
const [email, setEmail] = useState(''); | ||
|
||
const sentryId = Sentry.lastEventId() || Sentry.captureMessage('Report Issue'); | ||
|
||
const report = () => { | ||
const feedback: UserFeedback = { | ||
event_id: sentryId, | ||
name: currentUser.username, | ||
email: email, | ||
comments: issue, | ||
}; | ||
|
||
Sentry.captureUserFeedback(feedback); | ||
HapticFeedback.trigger(HapticFeedbackTypes.effectTick); | ||
ToastAndroid.show('Issue reported', ToastAndroid.SHORT); | ||
}; | ||
|
||
const emailHasErrors = () => { | ||
return (!email.includes('@') || !email.includes('.')) && email.length > 0; | ||
}; | ||
|
||
return ( | ||
<BlurBackground> | ||
<Appbar.Header style={styles.appbar}> | ||
<Appbar.Action | ||
icon="arrow-left" | ||
onPress={navigation.goBack} | ||
/> | ||
<Appbar.Content title="Report Issue" /> | ||
<Appbar.Action | ||
icon="send" | ||
onPress={report} | ||
disabled={!issue || emailHasErrors()} | ||
color={appTheme.colors.primary} | ||
/> | ||
</Appbar.Header> | ||
|
||
<ScrollView> | ||
<VersionItem /> | ||
|
||
<View style={styles.input}> | ||
<TextInput | ||
mode="outlined" | ||
label="Email (Optional)" | ||
value={email} | ||
onChangeText={setEmail} | ||
placeholder="Please enter your email address" | ||
keyboardType="email-address" | ||
returnKeyType="next" | ||
textContentType="emailAddress" | ||
error={emailHasErrors()} | ||
right={<TextInput.Icon | ||
icon="close" | ||
disabled={!email} | ||
onPress={() => { setEmail(''); }} | ||
/>} | ||
/> | ||
<HelperText type="error" visible={emailHasErrors()}> | ||
Email address is invalid! | ||
</HelperText> | ||
</View> | ||
<View style={styles.input}> | ||
<TextInput | ||
mode="outlined" | ||
label="Issue Description" | ||
multiline | ||
numberOfLines={10} | ||
value={issue} | ||
onChangeText={setIssue} | ||
placeholder="Please describe the issue you encountered" | ||
autoFocus | ||
/> | ||
<HelperText | ||
type="info" | ||
onLongPress={() => { | ||
Clipboard.setString(sentryId); | ||
ToastAndroid.show('Event ID copied', ToastAndroid.SHORT); | ||
HapticFeedback.trigger(HapticFeedbackTypes.effectDoubleClick); | ||
}} | ||
> | ||
Event ID: {sentryId} | ||
</HelperText> | ||
</View> | ||
</ScrollView> | ||
</BlurBackground> | ||
); | ||
}; | ||
|
||
const styles = StyleSheet.create({ | ||
appbar: { | ||
backgroundColor: 'transparent', | ||
}, | ||
input: { | ||
marginHorizontal: 16, | ||
marginVertical: 4, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -38,12 +38,32 @@ export function Settings() { | |
|
||
<List.Section title="General"> | ||
<VersionItem /> | ||
<List.Item | ||
title="Report Issue" | ||
left={(props) => <List.Icon {...props} icon="message-text-outline" />} | ||
onPress={() => { | ||
//@ts-expect-error | ||
navigation.navigate('IssueReport'); | ||
HapticFeedback.trigger( | ||
HapticFeedbackTypes.effectClick | ||
); | ||
}} | ||
description="Report an issue or send feedback" | ||
/> | ||
<List.Item | ||
title="About this app" | ||
left={(props) => <List.Icon {...props} icon="information-outline" />} | ||
onPress={() => { | ||
HapticFeedback.trigger(HapticFeedbackTypes.effectClick); | ||
Alert.alert( | ||
'Image Viewer', | ||
'[email protected]\nCopyright©2024 thouLee. All Rights Reserved.' | ||
'[email protected]\nCopyright©2024 thouLee. All Rights Reserved.', | ||
[{ | ||
text: 'OK', | ||
onPress: () => HapticFeedback.trigger( | ||
HapticFeedbackTypes.effectClick | ||
), | ||
}] | ||
); | ||
}} | ||
/> | ||
|