Private Group cleanup (#101)

* removed unsued import

* feat: private chat cleanup

* fix: spelling

* fix: add member automatically to a public group and fix permission check

* fix: scroll for group list

* fix: permission hook

apps/mobile/src/app/Router.tsx

@@ -45,6 +45,7 @@ import {
   RootStackParams,
 } from '../types';
 import {retrievePublicKey} from '../utils/storage';
+import GroupChatGroupRequest from '../modules/Group/memberAction/ViewRequest';
 const DrawerStack = createDrawerNavigator<MainStackParams>();
 const RootStack = createNativeStackNavigator<RootStackParams>();
 const AuthStack = createDrawerNavigator<AuthStackParams>();
@@ -308,6 +309,8 @@ const MainNavigator: React.FC = () => {
       <DrawerStack.Screen name="Games" component={Games} />
       <DrawerStack.Screen name="GroupChat" component={GroupChat} />
       <DrawerStack.Screen name="GroupChatDetail" component={GroupChatDetail} />
+      <DrawerStack.Screen name="GroupChatMemberRequest" component={GroupChatGroupRequest} />
+
       <DrawerStack.Screen name="Tips" component={Tips} />
       <DrawerStack.Screen name="Settings" component={Settings} />
       <DrawerStack.Screen name="LaunchDetail" component={LaunchDetail} />

apps/mobile/src/modules/Group/addGroup/AddGroup.tsx

@@ -1,6 +1,14 @@
 import {useQueryClient} from '@tanstack/react-query';
-import {useCreateGroup} from 'afk_nostr_sdk';
+import {
+  AdminGroupPermission,
+  useAddMember,
+  useAddPermissions,
+  useAuth,
+  useCreateGroup,
+  useGetGroupPermission,
+} from 'afk_nostr_sdk';
 import {Formik} from 'formik';
+import {useState} from 'react';
 import {Text, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
@@ -12,9 +20,15 @@ import stylesheet from './styles';
 
 export const CreateGroup: React.FC = () => {
   const styles = useStyles(stylesheet);
+  const [groupId, setGroupId] = useState();
+  const {data: permissionData} = useGetGroupPermission(groupId as any);
+
+  const {publicKey: pubkey} = useAuth();
   const {showToast} = useToast();
   const queryClient = useQueryClient();
   const {mutate} = useCreateGroup();
+  const {mutate: addMember} = useAddMember();
+  const {mutate: addPermission} = useAddPermissions();
 
   const initialValues = {
     groupName: '',
@@ -32,9 +46,65 @@ export const CreateGroup: React.FC = () => {
               groupName: values.groupName,
             },
             {
-              onSuccess() {
-                showToast({type: 'success', title: 'Group Created successfully'});
-                queryClient.invalidateQueries({queryKey: ['getAllGroups']});
+              onSuccess(data) {
+                setGroupId(groupId);
+                // After Group Creation, first add permissions for the admin
+                addPermission(
+                  {
+                    groupId: data.id,
+                    pubkey,
+                    permissionName: [
+                      AdminGroupPermission.AddMember,
+                      AdminGroupPermission.AddPermission,
+                      AdminGroupPermission.DeleteEvent,
+                      AdminGroupPermission.DeleteGroup,
+                      AdminGroupPermission.EditGroupStatus,
+                      AdminGroupPermission.EditMetadata,
+                      AdminGroupPermission.RemovePermission,
+                      AdminGroupPermission.RemoveUser,
+                      AdminGroupPermission.ViewAccess,
+                    ],
+                  },
+                  {
+                    onSuccess() {
+                      // After adding permissions, add the admin as a member
+                      addMember(
+                        {
+                          groupId: data.id,
+                          pubkey,
+                          permissionData: permissionData as any,
+                        },
+                        {
+                          onSuccess() {
+                            showToast({type: 'success', title: 'Group Created successfully'});
+                            queryClient.invalidateQueries({
+                              queryKey: ['getAllGroups'],
+                            });
+                            queryClient.invalidateQueries({
+                              queryKey: ['getAllGroupMember'],
+                            });
+                            queryClient.invalidateQueries({
+                              queryKey: ['getPermissionsByUserConnected', data.id],
+                            });
+                          },
+                          onError() {
+                            showToast({
+                              type: 'error',
+                              title:
+                                'Error! Admin could not be added as a member. Please try again later.',
+                            });
+                          },
+                        },
+                      );
+                    },
+                    onError() {
+                      showToast({
+                        type: 'error',
+                        title: 'Error! Admin permissions could not be set. Please try again later.',
+                      });
+                    },
+                  },
+                );
               },
               onError() {
                 showToast({

apps/mobile/src/modules/Group/all/AllGroup.tsx

@@ -1,26 +1,33 @@
 import {useNavigation} from '@react-navigation/native';
-import {useAuth, useGetAllGroupList, useGetGroupList} from 'afk_nostr_sdk';
-import {ActivityIndicator, FlatList, SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
+import {useQueryClient} from '@tanstack/react-query';
+import {
+  AdminGroupPermission,
+  useAddMember,
+  useAddPermissions,
+  useAuth,
+  useGetGroupList,
+} from 'afk_nostr_sdk';
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  SafeAreaView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 import {PadlockIcon, SlantedArrowIcon} from '../../../assets/icons';
 import {useStyles} from '../../../hooks';
 import {MainStackNavigationProps} from '../../../types';
 import stylesheet from './styles';
 
 export default function AllGroupListComponent() {
-  const {publicKey: pubKey} = useAuth();
-
-  const data = useGetGroupList({
-    // pubKey,
-  });
-  // const allGroup = useGetAllGroupList({
-  //   pubKey,
-  // });
-
-  // console.log("AllGroup", allGroup.data);
-  console.log("AllGroup", data.data);
-  // console.log(data.data, 'AllGroup2');
-
+  const {data, isPending, isFetching, refetch, fetchNextPage} = useGetGroupList({});
+  const {mutate: addMember} = useAddMember();
+  const queryClient = useQueryClient();
+  const {mutate: addPermission} = useAddPermissions();
+  const {publicKey} = useAuth();
   const styles = useStyles(stylesheet);
   const navigation = useNavigation<MainStackNavigationProps>();
 
@@ -30,17 +37,66 @@ export default function AllGroupListComponent() {
         <Text style={styles.headerTitle}>My Groups</Text>
       </View>
 
-      {data?.data?.pages?.length == 0 && <ActivityIndicator></ActivityIndicator>}
+      {isPending ? (
+        <ActivityIndicator></ActivityIndicator>
+      ) : (
+        data?.pages?.length == 0 && <ActivityIndicator></ActivityIndicator>
+      )}
       <FlatList
-        data={data.data.pages.flat()}
+        data={data.pages.flat()}
         renderItem={({item}: any) => (
           <TouchableOpacity
-            onPress={() =>
+            onPress={() => {
+              // Check if the group is pubic, if yes add the use to the group.
+              if (
+                (item?.tags.find((tag: any) => tag[0] === 'access')?.[1] || 'public') ===
+                  'public' &&
+                publicKey !== item?.tags.find((tag: any) => tag[0] === 'p')?.[1]
+              ) {
+                // Add the member to the group
+                addMember(
+                  {
+                    groupId: item.originalGroupId,
+                    pubkey: publicKey,
+                  },
+                  {
+                    onSuccess() {
+                      // After successfully adding external member by pubkey, give them default view access.
+                      addPermission(
+                        {
+                          groupId: item.originalGroupId,
+                          pubkey: publicKey,
+                          permissionName: [AdminGroupPermission.ViewAccess],
+                        },
+                        {
+                          onSuccess() {
+                            queryClient.invalidateQueries({queryKey: ['getAllGroupMember']});
+                            queryClient.invalidateQueries({
+                              queryKey: ['getPermissionsByUserConnected', item.originalGroupId],
+                            });
+
+                            navigation.navigate('GroupChat', {
+                              groupId: item.originalGroupId,
+                              groupName: item.content,
+                              groupAccess:
+                                item?.tags.find((tag: any) => tag[0] === 'access')?.[1] || 'public',
+                            });
+                          },
+                          onError() {
+                            console.error('Something went wrong joining this group');
+                          },
+                        },
+                      );
+                    },
+                  },
+                );
+              }
               navigation.navigate('GroupChat', {
                 groupId: item.originalGroupId,
                 groupName: item.content,
-              })
-            }
+                groupAccess: item?.tags.find((tag: any) => tag[0] === 'access')?.[1] || 'public',
+              });
+            }}
             style={styles.groupItem}
           >
             <View style={styles.groupInfo}>
@@ -59,6 +115,8 @@ export default function AllGroupListComponent() {
         )}
         keyExtractor={(item: any) => item.id}
         contentContainerStyle={styles.listContent}
+        refreshControl={<RefreshControl refreshing={isFetching} onRefresh={() => refetch()} />}
+        onEndReached={() => fetchNextPage()}
       />
     </SafeAreaView>
   );