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 From 8f0eb0703f24076796fa6c13e35b5fc8b8de87ab Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Apr 2021 15:58:44 -0400 Subject: added compose button asset --- src/assets/icons/compose.svg | 1 + src/components/messages/MessagesHeader.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 src/assets/icons/compose.svg (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/assets/icons/compose.svg b/src/assets/icons/compose.svg new file mode 100644 index 00000000..062e08cf --- /dev/null +++ b/src/assets/icons/compose.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index d8445580..a3b31a22 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {normalize} from '../../utils'; +import ComposeIcon from '../../assets/icons/compose.svg'; type MessagesHeaderProps = { createChannel: () => void; @@ -14,10 +15,9 @@ const MessagesHeader: React.FC = ({createChannel}) => { Messages 2 unread - - Compose + + {/* Compose */} + ); -- cgit v1.2.3-70-g09d2 From 952329c1ee1ebeee27d86d3dc09f4ceaa0b9f6a1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Apr 2021 15:23:34 -0400 Subject: added unread count --- src/components/messages/MessagesHeader.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index a3b31a22..2b20f48c 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -1,22 +1,26 @@ -import * as React from 'react'; +import React, {useContext} from 'react'; import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {normalize} from '../../utils'; import ComposeIcon from '../../assets/icons/compose.svg'; +import {ChatContext} from '../../App'; type MessagesHeaderProps = { createChannel: () => void; }; const MessagesHeader: React.FC = ({createChannel}) => { + const {chatClient} = useContext(ChatContext); + const unread = chatClient.user?.total_unread_count as number; return ( Messages - 2 unread + {unread && unread !== 0 && ( + {unread} unread + )} - {/* Compose */} -- cgit v1.2.3-70-g09d2 From 6e456b97cbdc8c13b586a939ddcdfbf2587ed3cf Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Apr 2021 16:58:23 -0400 Subject: updated unread styling --- src/components/messages/MessagesHeader.tsx | 4 +++- src/screens/chat/ChatListScreen.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 2b20f48c..18c89de3 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -17,7 +17,9 @@ const MessagesHeader: React.FC = ({createChannel}) => { Messages {unread && unread !== 0 && ( - {unread} unread + + {unread > 99 ? '99+' : unread} unread + )} diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 9011ed4a..98a7f097 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -80,6 +80,7 @@ const ChatListScreen: React.FC = ({navigation}) => { watch: true, }} sort={{last_message_at: -1}} + maxUnreadCount={99} /> -- cgit v1.2.3-70-g09d2 From e3483bcf735c2a65ab53d5ee10e43ca6c5e33864 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Apr 2021 18:22:26 -0400 Subject: added figma styling --- src/components/messages/ChannelPreview.tsx | 136 +++++++++++++++++++++++++++++ src/components/messages/MessagesHeader.tsx | 6 +- src/components/messages/index.ts | 1 + src/screens/chat/ChatListScreen.tsx | 30 +++++-- src/types/types.ts | 1 + 5 files changed, 164 insertions(+), 10 deletions(-) create mode 100644 src/components/messages/ChannelPreview.tsx (limited to 'src/components/messages/MessagesHeader.tsx') diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx new file mode 100644 index 00000000..11408dc1 --- /dev/null +++ b/src/components/messages/ChannelPreview.tsx @@ -0,0 +1,136 @@ +import {useNavigation} from '@react-navigation/core'; +import React, {useContext} from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useSelector} from 'react-redux'; +import {ChannelPreviewMessengerProps} from 'stream-chat-react-native'; +import {ChatContext} from '../../App'; +import {RootState} from '../../store/rootReducer'; +import { + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType, +} from '../../types'; +import {normalize, SCREEN_HEIGHT} from '../../utils'; + +const ChannelPreview: React.FC< + ChannelPreviewMessengerProps< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType + > +> = (props) => { + const navigation = useNavigation(); + const {setChannel} = useContext(ChatContext); + const {channel} = props; + const {userId: loggedInUserId} = useSelector( + (state: RootState) => state.user.user, + ); + const otherMembers = channel + ? Object.values(channel.state.members).filter( + (member) => member.user?.id !== loggedInUserId, + ) + : []; + const member = otherMembers.length === 1 ? otherMembers[0] : undefined; + const online = member?.user?.online; + const unread = channel.state.unreadCount > 0; + + return ( + { + setChannel(channel); + navigation.navigate('Chat'); + }}> + + + {online && } + + + + {member?.user?.first_name} {member?.user?.last_name} + + + {channel.state.messages[channel.state.messages.length - 1].text} + + + {unread && } + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'row', + height: Math.round(SCREEN_HEIGHT / 10), + alignItems: 'center', + paddingHorizontal: '8%', + paddingVertical: '5%', + }, + avatar: { + width: normalize(62), + height: normalize(62), + borderRadius: normalize(62) / 2, + }, + online: { + position: 'absolute', + backgroundColor: '#6EE7E7', + width: normalize(18), + height: normalize(18), + borderRadius: normalize(18) / 2, + borderColor: 'white', + borderWidth: 2, + bottom: 0, + right: 0, + }, + content: { + flex: 1, + height: '100%', + justifyContent: 'space-between', + flexDirection: 'column', + marginLeft: '5%', + }, + name: { + fontWeight: '500', + fontSize: normalize(14), + lineHeight: normalize(17), + }, + lastMessage: { + color: '#828282', + fontWeight: '500', + fontSize: normalize(12), + lineHeight: normalize(14), + }, + unread: { + fontWeight: '700', + color: 'black', + }, + purpleDot: { + backgroundColor: '#8F01FF', + width: normalize(10), + height: normalize(10), + borderRadius: normalize(10) / 2, + }, +}); + +export default ChannelPreview; diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 18c89de3..660da97d 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -1,4 +1,4 @@ -import React, {useContext} from 'react'; +import React, {Fragment, useContext} from 'react'; import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; @@ -16,10 +16,12 @@ const MessagesHeader: React.FC = ({createChannel}) => { return ( Messages - {unread && unread !== 0 && ( + {unread && unread !== 0 ? ( {unread > 99 ? '99+' : unread} unread + ) : ( + )} diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index 2d6bb581..e194093c 100644 --- a/src/components/messages/index.ts +++ b/src/components/messages/index.ts @@ -1 +1,2 @@ export {default as MessagesHeader} from './MessagesHeader'; +export {default as ChannelPreview} from './ChannelPreview'; diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 98a7f097..637c6231 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -5,9 +5,18 @@ import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; import {useStore} from 'react-redux'; import {ChannelList, Chat} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; -import {MessagesHeader} from '../../components/messages'; +import {ChannelPreview, MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; +import { + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType, +} from '../../types'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, @@ -19,8 +28,8 @@ interface ChatListScreenProps { /* * Screen that displays all of the user's active conversations. */ -const ChatListScreen: React.FC = ({navigation}) => { - const {chatClient, setChannel} = useContext(ChatContext); +const ChatListScreen: React.FC = () => { + const {chatClient} = useContext(ChatContext); const [clientReady, setClientReady] = useState(false); const state: RootState = useStore().getState(); const loggedInUserId = state.user.user.userId; @@ -68,12 +77,16 @@ const ChatListScreen: React.FC = ({navigation}) => { {clientReady && ( - filters={memoizedFilters} - onSelect={(channel) => { - setChannel(channel); - navigation.navigate('Chat'); - }} options={{ presence: true, state: true, @@ -81,6 +94,7 @@ const ChatListScreen: React.FC = ({navigation}) => { }} sort={{last_message_at: -1}} maxUnreadCount={99} + Preview={ChannelPreview} /> diff --git a/src/types/types.ts b/src/types/types.ts index 1a352808..582eefac 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -298,6 +298,7 @@ export type LocalCommandType = string; export type LocalEventType = Record; export type LocalMessageType = Record; export type LocalResponseType = Record; +export type LocalReactionType = Record; export type LocalUserType = Record; export type ChatContextType = { -- cgit v1.2.3-70-g09d2