From 4edcaf03ae6e41ba9eb11a381540db4692375463 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 2 Apr 2021 16:06:20 -0400 Subject: added initial styling --- src/components/messages/MessagesHeader.tsx | 51 ++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/components/messages/MessagesHeader.tsx (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx new file mode 100644 index 00000000..47a84bf3 --- /dev/null +++ b/src/components/messages/MessagesHeader.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import {Alert, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {normalize} from '../../utils'; + +type MessagesHeaderProps = {}; + +const MessagesHeader: React.FC = () => { + return ( + + Messages + 2 unread + + { + Alert.alert('hi'); + }}> + Compose + + + ); +}; + +const styles = StyleSheet.create({ + flex: { + flex: 1, + }, + header: { + marginHorizontal: '8%', + marginTop: '5%', + alignItems: 'center', + flexDirection: 'row', + }, + headerText: { + fontWeight: '700', + fontSize: normalize(18), + lineHeight: normalize(21), + }, + unreadText: { + color: '#8F01FF', + marginLeft: 10, + fontWeight: '700', + lineHeight: normalize(17), + fontSize: normalize(14), + }, + compose: {}, +}); + +export default MessagesHeader; -- cgit v1.2.3-70-g09d2 From c03eba730ad99bbadc49601f5f9387c1ca4c0eac Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 2 Apr 2021 17:00:11 -0400 Subject: created navigation to chat --- src/components/messages/MessagesHeader.tsx | 10 ++++--- src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/chat/ChatListScreen.tsx | 44 +++++++++++++++++++++++------- src/screens/chat/ChatScreen.tsx | 9 +++++- 4 files changed, 49 insertions(+), 16 deletions(-) (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 47a84bf3..3b8144f7 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import {Alert, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {normalize} from '../../utils'; -type MessagesHeaderProps = {}; +type MessagesHeaderProps = { + createChannel: () => void; +}; -const MessagesHeader: React.FC = () => { +const MessagesHeader: React.FC = ({createChannel}) => { return ( Messages @@ -15,7 +17,7 @@ const MessagesHeader: React.FC = () => { { - Alert.alert('hi'); + createChannel(); }}> Compose diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 021c0688..36c6fb57 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -93,7 +93,7 @@ export type MainStackParams = { }; SPWelcomeScreen: {}; ChatList: undefined; - Chat: undefined; + Chat: {channel: any; chatClient: any}; }; export const MainStack = createStackNavigator(); diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 56493cf7..106995e0 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -19,26 +19,37 @@ interface ChatListScreenProps { const ChatListScreen: React.FC = ({navigation}) => { const filters = { example: 'example-apps', - members: {$in: ['ron']}, + members: {$in: ['john']}, type: 'messaging', }; const [clientReady, setClientReady] = useState(false); - const chatClient = StreamChat.getInstance('q95x9hkbyd6p'); - const userToken = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c'; - const user = { - id: 'ron', - }; + const chatClient = StreamChat.getInstance('t823wwqn2wuk'); + // const chatClient = StreamChat.getInstance('q95x9hkbyd6p'); useEffect(() => { const setupClient = async () => { - await chatClient.connectUser(user, userToken); + // await chatClient.connectUser( + // { + // id: 'ron', + // }, + // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c', + // ); + await chatClient.connectUser( + { + id: 'john', + name: 'John Doe', + image: 'https://getstream.io/random_svg/?name=John', + }, + chatClient.devToken('john'), + ); return setClientReady(true); }; - setupClient(); + setupClient().catch((err) => { + console.error(err); + }); }, []); const streami18n = new Streami18n({ @@ -51,7 +62,16 @@ const ChatListScreen: React.FC = ({navigation}) => { - + { + const channel = chatClient.channel('messaging', 'travel2', { + name: 'Awesome channel about traveling', + members: ['john'], + }); + // console.log(JSON.stringify(channel)); + channel.create(); + }} + /> {clientReady && ( @@ -59,6 +79,10 @@ const ChatListScreen: React.FC = ({navigation}) => { filters={memoizedFilters} onSelect={(channel) => { console.log('Navigate to chat screen here'); + navigation.navigate('Chat', { + channel, + chatClient, + }); }} options={{ presence: true, diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index af83f504..08145b89 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -3,15 +3,22 @@ import {View, StyleSheet, Text} from 'react-native'; import {StackNavigationProp} from '@react-navigation/stack'; import {MainStackParams} from '../../routes'; +import {navigationRef} from '../../RootNavigation'; +import {RouteProp} from '@react-navigation/native'; type ChatScreenNavigationProp = StackNavigationProp; +type ChatScreenRouteProp = RouteProp; interface ChatScreenProps { navigation: ChatScreenNavigationProp; + route: ChatScreenRouteProp; } /* * Screen that displays all of the user's active conversations. */ -const ChatScreen: React.FC = () => { +const ChatScreen: React.FC = ({route}) => { + const {channel, chatClient} = route.params; + console.log(channel); + console.log(chatClient); return ( I am a chat! -- cgit v1.2.3-70-g09d2 From 88d1ec9dff5674e8759ca33e4255af16b4bf51a5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 5 Apr 2021 15:29:11 -0400 Subject: code cleanup --- src/components/messages/MessagesHeader.tsx | 4 +--- src/screens/chat/ChatListScreen.tsx | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 3b8144f7..d8445580 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -16,9 +16,7 @@ const MessagesHeader: React.FC = ({createChannel}) => { { - createChannel(); - }}> + onPress={createChannel}> Compose diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 8bced236..8fa6998c 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -68,7 +68,6 @@ const ChatListScreen: React.FC = ({navigation}) => { { - // TODO: (CHAT) fix type issue setChannel(channel); navigation.navigate('Chat'); }} -- cgit v1.2.3-70-g09d2