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