Delete account (#331)

* Delete account works. TODO: Refactor duplicated code and handle modal notification popup * add code suggestion * fix popup notifications on logout
dropy-project · Nov 30, 2022 · 10eb3ea · 10eb3ea
1 parent 20fca0d
commit 10eb3ea
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 36 deletions.
diff --git a/App.js b/App.js
@@ -14,6 +14,7 @@ import {
 import * as Sentry from '@sentry/react-native';
 import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';
 
+import { LogBox } from 'react-native';
 import Navigation from './src/navigation/Navigation';
 import UserProvider from './src/states/UserContextProvider';
 import GeolocationProvider from './src/states/GeolocationContextProvider';
@@ -23,7 +24,6 @@ import OverlayContextProvider from './src/states/OverlayContextProvider';
 import SocketContextProvider from './src/states/SocketContextProvider';
 import ConversationsContextProvider from './src/states/ConversationsContextProvider';
 
-
 Sentry.init({
   dsn: 'https://[email protected]/6567185',
   // eslint-disable-next-line no-undef
@@ -34,6 +34,8 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
+LogBox.ignoreLogs(['rgb']);
+
 const NavigationApp = () => (
   <NavigationContainer>
     <OverlayContextProvider>
@@ -74,5 +76,3 @@ export default function App() {
     </ActionSheetProvider>
   );
 }
-
-
diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js
@@ -16,6 +16,7 @@ import ProfileEditScreen from '../screens/ProfileEditScreen';
 import BlockedUsersScreen from '../screens/BlockedUsersScreen';
 import UserDropiesScreen from '../screens/UserDropiesScreen';
 import Onboarding from '../screens/Onboarding';
+import AccountScreen from '../screens/AccountScreen';
 
 const MainStack = createStackNavigator();
 
@@ -45,6 +46,7 @@ export default function Navigation() {
       <MainStack.Screen name='BlockedUsers' component={BlockedUsersScreen} />
       <MainStack.Screen name='UserDropies' component={UserDropiesScreen} />
       <MainStack.Screen name='Onboarding' component={Onboarding} />
+      <MainStack.Screen name='Account' component={AccountScreen} />
     </MainStack.Navigator>
   );
 }
diff --git a/src/screens/AccountScreen.js b/src/screens/AccountScreen.js
@@ -0,0 +1,121 @@
+import { AntDesign } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { responsiveWidth } from 'react-native-responsive-dimensions';
+import GoBackHeader from '../components/other/GoBackHeader';
+import useOverlay from '../hooks/useOverlay';
+import API from '../services/API';
+import Styles, { Colors, Fonts } from '../styles/Styles';
+
+const AccountScreen = ({ navigation }) => {
+  const { sendAlert } = useOverlay();
+
+
+  const handleDeleteAccount = async () => {
+    const confirmed = await sendAlert({
+      title: 'Are you sure?',
+      description: 'Your account and all your data will be deleted!',
+      denyText: 'Cancel',
+      validateText: 'Delete',
+    });
+
+    if (!confirmed)
+      return;
+
+    try {
+      const response = await API.deleteAccount();
+      console.log(response.data);
+      await API.logout();
+      navigation.reset({
+        index: 0,
+        routes: [
+          {
+            name: 'Splash',
+            params: { cancelAutoLogin: true },
+          }
+        ],
+      });
+    } catch (error) {
+      sendAlert({
+        title: 'Oh no...',
+        description: 'We couldn\'t delete your account..\nCheck your internet connection!',
+      });
+      console.error('Error while deleting user', error?.response?.data || error);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <GoBackHeader text='Account' />
+      <View style={styles.content}>
+        <TouchableOpacity style={{ ...styles.navigateContainer, marginTop: 10 }} disabled>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Subscription</Text>
+          <View style={styles.navigateArrow}>
+            <AntDesign name='arrowright' size={24} color={Colors.white} />
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.navigateContainer} disabled>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Restore purchase</Text>
+          <View style={styles.navigateArrow}>
+            <AntDesign name='arrowright' size={24} color={Colors.white} />
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.navigateContainer} disabled>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Reset password</Text>
+          <View style={styles.navigateArrow}>
+            <AntDesign name='arrowright' size={24} color={Colors.white} />
+          </View>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.spacer} />
+      <TouchableOpacity onPress={handleDeleteAccount}>
+        <Text style={{ ...Fonts.regular(12, Colors.lightGrey) }}> Delete my account </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default AccountScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: Colors.white,
+    ...Styles.safeAreaView,
+  },
+  content: {
+    width: responsiveWidth(100),
+    alignItems: 'center',
+    marginTop: 20,
+    height: '80%',
+  },
+  navigateContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: Colors.lighterGrey,
+    width: '90%',
+    borderRadius: 20,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    ...Styles.softShadows,
+    shadowOpacity: 0.2,
+    height: 50,
+    marginBottom: 10,
+  },
+  navigateArrow: {
+    ...Styles.center,
+    backgroundColor: Colors.darkGrey,
+    height: '95%',
+    width: 50,
+    borderRadius: 12,
+  },
+  spacer: {
+    width: '90%',
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: Colors.lighterGrey,
+    marginVertical: 20,
+  },
+});
diff --git a/src/screens/SettingScreen.js b/src/screens/SettingScreen.js
@@ -35,11 +35,12 @@ const SettingsScreen = ({ navigation }) => {
   const notificatinsSettingsRef = useRef(null);
 
   useEffect(() => {
-    fetchNotificationsSettings();
-    return () => {
+    const unsubscribe = navigation.addListener('unfocus', () => {
+      fetchNotificationsSettings();
       if (notificatinsSettingsRef.current != null)
         postNotificationsSettings(notificatinsSettingsRef.current);
-    };
+    });
+    return unsubscribe;
   }, []);
 
   useEffect(() => {
@@ -57,7 +58,10 @@ const SettingsScreen = ({ navigation }) => {
         description: 'We were unable to retrieve your notification settings',
         validateText: 'Ok',
       });
-      console.error('Error while fetch notifications settings', error.response?.data || error);
+      console.error(
+        'Error while fetch notifications settings',
+        error.response?.data || error
+      );
       navigation.goBack();
     }
   };
