From bd2280bdb7e75605f507f0e5394d4a63240e16ff Mon Sep 17 00:00:00 2001
From: thoulee <thou_lee@outlook.com>
Date: Thu, 26 Sep 2024 22:42:31 +0800
Subject: [PATCH] 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 <thoulee21@example.com>
---
 src/components/RootStack.tsx |   2 +
 src/pages/index.ts           |   1 +
 src/pages/issueReport.tsx    | 115 +++++++++++++++++++++++++++++++++++
 src/pages/settings.tsx       |  22 ++++++-
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/issueReport.tsx

diff --git a/src/components/RootStack.tsx b/src/components/RootStack.tsx
index 71e7a42d..d5d64c11 100644
--- a/src/components/RootStack.tsx
+++ b/src/components/RootStack.tsx
@@ -10,6 +10,7 @@ import {
     AlbumDetail,
     Artist,
     Comments,
+    IssueReport,
     Login,
     LyricsScreen,
     MvDetail,
@@ -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>
     );
 }
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 0fc5b951..0e5f5640 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -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';
diff --git a/src/pages/issueReport.tsx b/src/pages/issueReport.tsx
new file mode 100644
index 00000000..38968dde
--- /dev/null
+++ b/src/pages/issueReport.tsx
@@ -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,
+    },
+});
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 1dd84335..3de9887f 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -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',
-                'thou_lee@outlook.com\nCopyright©2024 thouLee. All Rights Reserved.'
+                'thou_lee@outlook.com\nCopyright©2024 thouLee. All Rights Reserved.',
+                [{
+                  text: 'OK',
+                  onPress: () => HapticFeedback.trigger(
+                    HapticFeedbackTypes.effectClick
+                  ),
+                }]
               );
             }}
           />