Skip to content

Commit

Permalink
feat: hooks integration
Browse files Browse the repository at this point in the history
  • Loading branch information
addegbenga committed Aug 28, 2024
2 parents 217167a + a8344c6 commit e1eb534
Show file tree
Hide file tree
Showing 31 changed files with 1,097 additions and 220 deletions.
29 changes: 29 additions & 0 deletions apps/mobile/src/assets/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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}
Expand Down Expand Up @@ -372,6 +400,7 @@ export const RepostIcon: React.FC<SvgProps> = (props) => {
);
};


export const LikeIcon: React.FC<SvgProps> = (props) => {
return (
<Svg width="26" height="26" viewBox="0 0 20 20" fill="none" {...props}>
Expand Down
92 changes: 61 additions & 31 deletions apps/mobile/src/modules/Group/addGroup/AddGroup.tsx
Original file line number Diff line number Diff line change
@@ -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: '',
groupType: '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: 'private',
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, 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.groupType}
onValueChange={(itemValue) => handleChange('groupType')}
label=""
>
<Picker.Item label="Public" value="public" />
<Picker.Item label="Private" value="private" />
</Picker>
</View>
<Button onPress={() => handleSubmit()}>Create Group</Button>
</View>
)}
</Formik>
</SafeAreaView>
);
};
37 changes: 16 additions & 21 deletions apps/mobile/src/modules/Group/all/AllGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
import {useNavigation} from '@react-navigation/native';
import {useAuth, 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 styles = useStyles(stylesheet);
const navigation = useNavigation<MainStackNavigationProps>();

Expand All @@ -25,29 +22,27 @@ 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.id, 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}>Private</Text>
</View>
</View>
<View>
<SlantedArrowIcon stroke="gray" />
</View>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
keyExtractor={(item: any) => item.id}
contentContainerStyle={styles.listContent}
/>
</SafeAreaView>
Expand Down
4 changes: 2 additions & 2 deletions apps/mobile/src/modules/Group/all/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit e1eb534

Please sign in to comment.