From cf558e378e238edd29f4fa135befce43a5880d36 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 16:40:06 -0400 Subject: created initial styling --- src/components/messages/ChannelPreview.tsx | 23 +++--- src/components/messages/ChatInput.tsx | 111 +++++++++++++++++++++++++++++ src/components/messages/index.ts | 1 + src/screens/chat/ChatListScreen.tsx | 6 +- src/screens/chat/ChatScreen.tsx | 3 +- 5 files changed, 130 insertions(+), 14 deletions(-) create mode 100644 src/components/messages/ChatInput.tsx (limited to 'src') diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx index 312f879a..a7a7268a 100644 --- a/src/components/messages/ChannelPreview.tsx +++ b/src/components/messages/ChannelPreview.tsx @@ -3,7 +3,6 @@ import React, {useContext} from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useStore} from 'react-redux'; -import {usernameRegex} from 'src/constants'; import {ChannelPreviewMessengerProps} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import { @@ -18,19 +17,21 @@ import { import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {getMember, isOnline} from '../../utils/messages'; -const ChannelPreview: React.FC> = (props) => { +const ChannelPreview: React.FC< + ChannelPreviewMessengerProps< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType + > +> = (props) => { + const {channel} = props; const {setChannel} = useContext(ChatContext); const state = useStore().getState(); const navigation = useNavigation(); - const {channel} = props; const member = getMember(channel, state); const online = isOnline(member?.user?.last_active); const unread = channel.state.unreadCount > 0; diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx new file mode 100644 index 00000000..fe24b271 --- /dev/null +++ b/src/components/messages/ChatInput.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import { + Image, + StyleSheet, + TextInput, + TouchableOpacity, + View, +} from 'react-native'; +import {useStore} from 'react-redux'; +import {MessageInputProps} from 'stream-chat-react-native'; +import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {RootState} from '../../store/rootReducer'; +import { + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType, +} from '../../types'; + +const ChatInput: React.FC< + MessageInputProps< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType + > +> = () => { + const state: RootState = useStore().getState(); + // const {channel} = useContext(ChatContext); + const avatar = state.user.avatar; + // const member = getMember(channel, state); + + return ( + + + + + + {}}> + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + width: '100%', + }, + textContainer: { + width: '95%', + flexDirection: 'row', + backgroundColor: '#e8e8e8', + alignItems: 'center', + justifyContent: 'space-between', + margin: '3%', + borderRadius: 25, + }, + text: { + flex: 1, + padding: '1%', + marginHorizontal: '1%', + }, + avatar: { + height: 35, + width: 35, + borderRadius: 30, + marginRight: 10, + marginLeft: '3%', + marginVertical: '2%', + alignSelf: 'flex-end', + }, + submitButton: { + height: 35, + width: 35, + backgroundColor: TAGG_LIGHT_BLUE, + borderRadius: 999, + justifyContent: 'center', + alignItems: 'center', + marginRight: '3%', + marginVertical: '2%', + alignSelf: 'flex-end', + }, + whiteBackround: { + backgroundColor: '#fff', + }, +}); + +export default ChatInput; diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index e194093c..83ecd2ad 100644 --- a/src/components/messages/index.ts +++ b/src/components/messages/index.ts @@ -1,2 +1,3 @@ export {default as MessagesHeader} from './MessagesHeader'; export {default as ChannelPreview} from './ChannelPreview'; +export {default as ChatInput} from './ChatInput'; diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index daea9984..61a16c93 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,4 +1,6 @@ import AsyncStorage from '@react-native-community/async-storage'; +import type {DeepPartial, Theme} from 'stream-chat-react-native'; +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect, useMemo, useState} from 'react'; import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; @@ -30,8 +32,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 [modalVisible, setChatModalVisible] = useState(false); const [clientReady, setClientReady] = useState(false); diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 59c53c99..feb95b83 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -10,6 +10,7 @@ import { MessageList, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; +import {ChatInput} from '../../components'; import ChatHeader from '../../components/messages/ChatHeader'; import {MainStackParams} from '../../routes'; import {isIPhoneX} from '../../utils'; @@ -36,7 +37,7 @@ const ChatScreen: React.FC = () => { {}} /> - + -- cgit v1.2.3-70-g09d2 From 612df06361d4738f4711669d01df256e98620273 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 17:59:46 -0400 Subject: added white theme --- src/screens/chat/ChatListScreen.tsx | 13 ++++++++++++- src/screens/chat/ChatScreen.tsx | 10 +++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 61a16c93..605163d2 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -22,6 +22,7 @@ import { } from '../../types'; import NewChatModal from './NewChatModal'; +import {HeaderHeight} from '../../utils'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, 'ChatList' @@ -39,6 +40,7 @@ const ChatListScreen: React.FC = () => { const [clientReady, setClientReady] = useState(false); const state: RootState = useStore().getState(); const loggedInUserId = state.user.user.userId; + const tabbarHeight = useBottomTabBarHeight(); const memoizedFilters = useMemo( () => ({ @@ -48,6 +50,15 @@ const ChatListScreen: React.FC = () => { [], ); + const chatTheme = { + channelListMessenger: { + flatListContent: { + backgroundColor: 'white', + paddingBottom: tabbarHeight + HeaderHeight + 20, + }, + }, + }; + useEffect(() => { const setupClient = async () => { const chatToken = await AsyncStorage.getItem('chatToken'); @@ -76,7 +87,7 @@ const ChatListScreen: React.FC = () => { }} /> {clientReady && ( - + = () => { const {channel, chatClient} = useContext(ChatContext); const tabbarHeight = useBottomTabBarHeight(); + const chatTheme = { + messageList: { + container: { + backgroundColor: 'white', + }, + }, + }; + return ( = () => { {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50}, ]}> - + {}} /> -- cgit v1.2.3-70-g09d2 From 17de7d8312b10f84af2178f769ff92bf96ab47f5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 19:52:25 -0400 Subject: added our button --- src/screens/chat/ChatListScreen.tsx | 5 ++--- src/screens/chat/ChatScreen.tsx | 33 +++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 605163d2..c11f4d1d 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,5 +1,4 @@ import AsyncStorage from '@react-native-community/async-storage'; -import type {DeepPartial, Theme} from 'stream-chat-react-native'; import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect, useMemo, useState} from 'react'; @@ -20,9 +19,9 @@ import { LocalReactionType, LocalUserType, } from '../../types'; - -import NewChatModal from './NewChatModal'; import {HeaderHeight} from '../../utils'; +import NewChatModal from './NewChatModal'; + type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, 'ChatList' diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 7e189be5..baf1e23d 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,7 +1,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext} from 'react'; -import {StyleSheet} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import { Channel, @@ -10,8 +10,9 @@ import { MessageList, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; -import {ChatInput} from '../../components'; +import UpArrowIcon from '../../assets/icons/up_arrow.svg'; import ChatHeader from '../../components/messages/ChatHeader'; +import {TAGG_LIGHT_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; import {isIPhoneX} from '../../utils'; @@ -34,6 +35,12 @@ const ChatScreen: React.FC = () => { }, }; + const SendButton = () => ( + + + + ); + return ( = () => { ]}> - + [ + copyMessage, + deleteMessage, + ]}> {}} /> - + {/* */} + @@ -57,6 +71,17 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flex: 1, }, + + submitButton: { + height: 35, + width: 35, + backgroundColor: TAGG_LIGHT_BLUE, + borderRadius: 999, + justifyContent: 'center', + alignItems: 'center', + bottom: -5, + alignSelf: 'flex-end', + }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From 3097ece62ac3c410efaa6750571a0395b63be410 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:18:06 -0400 Subject: added insets, photo working --- src/screens/chat/ChatScreen.tsx | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 3d791f3c..8281ca85 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,6 +1,6 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext} from 'react'; +import React, {Fragment, useContext} from 'react'; import {StyleSheet, View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import { @@ -8,6 +8,7 @@ import { Chat, MessageInput, MessageList, + OverlayProvider, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; @@ -41,6 +42,7 @@ const ChatScreen: React.FC = () => { ); + // const insets = useSafeAreaInsets(); return ( = () => { ]}> - [ - copyMessage, - deleteMessage, - ]}> - {}} /> - {/* */} - - + + [ + copyMessage, + deleteMessage, + ]} + Attachment={Fragment}> + {}} /> + {/* */} + + + ); -- cgit v1.2.3-70-g09d2 From 177cec843cb4d472b47e684774729bb6c1ec001f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:36:40 -0400 Subject: updated chat input to use context functions --- src/components/messages/ChatInput.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx index fe24b271..9aeb9c62 100644 --- a/src/components/messages/ChatInput.tsx +++ b/src/components/messages/ChatInput.tsx @@ -7,7 +7,10 @@ import { View, } from 'react-native'; import {useStore} from 'react-redux'; -import {MessageInputProps} from 'stream-chat-react-native'; +import { + MessageInputProps, + useMessageInputContext, +} from 'stream-chat-react-native'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {RootState} from '../../store/rootReducer'; @@ -33,9 +36,8 @@ const ChatInput: React.FC< > > = () => { const state: RootState = useStore().getState(); - // const {channel} = useContext(ChatContext); const avatar = state.user.avatar; - // const member = getMember(channel, state); + const {sendMessage, setText, text} = useMessageInputContext(); return ( @@ -53,9 +55,11 @@ const ChatInput: React.FC< placeholder={'Message...'} placeholderTextColor="grey" multiline={true} + value={text} + onChangeText={setText} /> - {}}> + -- cgit v1.2.3-70-g09d2 From 6862e278129341b7989dba937c7252f2f5f84cd5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:43:09 -0400 Subject: cleaned up code --- src/screens/chat/ChatScreen.tsx | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 8281ca85..a7dd3717 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -2,6 +2,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {Fragment, useContext} from 'react'; import {StyleSheet, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; import {SafeAreaView} from 'react-native-safe-area-context'; import { Channel, @@ -9,9 +10,11 @@ import { MessageInput, MessageList, OverlayProvider, + useMessageInputContext, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {ChatInput} from '../../components'; import ChatHeader from '../../components/messages/ChatHeader'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; @@ -37,13 +40,6 @@ const ChatScreen: React.FC = () => { }, }; - const SendButton = () => ( - - - - ); - // const insets = useSafeAreaInsets(); - return ( = () => { ]}> - + = () => { messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, - ]} - Attachment={Fragment}> + ]}> {}} /> - {/* */} - + -- cgit v1.2.3-70-g09d2 From fac8d9e28602d6b766e9bb85b2184711e743dbfa Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:52:25 -0400 Subject: removed attach button --- src/screens/chat/ChatScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index f9467535..d4e97a37 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -104,7 +104,8 @@ const ChatScreen: React.FC = () => { messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, - ]}> + ]} + AttachButton={() => null}> {}} /> -- cgit v1.2.3-70-g09d2 From e88bc199f9432b6f483c3ad5601642775550809b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 20:59:44 -0400 Subject: fixed error --- src/screens/chat/ChatScreen.tsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index d4e97a37..9518970f 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -95,21 +95,21 @@ const ChatScreen: React.FC = () => { ]}> - - null} - MessageSimple={CustomMessageUIComponent} - messageActions={({copyMessage, deleteMessage}) => [ - copyMessage, - deleteMessage, - ]} - AttachButton={() => null}> - {}} /> - - - + {/* */} + null} + MessageSimple={CustomMessageUIComponent} + messageActions={({copyMessage, deleteMessage}) => [ + copyMessage, + deleteMessage, + ]} + AttachButton={() => null}> + {}} /> + + + {/* */} ); -- cgit v1.2.3-70-g09d2 From 220305d25b27388494d730513c90917b5d69548c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:10:25 -0400 Subject: changed to default bubble --- src/screens/chat/ChatScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 9518970f..df39afb5 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -100,7 +100,7 @@ const ChatScreen: React.FC = () => { channel={channel} keyboardVerticalOffset={0} OverlayReactionList={() => null} - MessageSimple={CustomMessageUIComponent} + // MessageSimple={CustomMessageUIComponent} messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, -- cgit v1.2.3-70-g09d2 From f317431b733113181e83ff864e11c79542cc295b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:12:00 -0400 Subject: added attach button back --- src/screens/chat/ChatScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index df39afb5..c5e3e446 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -105,7 +105,8 @@ const ChatScreen: React.FC = () => { copyMessage, deleteMessage, ]} - AttachButton={() => null}> + // AttachButton={() => null} + > {}} /> -- cgit v1.2.3-70-g09d2 From 2bf6764cf287fbce958e4a4f43f146e0e3c2ddf0 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:16:05 -0400 Subject: yes --- src/screens/chat/ChatScreen.tsx | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index c5e3e446..682906ee 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -95,22 +95,22 @@ const ChatScreen: React.FC = () => { ]}> - {/* */} - null} - // MessageSimple={CustomMessageUIComponent} - messageActions={({copyMessage, deleteMessage}) => [ - copyMessage, - deleteMessage, - ]} - // AttachButton={() => null} - > - {}} /> - - - {/* */} + + null} + // MessageSimple={CustomMessageUIComponent} + messageActions={({copyMessage, deleteMessage}) => [ + copyMessage, + deleteMessage, + ]} + // AttachButton={() => null} + > + {}} /> + + + ); -- cgit v1.2.3-70-g09d2 From 93f5f1595112f9ae45274f811cb17be5b40dca1f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:22:10 -0400 Subject: fix --- src/components/taggs/Tagg.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 5d26539b..82ee1e91 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -106,6 +106,9 @@ const Tagg: React.FC = ({ }; const pickTheRightRingHere = () => { + if (whiteRing && !userXId) { + return ; + } if (youMayPass) { if (whiteRing) { return ; -- cgit v1.2.3-70-g09d2 From bd8d325d661b849673a6ea25a0113c1f3db4da49 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 21:25:46 -0400 Subject: fix --- src/components/taggs/Tagg.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 82ee1e91..94011e86 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -106,9 +106,6 @@ const Tagg: React.FC = ({ }; const pickTheRightRingHere = () => { - if (whiteRing && !userXId) { - return ; - } if (youMayPass) { if (whiteRing) { return ; @@ -142,7 +139,7 @@ const Tagg: React.FC = ({ return ( <> - {userXId && !isLinked ? ( + {(userXId && !isLinked) || (whiteRing && !userXId) ? ( ) : ( <> -- cgit v1.2.3-70-g09d2