Hooks integration

apps/mobile/src/assets/icons.tsx

@@ -23,6 +23,16 @@ export const AdminIcon: React.FC<SvgProps> = (props) => (
     />
   </Svg>
 );
+
+export const EditIcon: React.FC<SvgProps> = (props) => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M3 17.25V21h3.75l12.452-12.452-3.75-3.75L3 17.25zM22.707 7.293a1.004 1.004 0 00-.293-.707l-3.75-3.75a1.004 1.004 0 00-.707-.293 1.004 1.004 0 00-.707.293l-2.5 2.5 4.457 4.457 2.5-2.5a1.004 1.004 0 00.293-.707z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
 export const CrownIcon: React.FC<SvgProps> = (props) => (
   <Svg
     viewBox="0 0 24 24"
@@ -37,6 +47,24 @@ export const CrownIcon: React.FC<SvgProps> = (props) => (
   </Svg>
 );
 
+export const TrashIcon: React.FC<SvgProps> = (props) => (
+  <Svg
+    {...props}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="3 6 5 6 21 6"></polyline>
+    <Path d="M19 6l-2 14H7L5 6h14z" />
+    <Path d="M10 11v6" />
+    <Path d="M14 11v6" />
+    <Path d="M9 3h6a2 2 0 0 1 2 2H7a2 2 0 0 1 2-2z" />
+  </Svg>
+);
+
 export const RemoveIcon: React.FC<SvgProps> = (props) => (
   <Svg
     {...props}

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

@@ -1,49 +1,79 @@
-import {useState} from 'react';
+import {useQueryClient} from '@tanstack/react-query';
+import {useCreateGroup} from 'afk_nostr_sdk';
+import {Formik} from 'formik';
 import {Text, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import {Picker} from '../../../components';
 import {Button, Input} from '../../../components';
 import {useStyles} from '../../../hooks';
+import {useToast} from '../../../hooks/modals';
 import stylesheet from './styles';
 
 export const CreateGroup: React.FC = () => {
   const styles = useStyles(stylesheet);
-  const [groupName, setGroupName] = useState('');
-  const [groupType, setGroupType] = useState('');
+  const {showToast} = useToast();
+  const queryClient = useQueryClient();
+  const {mutate} = useCreateGroup();
 
-  const handleSubmit = () => {
-    // Here you would typically handle the form submission,
-    // e.g., sending the data to an API
-    console.log('Submitted:', {groupName, groupType});
+  const initialValues = {
+    groupName: '',
+    access: 'private',
   };
 
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.card}>
-        <View style={styles.cardHeader}>
-          <Text style={styles.cardTitle}>Create a New Group</Text>
-          <Text style={styles.cardDescription}>Add a new group and set its privacy level.</Text>
-        </View>
-        <View style={styles.cardContent}>
-          <Input
-            style={styles.input}
-            placeholderTextColor={styles.input as unknown as string}
-            placeholder="Enter group name"
-            value={groupName}
-            onChangeText={setGroupName}
-          />
-          <Picker
-            selectedValue={groupType}
-            onValueChange={(itemValue) => setGroupType(itemValue)}
-            label=""
-          >
-            <Picker.Item label="Public" value="public" />
-            <Picker.Item label="Private" value="private" />
-          </Picker>
-        </View>
-        <Button>Create Group</Button>
-      </View>
+      <Formik
+        initialValues={initialValues}
+        onSubmit={(values) => {
+          mutate(
+            {
+              groupType: values.access as any,
+              groupName: values.groupName,
+            },
+            {
+              onSuccess() {
+                showToast({type: 'success', title: 'Group Created successfully'});
+                queryClient.invalidateQueries({queryKey: ['getAllGroups']});
+              },
+              onError() {
+                showToast({
+                  type: 'error',
+                  title: 'Error! Group could not be created. Please try again later.',
+                });
+              },
+            },
+          );
+        }}
+      >
+        {({handleChange, handleBlur, setFieldValue, handleSubmit, values}) => (
+          <View style={styles.card}>
+            <View style={styles.cardHeader}>
+              <Text style={styles.cardTitle}>Create a New Group</Text>
+              <Text style={styles.cardDescription}>Add a new group and set its privacy level.</Text>
+            </View>
+            <View style={styles.cardContent}>
+              <Input
+                style={styles.input}
+                placeholderTextColor={styles.input as unknown as string}
+                placeholder="Enter group name"
+                value={values.groupName}
+                onBlur={handleBlur('groupName')}
+                onChangeText={handleChange('groupName')}
+              />
+              <Picker
+                selectedValue={values.access}
+                onValueChange={(itemValue) => setFieldValue('access', itemValue)}
+                label=""
+              >
+                <Picker.Item label="Private" value="private" />
+                <Picker.Item label="Public" value="public" />
+              </Picker>
+            </View>
+            <Button onPress={() => handleSubmit()}>Create Group</Button>
+          </View>
+        )}
+      </Formik>
     </SafeAreaView>
   );
 };

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

@@ -1,21 +1,25 @@
 import {useNavigation} from '@react-navigation/native';
+import {useAuth, useGetAllGroupList, useGetGroupList} from 'afk_nostr_sdk';
 import {FlatList, SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
 
-import {GlobeIcon, PadlockIcon, SlantedArrowIcon} from '../../../assets/icons';
+import {PadlockIcon, SlantedArrowIcon} from '../../../assets/icons';
 import {useStyles} from '../../../hooks';
 import {MainStackNavigationProps} from '../../../types';
 import stylesheet from './styles';
 
-// Mock data for the groups
-const groups = [
-  {id: '1', name: 'Book Club', type: 'public'},
-  {id: '2', name: 'Family', type: 'private'},
-  {id: '3', name: 'Work Team', type: 'private'},
-  {id: '4', name: 'Hiking Enthusiasts', type: 'public'},
-  {id: '5', name: 'Local Community', type: 'public'},
-];
-
 export default function AllGroupListComponent() {
+  const {publicKey: pubKey} = useAuth();
+
+  const data = useGetGroupList({
+    pubKey,
+  });
+  const allGroup = useGetAllGroupList({
+    pubKey,
+  });
+
+  console.log(allGroup.data, 'AllGroup');
+  console.log(data.data, 'AllGroup2');
+
   const styles = useStyles(stylesheet);
   const navigation = useNavigation<MainStackNavigationProps>();
 
@@ -25,29 +29,32 @@ export default function AllGroupListComponent() {
         <Text style={styles.headerTitle}>My Groups</Text>
       </View>
       <FlatList
-        data={groups}
-        renderItem={({item}) => (
+        data={data.data.pages.flat()}
+        renderItem={({item}: any) => (
           <TouchableOpacity
-            onPress={() => navigation.navigate('GroupChat', {groupId: item.id})}
+            onPress={() =>
+              navigation.navigate('GroupChat', {
+                groupId: item.originalGroupId,
+                groupName: item.content,
+              })
+            }
             style={styles.groupItem}
           >
             <View style={styles.groupInfo}>
-              <Text style={styles.groupName}>{item.name}</Text>
+              <Text style={styles.groupName}>{item.content || 'No Name'}</Text>
               <View style={styles.groupType}>
-                {item.type === 'private' ? (
-                  <PadlockIcon stroke="gray" />
-                ) : (
-                  <GlobeIcon stroke="gray" />
-                )}
-                <Text style={styles.groupTypeText}>{item.type}</Text>
+                <PadlockIcon stroke="gray" />
+                <Text style={styles.groupTypeText}>
+                  {item?.tags.find((tag: any) => tag[0] === 'access')?.[1]}
+                </Text>
               </View>
             </View>
             <View>
               <SlantedArrowIcon stroke="gray" />
             </View>
           </TouchableOpacity>
         )}
-        keyExtractor={(item) => item.id}
+        keyExtractor={(item: any) => item.id}
         contentContainerStyle={styles.listContent}
       />
     </SafeAreaView>

apps/mobile/src/modules/Group/all/styles.ts

@@ -43,9 +43,9 @@ export default ThemedStyleSheet((theme) => ({
   },
   groupName: {
     color: theme.colors.text,
-    fontSize: 18,
+    fontSize: 16,
     fontWeight: '600',
-    marginBottom: 4,
+    marginBottom: 7,
   },
   groupType: {
     color: theme.colors.text,