@@ -72,7 +76,10 @@ const SettingsScreen = ({ navigation }) => {
         description: 'We were unable to update your notification settings',
         validateText: 'Ok',
       });
-      console.error('Error while update notifications settings', error.response?.data || error);
+      console.error(
+        'Error while update notifications settings',
+        error.response?.data || error
+      );
     }
   };
 
@@ -96,12 +103,15 @@ const SettingsScreen = ({ navigation }) => {
       <GoBackHeader text='Settings' />
 
       <ScrollView contentContainerStyle={styles.scrollViewContent}>
-
         <Text style={styles.titleText}>Background location</Text>
         <View style={styles.linkContainer}>
           <View style={{ flex: 0.9 }}>
-            <Text style={{ ...Fonts.regular(11, Colors.grey) }}>Get alerted when you walk onto a drop with the app closed.</Text>
-            <Text style={{ ...Fonts.bold(12, Colors.purple2), marginTop: 2 }}>Highly recommended</Text>
+            <Text style={{ ...Fonts.regular(11, Colors.grey) }}>
+              Get alerted when you walk onto a drop with the app closed.
+            </Text>
+            <Text style={{ ...Fonts.bold(12, Colors.purple2), marginTop: 2 }}>
+              Highly recommended
+            </Text>
           </View>
           <Switch
             value={backgroundGeolocationEnabled}
@@ -119,81 +129,113 @@ const SettingsScreen = ({ navigation }) => {
         <FormToggle
           value={notificationsSettings?.dailyDropyReminder}
           title='Remind me to drop something daily'
-          onValueChange={(value) => setNotificationsSettings((old) => ({ ...old, dailyDropyReminder: value }))}
+          onValueChange={(value) => setNotificationsSettings((old) => ({
+            ...old,
+            dailyDropyReminder: value,
+          }))
+          }
         />
         <FormToggle
           value={notificationsSettings?.dropyCollected}
           title='When one of my drop is collected'
-          onValueChange={(value) => setNotificationsSettings((old) => ({ ...old, dropyCollected: value }))}
+          onValueChange={(value) => setNotificationsSettings((old) => ({ ...old, dropyCollected: value }))
+          }
         />
         <FormToggle
           value={notificationsSettings?.newFeature}
           title='When a new feature is available'
-          onValueChange={(value) => setNotificationsSettings((old) => ({ ...old, newFeature: value }))}
+          onValueChange={(value) => setNotificationsSettings((old) => ({ ...old, newFeature: value }))
+          }
         />
 
-        <Text style={styles.titleText}>Others</Text>
+        {/* <Text style={styles.titleText}>Others</Text>
         <FormToggle disabled title='Vibrations' />
-        <FormToggle disabled title='Show my connection status' />
+        <FormToggle disabled title='Show my connection status' /> */}
 
         <View style={styles.spacer} />
 
-        <TouchableOpacity style={{ ...styles.navigateContainer, marginTop: 10 }} onPress={() => navigation.navigate('UserDropies')}>
+        <TouchableOpacity
+          style={{ ...styles.navigateContainer, marginTop: 10 }}
+          onPress={() => navigation.navigate('UserDropies')}>
           <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>My drops</Text>
           <View style={styles.navigateArrow}>
             <AntDesign name='arrowright' size={24} color={Colors.white} />
           </View>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.navigateContainer} onPress={() => navigation.navigate('BlockedUsers')}>
-          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Blocked users</Text>
+        <TouchableOpacity
+          style={styles.navigateContainer}
+          onPress={() => navigation.navigate('BlockedUsers')}>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>
+            Blocked users
+          </Text>
+          <View style={styles.navigateArrow}>
+            <AntDesign name='arrowright' size={24} color={Colors.white} />
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.navigateContainer}
+          onPress={() => navigation.navigate('Account')}>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>My account</Text>
           <View style={styles.navigateArrow}>
             <AntDesign name='arrowright' size={24} color={Colors.white} />
           </View>
         </TouchableOpacity>
 
         <View style={styles.spacer} />
 
