Complete new group flow and speed up groups loading

Views/Profile.js

@@ -1,12 +1,14 @@
 import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from 'react';
-import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList, Alert } from 'react-native';
 import { Button, IconButton } from 'react-native-paper';
 import API from './../API.js';
 import Post from './../components/Post.js';
 import NewPost from "./../components/NewPost.js";
 import ProfileHeader from '../components/ProfileHeader.js';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
 
 const PROFILE_LOG_PREFIX = '[Profile]';
 const logProfile = (...args) => {
@@ -35,11 +37,19 @@ const getProfilePosts = async (profileid) => {
 }
 
 let Profile = ({ navigation, route }) => {
+    const viewer = useSnapshot(GlobalState).me || {};
     let [Posts, setPosts] = useState([]);
     let [profile, setProfile] = useState({});
     const [showNewPost, setShowNewPost] = useState(false);
     const [tag, setTag] = useState('');
     const [loading, setLoading] = useState(true);
+    const [isDeletingGroup, setIsDeletingGroup] = useState(false);
+
+    const isOwnedGroup = !!(
+        profile?._id &&
+        profile?.isGroup &&
+        String(profile?.userid || '') === String(viewer?.userid || '')
+    );
 
     useEffect(() => {
         let subscribed = true;
@@ -128,6 +138,46 @@ let Profile = ({ navigation, route }) => {
             return (<></>);
         return (<Post post={item} />);
     });
+
+    const handleDeleteGroup = () => {
+        if (!profile?._id || isDeletingGroup) return;
+        Alert.alert(
+            "Delete group?",
+            "This will permanently delete this group profile.",
+            [
+                { text: "Cancel", style: "cancel" },
+                {
+                    text: "Delete",
+                    style: "destructive",
+                    onPress: async () => {
+                        setIsDeletingGroup(true);
+                        try {
+                            const result = await API.deleteProfile(profile._id);
+                            if (result?.status !== "ok") {
+                                return Alert.alert("Could not delete group", result?.status || "Please try again.");
+                            }
+                            const me = await API.getMe();
+                            if (me && me._id) GlobalState.me = me;
+
+                            if (navigation.canGoBack()) {
+                                navigation.goBack();
+                            } else {
+                                navigation.reset({
+                                    index: 0,
+                                    routes: [{ name: 'MainNavigation' }],
+                                });
+                            }
+                        } catch (error) {
+                            Alert.alert("Could not delete group", "Please try again.");
+                        } finally {
+                            setIsDeletingGroup(false);
+                        }
+                    }
+                }
+            ]
+        );
+    };
+
     const header = (
         <View>
             <ProfileHeader profileObj={profile} key={profile._id} />
@@ -166,6 +216,20 @@ let Profile = ({ navigation, route }) => {
                     setTag('embedded');
                 }}>{tag == 'embedded' ? "Files" : ''}</Button>
             </View>
+            {isOwnedGroup ? (
+                <View style={styles.deleteGroupRow}>
+                    <Button
+                        mode="contained"
+                        icon="delete"
+                        buttonColor="#b3261e"
+                        loading={isDeletingGroup}
+                        disabled={isDeletingGroup}
+                        onPress={handleDeleteGroup}
+                    >
+                        Delete Group
+                    </Button>
+                </View>
+            ) : <></>}
             { showNewPost ? 
                 <NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />
                 : <></>
@@ -220,4 +284,8 @@ const styles = StyleSheet.create({
         flex: 1,
         backgroundColor: "#edf2f7",
     },
+    deleteGroupRow: {
+        paddingHorizontal: 12,
+        paddingTop: 12,
+    },
 });