diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx index dab2a995..b5372f7a 100644 --- a/apps/mobile/src/app/Router.tsx +++ b/apps/mobile/src/app/Router.tsx @@ -1,38 +1,41 @@ -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { createDrawerNavigator } from '@react-navigation/drawer'; -import { NavigationContainer } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { useAuth } from 'afk_nostr_sdk'; -import { useEffect, useMemo, useState } from 'react'; -import { Dimensions, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'; - -import { Icon } from '../components'; -import { Navbar } from '../components/Navbar'; -import { useStyles, useTheme } from '../hooks'; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {createDrawerNavigator} from '@react-navigation/drawer'; +import {NavigationContainer} from '@react-navigation/native'; +import {createNativeStackNavigator} from '@react-navigation/native-stack'; +import {useAuth} from 'afk_nostr_sdk'; +import {useEffect, useMemo, useState} from 'react'; +import {Dimensions, Platform, StyleSheet, useWindowDimensions, View} from 'react-native'; + +import {Icon} from '../components'; +import {Navbar} from '../components/Navbar'; +import {useStyles, useTheme} from '../hooks'; +import GroupChatDetail from '../modules/Group/groupDetail/GroupChatDetail'; +import GroupChat from '../modules/Group/message/GroupMessage'; import AuthSidebar from '../modules/Layout/auth-sidebar'; import DegensSidebar from '../modules/Layout/degens-sidebar'; import Sidebar from '../modules/Layout/sidebar'; -import { CreateAccount } from '../screens/Auth/CreateAccount'; -import { ImportKeys } from '../screens/Auth/ImportKeys'; -import { Login } from '../screens/Auth/Login'; -import { SaveKeys } from '../screens/Auth/SaveKeys'; -import { ChannelDetail } from '../screens/ChannelDetail'; -import { ChannelsFeed } from '../screens/ChannelsFeed'; -import { CreateChannel } from '../screens/CreateChannel'; -import { CreateForm } from '../screens/CreateForm'; -import { CreatePost } from '../screens/CreatePost'; -import { Defi } from '../screens/Defi'; -import { EditProfile } from '../screens/EditProfile'; -import { Feed } from '../screens/Feed'; -import { Games } from '../screens/Games'; -import { LaunchDetail } from '../screens/LaunchDetail'; -import { LightningNetworkScreen } from '../screens/Lightning'; -import { PostDetail } from '../screens/PostDetail'; -import { Profile } from '../screens/Profile'; -import { Search } from '../screens/Search'; -import { Settings } from '../screens/Settings'; -import { Tips } from '../screens/Tips'; -import { ThemedStyleSheet } from '../styles'; +import {CreateAccount} from '../screens/Auth/CreateAccount'; +import {ImportKeys} from '../screens/Auth/ImportKeys'; +import {Login} from '../screens/Auth/Login'; +import {SaveKeys} from '../screens/Auth/SaveKeys'; +import {ChannelDetail} from '../screens/ChannelDetail'; +import {ChannelsFeed} from '../screens/ChannelsFeed'; +import {CreateChannel} from '../screens/CreateChannel'; +import {CreateForm} from '../screens/CreateForm'; +import {CreatePost} from '../screens/CreatePost'; +import {Defi} from '../screens/Defi'; +import {EditProfile} from '../screens/EditProfile'; +import {Feed} from '../screens/Feed'; +import {Games} from '../screens/Games'; +import {LaunchDetail} from '../screens/LaunchDetail'; +import {LightningNetworkScreen} from '../screens/Lightning'; +import {PostDetail} from '../screens/PostDetail'; +import {Profile} from '../screens/Profile'; +import {Search} from '../screens/Search'; +import {Settings} from '../screens/Settings'; +import {Tips} from '../screens/Tips'; +import {Whatever} from '../screens/Whatever'; +import {ThemedStyleSheet} from '../styles'; import { AuthStackParams, DegensAppStackParams, @@ -41,8 +44,7 @@ import { MainStackParams, RootStackParams, } from '../types'; -import { retrievePublicKey } from '../utils/storage'; -import { Whatever } from '../screens/Whatever'; +import {retrievePublicKey} from '../utils/storage'; const DrawerStack = createDrawerNavigator(); const RootStack = createNativeStackNavigator(); const AuthStack = createDrawerNavigator(); @@ -56,8 +58,8 @@ const DegensAppStack = createDrawerNavigator(); const HomeBottomTabNavigator: React.FC = () => { const styles = useStyles(stylesheet); - const { publicKey } = useAuth(); - const { theme } = useTheme(); + const {publicKey} = useAuth(); + const {theme} = useTheme(); return ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: theme.colors.background, - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: 'grey', - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: 'grey', - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { ( + tabBarIcon: ({focused}) => ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: 'grey', - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { return ( } - screenOptions={({ navigation }) => ({ + screenOptions={({navigation}) => ({ // headerShown:false, header: () => , headerShown: false, @@ -219,7 +221,7 @@ const AuthNavigator: React.FC = () => { const DrawerRightDesktop = createDrawerNavigator(); -const RightDrawerNavigator = () => { +const RightDrawerNavigator = () => { const dimensions = useWindowDimensions(); const isDesktop = useMemo(() => { return dimensions.width >= 1024; @@ -231,7 +233,7 @@ const RightDrawerNavigator = () => { } - screenOptions={({ navigation }) => ({ + screenOptions={({navigation}) => ({ // drawerPosition: "right", drawerType: isDesktop ? 'permanent' : 'front', // drawerType:"permanent", @@ -248,8 +250,7 @@ const RightDrawerNavigator = () => { ); -} - +}; const MainNavigator: React.FC = () => { const dimensions = useWindowDimensions(); @@ -264,7 +265,7 @@ const MainNavigator: React.FC = () => { // screenOptions={{ headerShown: false }} // initialRouteName="Home" drawerContent={(props) => } - screenOptions={({ navigation }) => ({ + screenOptions={({navigation}) => ({ // headerShown:false, header: () => , headerStyle: { @@ -287,10 +288,12 @@ const MainNavigator: React.FC = () => { ) : ( )} - {isDesktop && - - - } + {isDesktop && ( + + )} @@ -303,6 +306,8 @@ const MainNavigator: React.FC = () => { + + @@ -316,8 +321,8 @@ const MainNavigator: React.FC = () => { const DegensBottomTabNavigator: React.FC = () => { const styles = useStyles(stylesheet); - const { publicKey } = useAuth(); - const { theme } = useTheme(); + const {publicKey} = useAuth(); + const {theme} = useTheme(); return ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: theme.colors.background, - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: 'grey', - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: 'grey', - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { options={{ tabBarActiveTintColor: 'white', tabBarInactiveTintColor: 'grey', - tabBarIcon: ({ focused }) => ( + tabBarIcon: ({focused}) => ( { // screenOptions={{ headerShown: false }} // initialRouteName="Home" drawerContent={(props) => } - screenOptions={({ navigation }) => ({ + screenOptions={({navigation}) => ({ // headerShown:false, header: () => , headerStyle: { @@ -534,10 +539,10 @@ const linking = { }; const RootNavigator: React.FC = () => { - const { publicKey } = useAuth(); + const {publicKey} = useAuth(); return ( - + {/* */} diff --git a/apps/mobile/src/assets/icons.tsx b/apps/mobile/src/assets/icons.tsx index 9400c6b3..81ff8227 100644 --- a/apps/mobile/src/assets/icons.tsx +++ b/apps/mobile/src/assets/icons.tsx @@ -15,6 +15,89 @@ export const AddPostIcon: React.FC = (props) => ( ); +export const AdminIcon: React.FC = (props) => ( + + + +); +export const CrownIcon: React.FC = (props) => ( + + + +); + +export const RemoveIcon: React.FC = (props) => ( + + + +); + +export const CheckIcon: React.FC = (props) => ( + + + +); + +export const BackIcon: React.FC = (props) => ( + + + +); +export const MoreIcon: React.FC = (props) => ( + + + + + +); + +// export const MenuIcon: React.FC = (props) => ( +// +// +// +// ); + export const GameIcon: React.FC = (props) => { return ( = (props) => { ); }; +export const GlobeIcon: React.FC = (props) => ( + + + + + +); + +export const PadlockIcon: React.FC = (props) => ( + + + + +); +export const SlantedArrowIcon: React.FC = (props) => ( + + + +); + +export const MenuIcons: React.FC = (props) => ( + + + +); + export const GalleryIcon: React.FC = (props) => { return ( diff --git a/apps/mobile/src/modules/Group/addGroup/AddGroup.tsx b/apps/mobile/src/modules/Group/addGroup/AddGroup.tsx new file mode 100644 index 00000000..03b71221 --- /dev/null +++ b/apps/mobile/src/modules/Group/addGroup/AddGroup.tsx @@ -0,0 +1,49 @@ +import {useState} from 'react'; +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 stylesheet from './styles'; + +export const CreateGroup: React.FC = () => { + const styles = useStyles(stylesheet); + const [groupName, setGroupName] = useState(''); + const [groupType, setGroupType] = useState(''); + + const handleSubmit = () => { + // Here you would typically handle the form submission, + // e.g., sending the data to an API + console.log('Submitted:', {groupName, groupType}); + }; + + return ( + + + + Create a New Group + Add a new group and set its privacy level. + + + + setGroupType(itemValue)} + label="" + > + + + + + + + + ); +}; diff --git a/apps/mobile/src/modules/Group/addGroup/styles.ts b/apps/mobile/src/modules/Group/addGroup/styles.ts new file mode 100644 index 00000000..0e045c1e --- /dev/null +++ b/apps/mobile/src/modules/Group/addGroup/styles.ts @@ -0,0 +1,56 @@ +import {ThemedStyleSheet} from '../../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + justifyContent: 'center', + alignItems: 'center', + marginTop: 10, + }, + card: { + width: '100%', + padding: 14, + }, + cardHeader: { + marginBottom: 16, + }, + cardTitle: { + fontSize: 20, + fontWeight: 'bold', + marginBottom: 8, + color: theme.colors.text, + }, + cardDescription: { + fontSize: 14, + color: theme.colors.text, + }, + cardContent: { + marginBottom: 16, + display: 'flex', + flexDirection: 'column', + gap: 10, + }, + inputContainer: { + marginBottom: 16, + }, + + input: { + color: theme.colors.inputText, + }, + + cardFooter: { + alignItems: 'center', + }, + button: { + backgroundColor: '#007AFF', + paddingVertical: 12, + paddingHorizontal: 24, + borderRadius: 4, + width: '100%', + }, + buttonText: { + color: 'white', + fontSize: 18, + fontWeight: 'bold', + textAlign: 'center', + }, +})); diff --git a/apps/mobile/src/modules/Group/all/AllGroup.tsx b/apps/mobile/src/modules/Group/all/AllGroup.tsx new file mode 100644 index 00000000..83f0cb0c --- /dev/null +++ b/apps/mobile/src/modules/Group/all/AllGroup.tsx @@ -0,0 +1,55 @@ +import {useNavigation} from '@react-navigation/native'; +import {FlatList, SafeAreaView, Text, TouchableOpacity, View} from 'react-native'; + +import {GlobeIcon, 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 styles = useStyles(stylesheet); + const navigation = useNavigation(); + + return ( + + + My Groups + + ( + navigation.navigate('GroupChat', {groupId: item.id})} + style={styles.groupItem} + > + + {item.name} + + {item.type === 'private' ? ( + + ) : ( + + )} + {item.type} + + + + + + + )} + keyExtractor={(item) => item.id} + contentContainerStyle={styles.listContent} + /> + + ); +} diff --git a/apps/mobile/src/modules/Group/all/styles.ts b/apps/mobile/src/modules/Group/all/styles.ts new file mode 100644 index 00000000..590c9fb7 --- /dev/null +++ b/apps/mobile/src/modules/Group/all/styles.ts @@ -0,0 +1,73 @@ +import {ThemedStyleSheet} from '../../../styles'; + +export default ThemedStyleSheet((theme) => ({ + //Start of All Group Styling + groupContainers: { + flex: 1, + backgroundColor: theme.colors.background, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: 16, + color: theme.colors.text, + }, + headerTitle: { + fontSize: 24, + fontWeight: 'bold', + color: theme.colors.text, + }, + addButton: { + padding: 8, + borderRadius: 20, + backgroundColor: 'rgba(255, 255, 255, 0.3)', + }, + listContent: { + padding: 16, + }, + groupItem: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + borderRadius: 8, + padding: 16, + borderColor: theme.colors.divider, + borderWidth: 1, + backgroundColor: theme.colors.surface, + marginBottom: 12, + color: theme.colors.text, + }, + groupInfo: { + flex: 1, + }, + groupName: { + color: theme.colors.text, + fontSize: 18, + fontWeight: '600', + marginBottom: 4, + }, + groupType: { + color: theme.colors.text, + flexDirection: 'row', + alignItems: 'center', + }, + groupTypeText: { + color: theme.colors.text, + fontSize: 14, + marginLeft: 4, + textTransform: 'capitalize', + }, + viewButton: { + backgroundColor: '#4a90e2', + paddingHorizontal: 12, + paddingVertical: 6, + borderRadius: 4, + }, + viewButtonText: { + color: '#ffffff', + fontSize: 14, + fontWeight: '600', + }, + //End of All Group Styling +})); diff --git a/apps/mobile/src/modules/Group/groupDetail/GroupChatDetail.tsx b/apps/mobile/src/modules/Group/groupDetail/GroupChatDetail.tsx new file mode 100644 index 00000000..2c0710cb --- /dev/null +++ b/apps/mobile/src/modules/Group/groupDetail/GroupChatDetail.tsx @@ -0,0 +1,78 @@ +import React, {useRef, useState} from 'react'; +import {FlatList, SafeAreaView, Text, TouchableOpacity, View} from 'react-native'; + +import {BackIcon} from '../../../assets/icons'; +import {IconButton, Modalize} from '../../../components'; +import {useStyles} from '../../../hooks'; +import {GroupChatDetailScreenProps} from '../../../types'; +import GroupAdminActions from '../memberAction/groupAction'; +import stylesheet from './styles'; + +const data = [ + {id: '1', name: 'Alice Johnson', role: 'Admin'}, + {id: '2', name: 'Bob Smith', role: 'Member'}, + {id: '3', name: 'Charlie Brown', role: 'Member'}, + {id: '4', name: 'Diana Prince', role: 'Member'}, + {id: '5', name: 'Ethan Hunt', role: 'Member'}, +]; + +const GroupChatDetail: React.FC = ({navigation, route}) => { + const modalizeRef = useRef(null); + + const onOpen = () => { + modalizeRef.current?.open(); + }; + const styles = useStyles(stylesheet); + const [groupName] = useState('Project Team'); + const [members] = useState(data); + + return ( + <> + + + + + + navigation.navigate('GroupChat', {groupId: route.params.groupId})} + > + + + + {groupName} + {members.length} members + + + + onOpen()} />} + keyExtractor={(item) => item.id} + contentContainerStyle={styles.memberList} + /> + + + ); +}; + +const MemberCard = ({item, handleOpen}: {item: any; handleOpen: () => void}) => { + const styles = useStyles(stylesheet); + return ( + + + {item.name} + {item.role} + + + + + ); +}; + +export default GroupChatDetail; diff --git a/apps/mobile/src/modules/Group/groupDetail/styles.ts b/apps/mobile/src/modules/Group/groupDetail/styles.ts new file mode 100644 index 00000000..2bf5a848 --- /dev/null +++ b/apps/mobile/src/modules/Group/groupDetail/styles.ts @@ -0,0 +1,66 @@ +import {Spacing, ThemedStyleSheet} from '../../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + backgroundColor: theme.colors.background, + }, + header: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + borderBottomWidth: 1, + borderColor: theme.colors.divider, + }, + headerTextContainer: { + flex: 1, + alignItems: 'center', + }, + backButton: { + padding: 8, + }, + + groupName: { + fontSize: 18, + color: theme.colors.text, + fontWeight: 'bold', + }, + memberCount: { + fontSize: 12, + color: theme.colors.text, + }, + + memberList: { + paddingTop: 5, + }, + memberItem: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: theme.colors.background, + paddingVertical: 12, + paddingHorizontal: 16, + borderBottomWidth: 1, + borderBottomColor: theme.colors.divider, + }, + memberInfo: { + flex: 1, + }, + memberName: { + fontSize: 16, + fontWeight: '500', + color: theme.colors.text, + }, + memberRole: { + fontSize: 14, + color: theme.colors.text, + marginTop: 2, + }, + memberActionButton: { + padding: 8, + }, + iconButton: { + backgroundColor: theme.colors.buttonDisabledBackground, + padding: Spacing.small, + }, +})); diff --git a/apps/mobile/src/modules/Group/memberAction/groupAction.tsx b/apps/mobile/src/modules/Group/memberAction/groupAction.tsx new file mode 100644 index 00000000..e978374a --- /dev/null +++ b/apps/mobile/src/modules/Group/memberAction/groupAction.tsx @@ -0,0 +1,70 @@ +import React, {useState} from 'react'; +import {Switch, Text, TouchableOpacity, View} from 'react-native'; + +import {CrownIcon, RemoveIcon} from '../../../assets/icons'; +import {useStyles} from '../../../hooks'; +import stylesheet from './styles'; + +const GroupAdminActions = () => { + const [canManageMembers, setCanManageMembers] = useState(false); + const [canEditGroup, setCanEditGroup] = useState(false); + const styles = useStyles(stylesheet); + + return ( + + + + + Make Group Admin + + + Can manage members + + + + Can edit group + + + + Make Admin + + + + + + + Remove from Group + + + Remove + + + + ); +}; + +export default GroupAdminActions; diff --git a/apps/mobile/src/modules/Group/memberAction/styles.ts b/apps/mobile/src/modules/Group/memberAction/styles.ts new file mode 100644 index 00000000..144d86e2 --- /dev/null +++ b/apps/mobile/src/modules/Group/memberAction/styles.ts @@ -0,0 +1,69 @@ +import {Spacing, ThemedStyleSheet} from '../../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + backgroundColor: theme.colors.background, + padding: Spacing.medium, + }, + card: { + backgroundColor: theme.colors.background, + borderRadius: 8, + padding: Spacing.medium, + marginBottom: Spacing.medium, + borderWidth: 1, + borderColor: theme.colors.divider, + }, + cardHeader: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: Spacing.medium, + }, + cardTitle: { + fontSize: 16, + fontWeight: 'bold', + marginLeft: Spacing.small, + color: theme.colors.text, + }, + permissionItem: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: Spacing.small, + }, + permissionText: { + fontSize: 16, + color: theme.colors.text, + }, + actionButton: { + backgroundColor: theme.colors.buttonDisabledBackground, + padding: Spacing.small, + borderRadius: 4, + alignItems: 'center', + marginTop: Spacing.small, + }, + actionButtonText: { + color: theme.colors.text, + fontSize: 16, + fontWeight: 'bold', + }, + removeButton: { + backgroundColor: theme.colors.red, + }, + iconButton: { + backgroundColor: theme.colors.buttonDisabledBackground, + padding: Spacing.small, + }, + switchTrack: { + backgroundColor: theme.colors.divider, + }, + switchTrackActive: { + backgroundColor: theme.colors.buttonDisabledBackground, + }, + switchThumb: { + backgroundColor: theme.colors.background, + }, + switchThumbActive: { + backgroundColor: theme.colors.buttonDisabledBackground, + }, +})); diff --git a/apps/mobile/src/modules/Group/message/GroupMessage.tsx b/apps/mobile/src/modules/Group/message/GroupMessage.tsx new file mode 100644 index 00000000..0b5c4c7a --- /dev/null +++ b/apps/mobile/src/modules/Group/message/GroupMessage.tsx @@ -0,0 +1,97 @@ +import React, {useState} from 'react'; +import {FlatList, SafeAreaView, Text, TouchableOpacity, View} from 'react-native'; + +import {BackIcon, MenuIcons} from '../../../assets/icons'; +import {IconButton, Input, KeyboardFixedView} from '../../../components'; +import {useStyles} from '../../../hooks'; +import {GroupChatScreenProps} from '../../../types'; +import stylesheet from './styles'; + +const data = [ + {id: '1', text: 'Hello everyone!', sender: 'Alice'}, + {id: '2', text: 'Hi Alice, how are you?', sender: 'Bob'}, + {id: '3', text: 'Im doing great, thanks!', sender: 'Alice'}, + { + id: '4', + text: 'Whats the plan for today? Whats the plan for today Whats the plan for todayWhats the plan for today', + sender: 'Charlie', + }, + {id: '5', text: 'Whats the plan for today?', sender: 'Charlie'}, + {id: '6', text: 'Whats the plan for today?', sender: 'Charlie'}, + {id: '7', text: 'Whats the plan for today?', sender: 'Charlie'}, + {id: '8', text: 'Whats the plan for today?', sender: 'Charlie'}, + {id: '9', text: 'Whats the plan for today?', sender: 'Charlie'}, +]; + +const groupName = 'Project Team'; +const memberCount = 15; + +const GroupChat: React.FC = ({navigation, route}) => { + const styles = useStyles(stylesheet); + const [message, setMessage] = useState(''); + const [messages, setMessages] = useState(data); + + const sendMessage = () => { + if (message.trim() === '') return; + setMessages([...messages, {id: Date.now().toString(), text: message, sender: 'You'}]); + setMessage(''); + }; + + return ( + + + navigation.goBack()} style={styles.headerButton}> + + + + {groupName} + {memberCount} members + + navigation.navigate('GroupChatDetail', {groupId: route.params.groupId})} + style={styles.headerButton} + > + + + + } + keyExtractor={(item) => item.id} + contentContainerStyle={styles.messageList} + inverted + /> + + + + + + + + + + ); +}; + +// TODO: MOVE TO COMPONENT +const MessageCard = ({item}: {item: (typeof data)[0]}) => { + const styles = useStyles(stylesheet); + return ( + + {item.sender} + {item.text} + + ); +}; + +export default GroupChat; diff --git a/apps/mobile/src/modules/Group/message/styles.ts b/apps/mobile/src/modules/Group/message/styles.ts new file mode 100644 index 00000000..6b2613a9 --- /dev/null +++ b/apps/mobile/src/modules/Group/message/styles.ts @@ -0,0 +1,99 @@ +import {Spacing, ThemedStyleSheet} from '../../../styles'; + +export default ThemedStyleSheet((theme) => ({ + //Start of All Group Styling + container: { + flex: 1, + backgroundColor: theme.colors.background, + }, + header: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + borderBottomWidth: 1, + borderColor: theme.colors.divider, + }, + headerButton: { + padding: 5, + }, + headerCenter: { + flex: 1, + alignItems: 'center', + }, + headerTitle: { + fontSize: 18, + color: theme.colors.text, + fontWeight: 'bold', + }, + headerSubtitle: { + fontSize: 12, + color: theme.colors.text, + }, + backButton: { + paddingRight: 10, + }, + backButtonText: { + fontSize: 24, + }, + messageList: { + paddingHorizontal: 10, + paddingBottom: 10, + }, + messageBubble: { + maxWidth: '90%', + color: theme.colors.messageCardText, + backgroundColor: theme.colors.messageCard, + padding: 10, + borderRadius: 10, + marginVertical: 5, + }, + yourMessage: { + alignSelf: 'flex-end', + borderWidth: 1, + }, + otherMessage: { + alignSelf: 'flex-start', + }, + senderName: { + fontWeight: 'bold', + color: theme.colors.messageCardText, + marginBottom: 5, + }, + messageText: { + color: theme.colors.messageCardText, + fontSize: 14, + lineHeight: 20, + }, + + inputContainer: { + backgroundColor: theme.colors.surface, + }, + + inputContent: { + gap: Spacing.small, + flexDirection: 'row', + alignItems: 'center', + paddingVertical: Spacing.xsmall, + paddingHorizontal: Spacing.pagePadding, + backgroundColor: theme.colors.surface, + }, + + input: { + flex: 1, + width: 'auto', + }, + sendButton: { + justifyContent: 'center', + alignItems: 'center', + backgroundColor: theme.colors.secondary, + borderRadius: 20, + paddingHorizontal: 20, + }, + sendButtonText: { + color: '#fff', + fontSize: 16, + fontWeight: 'bold', + }, + //End of All Group Styling +})); diff --git a/apps/mobile/src/screens/CreateForm/index.tsx b/apps/mobile/src/screens/CreateForm/index.tsx index dd2d3963..8b73bd71 100644 --- a/apps/mobile/src/screens/CreateForm/index.tsx +++ b/apps/mobile/src/screens/CreateForm/index.tsx @@ -5,6 +5,7 @@ import {SafeAreaView} from 'react-native-safe-area-context'; import {TextButton} from '../../components'; import TabSelector from '../../components/TabSelector'; import {useStyles} from '../../hooks'; +import {CreateGroup} from '../../modules/Group/addGroup/AddGroup'; import {FormLaunchToken} from '../../modules/LaunchTokenPump/FormLaunchToken'; import {CreateFormScreenProps} from '../../types'; import {SelectedTab, TABS_FORM_CREATE} from '../../types/tab'; @@ -43,6 +44,8 @@ export const CreateForm: React.FC = ({navigation}) => { ) : selectedTab == SelectedTab.CREATE_CHANNEL ? ( + ) : selectedTab == SelectedTab.GROUP ? ( + ) : ( selectedTab == SelectedTab.LAUNCH_TOKEN && ( <> diff --git a/apps/mobile/src/screens/Tips/index.tsx b/apps/mobile/src/screens/Tips/index.tsx index 53eb2ea9..4559fd63 100644 --- a/apps/mobile/src/screens/Tips/index.tsx +++ b/apps/mobile/src/screens/Tips/index.tsx @@ -1,16 +1,17 @@ -import { useNavigation } from '@react-navigation/native'; -import { useState } from 'react'; -import { Pressable, View } from 'react-native'; +import {useNavigation} from '@react-navigation/native'; +import {useState} from 'react'; +import {Pressable, View} from 'react-native'; -import { AddPostIcon } from '../../assets/icons'; +import {AddPostIcon} from '../../assets/icons'; import TabSelector from '../../components/TabSelector'; -import { useStyles, useTheme } from '../../hooks'; -import { MainStackNavigationProps } from '../../types'; -import { SelectedTab, TABS_TIP_LIST } from '../../types/tab'; -import { ChannelsFeedComponent } from '../ChannelsFeed/ChannelsFeedComponent'; +import {useStyles, useTheme} from '../../hooks'; +import {DirectMessages} from '../../modules/DirectMessages'; +import AllGroupListComponent from '../../modules/Group/all/AllGroup'; +import {MainStackNavigationProps} from '../../types'; +import {SelectedTab, TABS_TIP_LIST} from '../../types/tab'; +import {ChannelsFeedComponent} from '../ChannelsFeed/ChannelsFeedComponent'; import stylesheet from './styles'; -import { TipsComponent } from './TipsComponent'; -import { DirectMessages } from '../../modules/DirectMessages'; +import {TipsComponent} from './TipsComponent'; export const Tips: React.FC = () => { const styles = useStyles(stylesheet); @@ -39,13 +40,17 @@ export const Tips: React.FC = () => { <> + ) : selectedTab == SelectedTab.ALL_GROUP ? ( + <> + + ) : ( )} {selectedTab !== SelectedTab.MESSAGES && ( navigation.navigate('MainStack', { screen: 'CreateForm' })} + onPress={() => navigation.navigate('MainStack', {screen: 'CreateForm'})} > diff --git a/apps/mobile/src/styles/Colors.tsx b/apps/mobile/src/styles/Colors.tsx index d2826510..940523d5 100644 --- a/apps/mobile/src/styles/Colors.tsx +++ b/apps/mobile/src/styles/Colors.tsx @@ -18,6 +18,9 @@ export const LightTheme = { ...CommonColors, red: '#EC796B', + messageCard: '#FFFFFF', + messageCardText: '#14142C', + // primary: '#EC796B', primary: '#4FA89B', primaryLight: 'rgba(236,185,107, 0.1)', @@ -69,6 +72,10 @@ export const DarkTheme = { colors: { ...CommonColors, red: '#EC796B', + + messageCard: '#2C2C2C', + messageCardText: '#FFFFFF', + // primary: '#EC796B', primary: '#4FA89B', primaryLight: 'rgba(236,185,107, 0.1)', diff --git a/apps/mobile/src/types/routes.ts b/apps/mobile/src/types/routes.ts index a1e073c1..46f620e9 100644 --- a/apps/mobile/src/types/routes.ts +++ b/apps/mobile/src/types/routes.ts @@ -27,6 +27,8 @@ export type MainStackParams = { CreatePost: undefined; Profile: {publicKey: string}; PostDetail: {postId: string; post?: NDKEvent}; + GroupChat: {groupId: string; post?: NDKEvent}; + GroupChatDetail: {groupId: string; post?: NDKEvent}; EditProfile: undefined; Search: undefined; CreateChannel: undefined; @@ -222,6 +224,14 @@ export type PostDetailScreenProps = CompositeScreenProps< NativeStackScreenProps, NativeStackScreenProps >; +export type GroupChatScreenProps = CompositeScreenProps< + NativeStackScreenProps, + NativeStackScreenProps +>; +export type GroupChatDetailScreenProps = CompositeScreenProps< + NativeStackScreenProps, + NativeStackScreenProps +>; export type ChannelDetailScreenProps = CompositeScreenProps< NativeStackScreenProps, diff --git a/apps/mobile/src/types/tab.ts b/apps/mobile/src/types/tab.ts index a69b0894..a080ed08 100644 --- a/apps/mobile/src/types/tab.ts +++ b/apps/mobile/src/types/tab.ts @@ -19,6 +19,9 @@ export enum SelectedTab { LAUNCH_HOLDERS, LAUNCH_TX, LIGHTNING_NETWORK_WALLET, + GROUP, + ALL_GROUP, + GROUP_MESSAGE, } export const TABS_TIP_LIST: {screen?: string; title: string; tab: SelectedTab}[] = [ @@ -37,6 +40,11 @@ export const TABS_TIP_LIST: {screen?: string; title: string; tab: SelectedTab}[] screen: 'ChannelsFeed', tab: SelectedTab.CHANNELS, }, + { + title: 'All Group', + screen: 'AllGroup', + tab: SelectedTab.ALL_GROUP, + }, // { // title: 'Messages', // screen: "ChannelsFeed", @@ -80,6 +88,7 @@ export const TABS_LIST_SEARCH: {screen?: string; title: string; tab: SelectedTab screen: 'ChannelsFeed', tab: SelectedTab.CHANNELS, }, + // { // title: 'Messages', // screen: "ChannelsFeed", @@ -104,6 +113,11 @@ export const TABS_FORM_CREATE: {screen?: string; title: string; tab: SelectedTab screen: 'LaunchToken', tab: SelectedTab.LAUNCH_TOKEN, }, + { + title: 'Group', + screen: 'Group', + tab: SelectedTab.GROUP, + }, // { // title: 'Messages',