Skip to content

Commit

Permalink
feat: Add IssueReport screen and related settings screen navigation
Browse files Browse the repository at this point in the history
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
thoulee21 and thoulee21 committed Sep 26, 2024
1 parent a283c86 commit bd2280b
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 1 deletion.
2 changes: 2 additions & 0 deletions src/components/RootStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
AlbumDetail,
Artist,
Comments,
IssueReport,
Login,
LyricsScreen,
MvDetail,
Expand Down Expand Up @@ -53,6 +54,7 @@ export function RootStack() {
<Stack.Screen name="Artist" component={Artist} />
<Stack.Screen name="AlbumDetail" component={AlbumDetail} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="IssueReport" component={IssueReport} />
</Stack.Navigator>
);
}
1 change: 1 addition & 0 deletions src/pages/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export * from './album';
export * from './artist';
export * from './comments';
export * from './favs';
export * from './issueReport';
export * from './login';
export * from './lyrics';
export * from './mv';
Expand Down
115 changes: 115 additions & 0 deletions src/pages/issueReport.tsx
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,
},
});
22 changes: 21 additions & 1 deletion src/pages/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
),
}]
);
}}
/>
Expand Down

0 comments on commit bd2280b

Please sign in to comment.