-        <TouchableOpacity style={styles.linkContainer} onPress={() => Linking.openURL('https://dropy-app.com/help')}>
+        <TouchableOpacity
+          style={styles.linkContainer}
+          onPress={() => Linking.openURL('https://dropy-app.com/help')}>
           <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Help</Text>
           <AntDesign name='arrowright' size={24} color={Colors.darkGrey} />
         </TouchableOpacity>
-        <TouchableOpacity style={styles.linkContainer} onPress={() => Linking.openURL('https://dropy-app.com/about')}>
+        <TouchableOpacity
+          style={styles.linkContainer}
+          onPress={() => Linking.openURL('https://dropy-app.com/about')}>
           <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>About</Text>
           <AntDesign name='arrowright' size={24} color={Colors.darkGrey} />
         </TouchableOpacity>
-        <TouchableOpacity style={styles.linkContainer} onPress={() => Linking.openURL('https://dropy-app.com/privacy-policy.html')}>
-          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Privacy Policy</Text>
+        <TouchableOpacity
+          style={styles.linkContainer}
+          onPress={() => Linking.openURL('https://dropy-app.com/privacy-policy.html')
+          }>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>
+            Privacy Policy
+          </Text>
           <AntDesign name='arrowright' size={24} color={Colors.darkGrey} />
         </TouchableOpacity>
-        <TouchableOpacity style={styles.linkContainer} onPress={() => Linking.openURL('https://dropy-app.com/terms-conditions.html')}>
-          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>Terms & Conditions</Text>
+        <TouchableOpacity
+          style={styles.linkContainer}
+          onPress={() => Linking.openURL('https://dropy-app.com/terms-conditions.html')
+          }>
+          <Text style={{ ...Fonts.bold(12, Colors.darkGrey) }}>
+            Terms & Conditions
+          </Text>
           <AntDesign name='arrowright' size={24} color={Colors.darkGrey} />
         </TouchableOpacity>
 
         <View style={styles.spacer} />
 
         <TouchableOpacity
           style={{ ...styles.linkContainer, ...Styles.center }}
-          onPress={logout}
-        >
+          onPress={logout}>
           <Text style={{ ...Fonts.bold(12, Colors.red) }}>Logout</Text>
         </TouchableOpacity>
 
         <View style={styles.spacer} />
 
-        {/* eslint-disable-next-line no-undef */}
-        <TouchableOpacity onLongPress={() => (user.isDeveloper || __DEV__) && setDeveloperMode((old) => !old)} activeOpacity={1}>
+        <TouchableOpacity
+          // eslint-disable-next-line no-undef
+          onLongPress={() => (user.isDeveloper || __DEV__) && setDeveloperMode((old) => !old)
+          }
+          activeOpacity={1}>
           <View style={styles.infoTextContainer}>
             <Ionicons name='git-branch' size={19} color={Colors.darkGrey} />
-            <Text style={styles.infoText}>
-              {AppInfo.version}
-            </Text>
+            <Text style={styles.infoText}>{AppInfo.version}</Text>
           </View>
           <View style={styles.infoTextContainer}>
             <Feather name='flag' size={17} color={Colors.darkGrey} />
-            <Text style={styles.infoText}>
-              {AppInfo.versionFlag}
-            </Text>
+            <Text style={styles.infoText}>{AppInfo.versionFlag}</Text>
           </View>
           <View style={styles.infoTextContainer}>
             <Feather name='server' size={17} color={Colors.darkGrey} />
@@ -217,7 +259,6 @@ const SettingsScreen = ({ navigation }) => {
 
 export default SettingsScreen;
 
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/src/services/API.js b/src/services/API.js
@@ -190,6 +190,11 @@ const getUserProfile = async () => {
   return response;
 };
 
+const deleteAccount = async () => {
+  const response = await axios.delete('/user/delete');
+  return response;
+};
+
 const logout = async () => {
   await init();
   const removedItem = await Storage.removeItem('@auth_tokens');
@@ -234,6 +239,7 @@ const API = {
   getNotificationsSettings,
   postNotificationsSettings,
   init,
+  deleteAccount,
 };
 
 export default API;