From 5884b5123d0e8eb798ffde7568aec477f0d84afb Mon Sep 17 00:00:00 2001 From: Adeyemi Date: Sun, 25 Aug 2024 12:48:49 +0100 Subject: [PATCH 1/2] feat: added group flow --- apps/mobile/src/app/Router.tsx | 4 + apps/mobile/src/assets/icons.tsx | 142 ++++++++++++++++++ .../src/modules/Group/addGroup/AddGroup.tsx | 49 ++++++ .../src/modules/Group/addGroup/styles.ts | 56 +++++++ .../mobile/src/modules/Group/all/AllGroup.tsx | 55 +++++++ apps/mobile/src/modules/Group/all/styles.ts | 73 +++++++++ .../Group/groupDetail/GroupChatDetail.tsx | 78 ++++++++++ .../src/modules/Group/groupDetail/styles.ts | 66 ++++++++ .../Group/memberAction/groupAction.tsx | 70 +++++++++ .../src/modules/Group/memberAction/styles.ts | 69 +++++++++ .../modules/Group/message/GroupMessage.tsx | 91 +++++++++++ .../src/modules/Group/message/styles.ts | 99 ++++++++++++ apps/mobile/src/screens/CreateForm/index.tsx | 3 + apps/mobile/src/screens/Tips/index.tsx | 27 ++-- apps/mobile/src/styles/Colors.tsx | 7 + apps/mobile/src/types/routes.ts | 10 ++ apps/mobile/src/types/tab.ts | 14 ++ 17 files changed, 902 insertions(+), 11 deletions(-) create mode 100644 apps/mobile/src/modules/Group/addGroup/AddGroup.tsx create mode 100644 apps/mobile/src/modules/Group/addGroup/styles.ts create mode 100644 apps/mobile/src/modules/Group/all/AllGroup.tsx create mode 100644 apps/mobile/src/modules/Group/all/styles.ts create mode 100644 apps/mobile/src/modules/Group/groupDetail/GroupChatDetail.tsx create mode 100644 apps/mobile/src/modules/Group/groupDetail/styles.ts create mode 100644 apps/mobile/src/modules/Group/memberAction/groupAction.tsx create mode 100644 apps/mobile/src/modules/Group/memberAction/styles.ts create mode 100644 apps/mobile/src/modules/Group/message/GroupMessage.tsx create mode 100644 apps/mobile/src/modules/Group/message/styles.ts diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx index 52453a05..62bb10ac 100644 --- a/apps/mobile/src/app/Router.tsx +++ b/apps/mobile/src/app/Router.tsx @@ -9,6 +9,8 @@ import {Dimensions, Platform, StyleSheet, useWindowDimensions, View} from 'react 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'; @@ -264,6 +266,8 @@ const MainNavigator: React.FC = () => { + + 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..8a85775c --- /dev/null +++ b/apps/mobile/src/modules/Group/message/GroupMessage.tsx @@ -0,0 +1,91 @@ +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 GroupChat: React.FC = ({navigation, route}) => { + const styles = useStyles(stylesheet); + const [message, setMessage] = useState(''); + const [messages, setMessages] = useState([ + {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 sendMessage = () => { + if (message.trim() === '') return; + setMessages([...messages, {id: Date.now().toString(), text: message, sender: 'You'}]); + setMessage(''); + }; + + const groupName = 'Project Team'; + const memberCount = 15; + + const renderMessage = ({item}: any) => ( + + {item.sender} + {item.text} + + ); + + return ( + + + navigation.goBack()} style={styles.headerButton}> + + + + {groupName} + {memberCount} members + + navigation.navigate('GroupChatDetail', {groupId: route.params.groupId})} + style={styles.headerButton} + > + + + + item.id} + contentContainerStyle={styles.messageList} + inverted + /> + + + + + + + + + + ); +}; + +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 558f2af4..10a0986c 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)', @@ -67,6 +70,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 7c1dc01b..5f3cb69c 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; @@ -220,6 +222,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', From 1a4d8f8cc6b3f4efa6208606deea7a48ac3fc159 Mon Sep 17 00:00:00 2001 From: Adeyemi Date: Sun, 25 Aug 2024 12:57:21 +0100 Subject: [PATCH 2/2] fix: separate Groupmsg card --- .../modules/Group/message/GroupMessage.tsx | 68 ++++++++++--------- 1 file changed, 37 insertions(+), 31 deletions(-) diff --git a/apps/mobile/src/modules/Group/message/GroupMessage.tsx b/apps/mobile/src/modules/Group/message/GroupMessage.tsx index 8a85775c..0b5c4c7a 100644 --- a/apps/mobile/src/modules/Group/message/GroupMessage.tsx +++ b/apps/mobile/src/modules/Group/message/GroupMessage.tsx @@ -7,24 +7,29 @@ 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([ - {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 [messages, setMessages] = useState(data); const sendMessage = () => { if (message.trim() === '') return; @@ -32,21 +37,6 @@ const GroupChat: React.FC = ({navigation, route}) => { setMessage(''); }; - const groupName = 'Project Team'; - const memberCount = 15; - - const renderMessage = ({item}: any) => ( - - {item.sender} - {item.text} - - ); - return ( @@ -66,7 +56,7 @@ const GroupChat: React.FC = ({navigation, route}) => { } keyExtractor={(item) => item.id} contentContainerStyle={styles.messageList} inverted @@ -88,4 +78,20 @@ const GroupChat: React.FC = ({navigation, route}) => { ); }; +// TODO: MOVE TO COMPONENT +const MessageCard = ({item}: {item: (typeof data)[0]}) => { + const styles = useStyles(stylesheet); + return ( + + {item.sender} + {item.text} + + ); +}; + export default GroupChat;