Add delete users functionality

calblueprint · Jun 13, 2024 · cd75cfa · cd75cfa
1 parent 11f881d
commit cd75cfa
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -5,16 +5,21 @@ This project is designed and developed by a team of UC Berkeley students through
 Learn more about [Girls Write Now](https://girlswritenow.org/) and [Cal Blueprint](https://calblueprint.org/).
 
 ## App Preview
+
 ### Story Search/Filtering
+
 https://github.com/calblueprint/girls-write-now/assets/34043950/6277c625-fa8a-495d-b2eb-ba70807cfd87
 
 ### Story Recommendation
+
 ![Simulator Screen Recording - iPhone 15 - 2024-04-25 at 14 09 19](https://github.com/calblueprint/girls-write-now/assets/34043950/6a92dbf7-be0e-4210-8a66-35fddd578fee)
 
 ### Saving/Favoriting Stories
+
 ![saved stories](https://github.com/calblueprint/girls-write-now/assets/34043950/e40b5a50-d53c-497a-8b70-433def6dde67)
 
 ### Reacting To Stories
+
 ![reactions](https://github.com/calblueprint/girls-write-now/assets/34043950/32d5c54e-5a4e-4517-8475-ea38b2e4cf69)
 
 ---
@@ -77,4 +82,3 @@ We strongly recommend using a Node version manager like [nvm](https://github.com
    - **Expo Go (Recommended)**: [download Expo Go](https://docs.expo.dev/get-started/installation/#2-expo-go-app-for-android-and) on your phone, **connect to same network as your laptop**, and use your phone camera to scan the QR code displayed in the command line.
    - Web: typing `w` into the expo command line opens the app in a web view.
      - Warning: since the app is designed to be used on a mobile app, web compatibility might be limited, and some functionality might be different when using the web setup.
-
diff --git a/src/app/(tabs)/settings/index.tsx b/src/app/(tabs)/settings/index.tsx
@@ -7,6 +7,7 @@ import {
   Platform,
   Pressable,
   Appearance,
+  TouchableOpacity,
 } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -22,6 +23,7 @@ import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
+import { deleteUser } from '../../../queries/auth';
 
 /*
  * This screen shows the user's profile information, and allows the user to edit profile information.
@@ -114,6 +116,37 @@ function SettingsScreen() {
     if (!session) resetAndPushToRouter('/auth/login');
   }, [session]);
 
+  const showAlert = () =>
+    Alert.alert(
+      'Are you sure you want to delete your account?',
+      '',
+      [
+        {
+          text: 'Cancel',
+          onPress: () => {},
+          style: 'cancel',
+        },
+        {
+          text: 'OK',
+          onPress: onDelete,
+          style: 'destructive',
+        },
+      ],
+      {
+        cancelable: true,
+        onDismiss: () => {},
+      },
+    );
+
+  const onDelete = async () => {
+    const uuid = session?.user.id;
+
+    if (uuid) {
+      deleteUser(uuid);
+      signOut();
+    }
+  };
+
   const updateProfile = async () => {
     try {
       setLoading(true);
@@ -206,7 +239,39 @@ function SettingsScreen() {
           </View>
 
           <Text style={[globalStyles.h1, styles.heading]}>Settings</Text>
-          <Text style={[globalStyles.h2, styles.subheading]}>Account</Text>
+          <View
+            style={[
+              styles.subheading,
+              { flex: 1, gap: 14, flexDirection: 'row' },
+            ]}
+          >
+            <Text style={globalStyles.h2}>Account</Text>
+            <View
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                alignSelf: 'flex-end',
+                paddingBottom: 3,
+              }}
+            >
+              <Text style={[globalStyles.errorMessage, { color: colors.grey }]}>
+                (
+              </Text>
+              <TouchableOpacity onPress={showAlert}>
+                <Text
+                  style={[
+                    globalStyles.errorMessage,
+                    { color: colors.grey, textDecorationLine: 'underline' },
+                  ]}
+                >
+                  Delete account
+                </Text>
+              </TouchableOpacity>
+              <Text style={[globalStyles.errorMessage, { color: colors.grey }]}>
+                )
+              </Text>
+            </View>
+          </View>
 
           <View style={styles.staticData}>
             <AccountDataDisplay label="First Name" value={firstName} />

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 
 import SplashScreen from '../components/SplashScreen/SplashScreen';
 import { useSession } from '../utils/AuthContext';
+
 import {
   useFonts,
   Manrope_700Bold,

diff --git a/src/queries/auth.tsx b/src/queries/auth.tsx
@@ -16,3 +16,11 @@ export const queryEmailByUsername = async (username: string) => {
     .limit(1)
     .eq('username', username);
 };
+
+export const deleteUser = async (uuid: string) => {
+  let { data, error } = await supabase.rpc('delete_user', {
+    uuid,
+  });
+  if (error) console.error(error);
+  else console.log(data);
+};