From f0d4f91c941c121c30438e4a8b2a621885bc7421 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 1 Apr 2021 19:32:33 -0400 Subject: to date after 3 days --- src/utils/moments.ts | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'src/utils') diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 7428b1ac..9b8e0075 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -1,15 +1,17 @@ import moment from 'moment'; -//A util that calculates the difference between a given time and current time -//Returns the difference in the largest possible unit of time (days > hours > minutes > seconds) - +/** + * Formats elapsed time from a given time. + * @param date_time given time + * @returns difference in the largest possible unit of time (days > hours > minutes > seconds) + */ export const getTimePosted = (date_time: string) => { const datePosted = moment(date_time); const now = moment(); var time = date_time; var difference = now.diff(datePosted, 'seconds'); - //Creating elapsedTime string to display to user + // Creating elapsedTime string to display to user // 0 to less than 1 minute if (difference < 60) { time = difference + ' seconds'; @@ -19,15 +21,19 @@ export const getTimePosted = (date_time: string) => { difference = now.diff(datePosted, 'minutes'); time = difference + (difference === 1 ? ' minute' : ' minutes'); } - //1 hour to less than 1 day + // 1 hour to less than 1 day else if (difference >= 60 * 60 && difference < 24 * 60 * 60) { difference = now.diff(datePosted, 'hours'); time = difference + (difference === 1 ? ' hour' : ' hours'); } - //Any number of days - else if (difference >= 24 * 60 * 60) { + // Any number of days + else if (difference >= 24 * 60 * 60 && difference < 24 * 60 * 60 * 3) { difference = now.diff(datePosted, 'days'); time = difference + (difference === 1 ? ' day' : ' days'); } + // More than 3 days + else if (difference >= 24 * 60 * 60 * 3) { + time = datePosted.format('YYYY/MM/DD'); + } return time; }; -- cgit v1.2.3-70-g09d2 From 4720aa7f84d7924309c4c5fdc7526166bf7e0718 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 5 Apr 2021 15:35:03 -0400 Subject: updated date format --- src/utils/moments.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/utils') diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 9b8e0075..87f062af 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -33,7 +33,7 @@ export const getTimePosted = (date_time: string) => { } // More than 3 days else if (difference >= 24 * 60 * 60 * 3) { - time = datePosted.format('YYYY/MM/DD'); + time = datePosted.format('MMMM D, YYYY'); } return time; }; -- cgit v1.2.3-70-g09d2 From bb16e95e15f6ea9b8941cae764570bdf7c0fdb59 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Apr 2021 16:10:14 -0400 Subject: created util functions, updated isOnline --- src/components/messages/ChannelPreview.tsx | 3 +- src/screens/chat/ChatScreen.tsx | 11 ++++++ src/utils/messages.ts | 59 ++++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 src/utils/messages.ts (limited to 'src/utils') diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx index 11408dc1..867e0a38 100644 --- a/src/components/messages/ChannelPreview.tsx +++ b/src/components/messages/ChannelPreview.tsx @@ -16,6 +16,7 @@ import { LocalUserType, } from '../../types'; import {normalize, SCREEN_HEIGHT} from '../../utils'; +import {isOnline} from '../../utils/messages'; const ChannelPreview: React.FC< ChannelPreviewMessengerProps< @@ -40,7 +41,7 @@ const ChannelPreview: React.FC< ) : []; const member = otherMembers.length === 1 ? otherMembers[0] : undefined; - const online = member?.user?.online; + const online = isOnline(member?.user?.last_active); const unread = channel.state.unreadCount > 0; return ( diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index eeb1a7d6..8e6c1575 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, useHeaderHeight} from '@react-navigation/stack'; import React, {useContext} from 'react'; import {StyleSheet, View} from 'react-native'; +import {useSelector} from 'react-redux'; import { Channel, Chat, @@ -10,6 +11,7 @@ import { } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import {MainStackParams} from '../../routes'; +import {RootState} from '../../store/rootReducer'; type ChatScreenNavigationProp = StackNavigationProp; interface ChatScreenProps { @@ -22,6 +24,15 @@ const ChatScreen: React.FC = () => { const {channel, chatClient} = useContext(ChatContext); const headerHeight = useHeaderHeight(); const tabbarHeight = useBottomTabBarHeight(); + 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; return ( diff --git a/src/utils/messages.ts b/src/utils/messages.ts new file mode 100644 index 00000000..ae8e7cec --- /dev/null +++ b/src/utils/messages.ts @@ -0,0 +1,59 @@ +import moment from 'moment'; + +/** + * Finds the difference in time in minutes + * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z" + * @returns diff in minutes + */ +const _diffInMinutes = (lastActive: string | undefined) => { + if (!lastActive) { + return undefined; + } + return moment().diff(moment(lastActive), 'minutes'); +}; + +/** + * Formats the last activity status. + * - "Active now" (≤ 5 minutes) + * - "Seen X minutes ago" (5 > x ≥ 59 minutes) + * - "Seen X hours ago" (x = [1, 2]) + * - "Offline" + * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z" + * @returns + */ +export const formatLastSeenText = (lastActive: string | undefined) => { + const diff = _diffInMinutes(lastActive); + if (!diff) { + return 'Offline'; + } + if (diff <= 5) { + return 'Active now'; + } + if (diff <= 59) { + return `Seen ${diff} minutes ago`; + } + if (diff <= 180) { + const hours = Math.floor(diff / 60); + return `Seen ${hours} hours ago`; + } + return 'Offline'; +}; + +/** + * Checks if a lastActive timestamp is considered Online or not. + * + * A user is online if last active is ≤ 15 minutes. + * + * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z" + * @returns True if active + */ +export const isOnline = (lastActive: string | undefined) => { + if (!lastActive) { + return false; + } + const diff = _diffInMinutes(lastActive); + if (!diff) { + return false; + } + return diff <= 15; +}; -- cgit v1.2.3-70-g09d2 From fab86f9b874524a4beabb3c45a9e59e8b00ca495 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Apr 2021 18:42:28 -0400 Subject: added chat header, created isMember util, fixed KB padding issue --- src/App.tsx | 15 ++---- src/components/messages/ChannelPreview.tsx | 25 ++++----- src/components/messages/ChatHeader.tsx | 84 ++++++++++++++++++++++++++++++ src/routes/main/MainStackScreen.tsx | 7 ++- src/screens/chat/ChatScreen.tsx | 31 +++++------ src/types/types.ts | 21 ++++---- src/utils/layouts.ts | 1 + src/utils/messages.ts | 24 +++++++++ 8 files changed, 151 insertions(+), 57 deletions(-) create mode 100644 src/components/messages/ChatHeader.tsx (limited to 'src/utils') diff --git a/src/App.tsx b/src/App.tsx index 9510c193..b8d64461 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,14 @@ import {NavigationContainer} from '@react-navigation/native'; import React, {useState} from 'react'; import {Provider} from 'react-redux'; -import {Channel as ChannelType, StreamChat} from 'stream-chat'; +import {StreamChat} from 'stream-chat'; import {OverlayProvider} from 'stream-chat-react-native'; import {STREAM_CHAT_API} from './constants'; import {navigationRef} from './RootNavigation'; import Routes from './routes'; import store from './store/configureStore'; import { + ChannelGroupedType, ChatContextType, LocalAttachmentType, LocalChannelType, @@ -21,17 +22,7 @@ import { export const ChatContext = React.createContext({} as ChatContextType); const App = () => { - const [channel, setChannel] = useState< - ChannelType< - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalResponseType, - LocalUserType - > - >(); + const [channel, setChannel] = useState(); const chatClient = StreamChat.getInstance< LocalAttachmentType, LocalChannelType, diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx index 867e0a38..8ec6060a 100644 --- a/src/components/messages/ChannelPreview.tsx +++ b/src/components/messages/ChannelPreview.tsx @@ -2,7 +2,7 @@ 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 {useSelector, useStore} from 'react-redux'; import {ChannelPreviewMessengerProps} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import {RootState} from '../../store/rootReducer'; @@ -16,7 +16,7 @@ import { LocalUserType, } from '../../types'; import {normalize, SCREEN_HEIGHT} from '../../utils'; -import {isOnline} from '../../utils/messages'; +import {getMember, isOnline} from '../../utils/messages'; const ChannelPreview: React.FC< ChannelPreviewMessengerProps< @@ -29,18 +29,11 @@ const ChannelPreview: React.FC< LocalUserType > > = (props) => { - const navigation = useNavigation(); const {setChannel} = useContext(ChatContext); + const state = useStore().getState(); + const navigation = useNavigation(); 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 member = getMember(channel, state); const online = isOnline(member?.user?.last_active); const unread = channel.state.unreadCount > 0; @@ -55,8 +48,8 @@ const ChannelPreview: React.FC< @@ -71,7 +64,9 @@ const ChannelPreview: React.FC< - {channel.state.messages[channel.state.messages.length - 1].text} + {channel.state.messages.length > 0 + ? channel.state.messages[channel.state.messages.length - 1].text + : ''} {unread && } diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx new file mode 100644 index 00000000..2bc096ec --- /dev/null +++ b/src/components/messages/ChatHeader.tsx @@ -0,0 +1,84 @@ +import React, {useContext} from 'react'; +import {Image, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {useStore} from 'react-redux'; +import {ChatContext} from '../../App'; +import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils'; +import {formatLastSeenText, getMember, isOnline} from '../../utils/messages'; + +type ChatHeaderProps = {}; + +const ChatHeader: React.FC = () => { + const {channel} = useContext(ChatContext); + const state = useStore().getState(); + const member = getMember(channel, state); + const online = isOnline(member?.user?.last_active); + const lastSeen = formatLastSeenText(member?.user?.last_active); + + return ( + + + + {online && } + + + + {member?.user?.first_name} {member?.user?.last_name} + + {lastSeen} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + height: ChatHeaderHeight - StatusBarHeight, + flexDirection: 'row', + alignItems: 'center', + paddingLeft: '15%', + }, + avatar: { + width: normalize(40), + height: normalize(40), + borderRadius: normalize(40) / 2, + }, + online: { + position: 'absolute', + backgroundColor: '#6EE7E7', + width: normalize(16), + height: normalize(16), + borderRadius: normalize(16) / 2, + borderColor: 'white', + borderWidth: 3, + top: 0, + right: 0, + }, + content: { + flex: 1, + height: '80%', + justifyContent: 'space-between', + flexDirection: 'column', + marginLeft: '5%', + }, + name: { + fontWeight: '700', + fontSize: normalize(15), + lineHeight: normalize(18), + }, + lastSeen: { + color: '#828282', + fontWeight: '500', + fontSize: normalize(12), + lineHeight: normalize(14), + }, +}); + +export default ChatHeader; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 8068b893..48c57920 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -34,7 +34,7 @@ import { } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; -import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils'; +import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; /** @@ -306,7 +306,10 @@ const MainStackScreen: React.FC = ({route}) => { ); diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 8e6c1575..386feb03 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,8 +1,8 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; -import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack'; +import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext} from 'react'; -import {StyleSheet, View} from 'react-native'; -import {useSelector} from 'react-redux'; +import {StyleSheet} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; import { Channel, Chat, @@ -10,8 +10,9 @@ import { MessageList, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; +import ChatHeader from '../../components/messages/ChatHeader'; import {MainStackParams} from '../../routes'; -import {RootState} from '../../store/rootReducer'; +import {isIPhoneX} from '../../utils'; type ChatScreenNavigationProp = StackNavigationProp; interface ChatScreenProps { @@ -22,33 +23,29 @@ interface ChatScreenProps { */ const ChatScreen: React.FC = () => { const {channel, chatClient} = useContext(ChatContext); - const headerHeight = useHeaderHeight(); const tabbarHeight = useBottomTabBarHeight(); - 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; return ( - + + - + {}} /> - + ); }; const styles = StyleSheet.create({ container: { backgroundColor: 'white', + flex: 1, }, }); diff --git a/src/types/types.ts b/src/types/types.ts index 582eefac..376c4be0 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -300,19 +300,18 @@ export type LocalMessageType = Record; export type LocalResponseType = Record; export type LocalReactionType = Record; export type LocalUserType = Record; +export type ChannelGroupedType = ChannelType< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType +>; export type ChatContextType = { - channel: - | ChannelType< - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalResponseType, - LocalUserType - > - | undefined; + channel: ChannelGroupedType | undefined; setChannel: React.Dispatch< React.SetStateAction< | ChannelType< diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts index e2f1f0b1..4d0d557d 100644 --- a/src/utils/layouts.ts +++ b/src/utils/layouts.ts @@ -31,6 +31,7 @@ export const StatusBarHeight = Platform.select({ }); export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3; +export const ChatHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.1; /** * This is a function for normalizing the font size for different devices, based on iphone 8. diff --git a/src/utils/messages.ts b/src/utils/messages.ts index ae8e7cec..d63f2b7a 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -1,4 +1,6 @@ import moment from 'moment'; +import {RootState} from '../store/rootReducer'; +import {ChannelGroupedType} from '../types'; /** * Finds the difference in time in minutes @@ -57,3 +59,25 @@ export const isOnline = (lastActive: string | undefined) => { } return diff <= 15; }; + +/** + * Gets the other member in the channel. + * @param channel the current chat channel + * @param state the current redux state + * @returns other member or undefined + */ +export const getMember = ( + channel: ChannelGroupedType | undefined, + state: RootState, +) => { + if (!channel) { + return undefined; + } + const loggedInUserId = state.user.user.userId; + const otherMembers = channel + ? Object.values(channel.state.members).filter( + (member) => member.user?.id !== loggedInUserId, + ) + : []; + return otherMembers.length === 1 ? otherMembers[0] : undefined; +}; -- cgit v1.2.3-70-g09d2 From 84c103614247ab7dc8b86767f3bfa83c13f224aa Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 8 Apr 2021 17:38:55 -0700 Subject: Modal viw added --- src/constants/api.ts | 3 +- src/constants/strings.ts | 1 + src/routes/main/MainStackNavigator.tsx | 1 + src/routes/main/MainStackScreen.tsx | 419 +++++++++++++++++---------------- src/screens/chat/ChatListScreen.tsx | 15 +- src/screens/chat/ChatResultsCell.tsx | 122 ++++++++++ src/screens/chat/ChatResultsList.tsx | 107 +++++++++ src/screens/chat/ChatSearchBar.tsx | 119 ++++++++++ src/screens/chat/NewChatModal.tsx | 137 +++++++++++ src/screens/chat/index.ts | 4 + src/screens/search/SearchScreen.tsx | 4 +- src/utils/common.ts | 30 ++- 12 files changed, 746 insertions(+), 216 deletions(-) create mode 100644 src/screens/chat/ChatResultsCell.tsx create mode 100644 src/screens/chat/ChatResultsList.tsx create mode 100644 src/screens/chat/ChatSearchBar.tsx create mode 100644 src/screens/chat/NewChatModal.tsx (limited to 'src/utils') diff --git a/src/constants/api.ts b/src/constants/api.ts index ffe47687..ef33631a 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -24,7 +24,8 @@ export const PROFILE_PHOTO_THUMBNAIL_ENDPOINT: string = export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/'; export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/'; export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/'; -export const SEARCH_ENDPOINT: string = API_URL + 'search/v2/'; +export const SEARCH_ENDPOINT: string = API_URL + 'search/'; +export const SEARCH_ENDPOINT_V2: string = API_URL + 'search/v2/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 4f792dcc..300ceb90 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -17,6 +17,7 @@ export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password'; export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one'; export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering your login information'; export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!'; +export const ERROR_FAILED_TO_CREATE_CHANNEL = 'Failed to create a channel, Please try again!'; export const ERROR_FAILED_TO_DELETE_COMMENT = 'Unable to delete comment, refresh and try again!'; export const ERROR_INVALID_INVITATION_CODE = 'Invitation code invalid, try again or talk to the friend that sent it 😬'; export const ERROR_INVALID_LOGIN = 'Invalid login, Please login again'; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 01b28fd4..64ad9198 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -95,6 +95,7 @@ export type MainStackParams = { SPWelcomeScreen: {}; ChatList: undefined; Chat: undefined; + NewChatModal: undefined; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 48c57920..1d222040 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -1,7 +1,12 @@ import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; -import {StackNavigationOptions} from '@react-navigation/stack'; -import React, {useState} from 'react'; +import { + StackNavigationOptions, + createStackNavigator, + TransitionSpecs, +} from '@react-navigation/stack'; +import {NavigationContainer} from '@react-navigation/native'; +import React, {useEffect, useState} from 'react'; import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; @@ -31,6 +36,7 @@ import { SettingsScreen, ChatListScreen, ChatScreen, + NewChatModal, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -52,7 +58,8 @@ type MainStackRouteProps = RouteProp; interface MainStackProps { route: MainStackRouteProps; } - +const RootStack = createStackNavigator(); +const tempStack = createStackNavigator(); const MainStackScreen: React.FC = ({route}) => { const {screenType} = route.params; @@ -64,6 +71,10 @@ const MainStackScreen: React.FC = ({route}) => { 'true', ); + useEffect(() => { + loadResponseToAccessContacts(); + }, []); + const loadResponseToAccessContacts = () => { AsyncStorage.getItem('respondedToAccessContacts') .then((value) => { @@ -75,8 +86,6 @@ const MainStackScreen: React.FC = ({route}) => { }); }; - loadResponseToAccessContacts(); - const initialRouteName = (() => { switch (screenType) { case ScreenType.Profile: @@ -106,213 +115,225 @@ const MainStackScreen: React.FC = ({route}) => { }), }; - return ( - - { + return ( + - {isSuggestedPeopleTab && - (respondedToAccessContacts && respondedToAccessContacts === 'true' ? ( + mode="card" + initialRouteName={initialRouteName}> + + {isSuggestedPeopleTab && + (respondedToAccessContacts && respondedToAccessContacts === 'true' ? ( + + ) : ( + + ))} + {isNotificationsTab && ( - ) : ( + )} + {isSearchTab && ( - ))} - {isNotificationsTab && ( + )} + + + + - )} - {isSearchTab && ( + - )} - - - - - - - - - - - - - - - - - - - - - - - - ); + + + + + + + + + + + + + + + + + + ); + }; + + return mainStackScreen(); }; export const headerBarOptions: ( diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 3290116b..ca1461fe 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -19,6 +19,7 @@ import { LocalUserType, } from '../../types'; +import NewChatModal from './NewChatModal'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, 'ChatList' @@ -29,8 +30,10 @@ interface ChatListScreenProps { /* * Screen that displays all of the user's active conversations. */ -const ChatListScreen: React.FC = () => { - const {chatClient} = useContext(ChatContext); +const ChatListScreen: React.FC = ({navigation}) => { + const {chatClient, setChannel} = useContext(ChatContext); + const [modalVisible, setChatModalVisible] = useState(false); + const [clientReady, setClientReady] = useState(false); const state: RootState = useStore().getState(); const loggedInUserId = state.user.user.userId; @@ -67,12 +70,7 @@ const ChatListScreen: React.FC = () => { { - // TODO: (CHAT) change me - const channel = chatClient.channel('messaging', { - name: 'Awesome channel with foobar', - members: [loggedInUserId, 'd5295557-59ce-49fc-aa8a-442874dbffc3'], - }); - channel.create(); + setChatModalVisible(true); }} /> {clientReady && ( @@ -100,6 +98,7 @@ const ChatListScreen: React.FC = () => { )} + {modalVisible && } diff --git a/src/screens/chat/ChatResultsCell.tsx b/src/screens/chat/ChatResultsCell.tsx new file mode 100644 index 00000000..00f7130d --- /dev/null +++ b/src/screens/chat/ChatResultsCell.tsx @@ -0,0 +1,122 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {useContext, useEffect, useState} from 'react'; +import {Alert, Image, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useDispatch, useSelector, useStore} from 'react-redux'; +import {loadImageFromURL} from '../../services'; +import {RootState} from '../../store/rootReducer'; +import {ProfilePreviewType, UserType} from '../../types'; +import {createChannel, normalize, SCREEN_WIDTH} from '../../utils'; +import {defaultUserProfile} from '../../utils/users'; +import {ChatContext} from '../../App'; +import {ERROR_FAILED_TO_CREATE_CHANNEL} from '../../constants/strings'; + +interface ChatResults { + profileData: ProfilePreviewType; + loggedInUser: UserType; + setChatModalVisible: Function; +} + +const ChatResultsCell: React.FC = ({ + profileData: {id, username, first_name, last_name, thumbnail_url}, + loggedInUser, + setChatModalVisible, +}) => { + const [avatar, setAvatar] = useState(undefined); + const {chatClient, setChannel} = useContext(ChatContext); + const {university} = useSelector((state: RootState) => state.user.profile); + + useEffect(() => { + (async () => { + if (thumbnail_url !== undefined) { + try { + const response = await loadImageFromURL(thumbnail_url); + if (response) { + setAvatar(response); + } + } catch (error) { + console.log('Error while downloading ', error); + throw error; + } + } + })(); + }, [thumbnail_url]); + + const dispatch = useDispatch(); + const state: RootState = useStore().getState(); + const navigation = useNavigation(); + const createChannelIfNotPresentAndNavigate = async () => { + try { + const channel = await createChannel(loggedInUser.userId, id, chatClient); + setChannel(channel); + setTimeout(() => { + setChatModalVisible(false); + navigation.navigate('Chat'); + }, 500); + } catch (error) { + Alert.alert(ERROR_FAILED_TO_CREATE_CHANNEL); + } + }; + + const userCell = () => { + return ( + + + + {`@${username}`} + + {first_name + ' ' + last_name} + + + + ); + }; + + return userCell(); +}; + +const styles = StyleSheet.create({ + cellContainer: { + flexDirection: 'row', + paddingHorizontal: 25, + paddingVertical: 15, + width: SCREEN_WIDTH, + }, + imageContainer: { + width: SCREEN_WIDTH * 0.112, + height: SCREEN_WIDTH * 0.112, + borderRadius: (SCREEN_WIDTH * 0.112) / 2, + }, + categoryBackground: { + backgroundColor: 'rgba(196, 196, 196, 0.45)', + justifyContent: 'center', + alignItems: 'center', + }, + categoryImage: { + width: '40%', + height: '40%', + }, + initialTextContainer: { + marginLeft: SCREEN_WIDTH * 0.08, + flexDirection: 'column', + justifyContent: 'center', + }, + initialTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, + secondaryTextStyle: { + fontWeight: '500', + fontSize: normalize(12), + color: '#828282', + }, + multiText: {justifyContent: 'space-between'}, +}); + +export default ChatResultsCell; diff --git a/src/screens/chat/ChatResultsList.tsx b/src/screens/chat/ChatResultsList.tsx new file mode 100644 index 00000000..17a16572 --- /dev/null +++ b/src/screens/chat/ChatResultsList.tsx @@ -0,0 +1,107 @@ +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; +import React, {useEffect, useState} from 'react'; +import { + Keyboard, + SectionList, + SectionListData, + StyleSheet, + Text, + View, +} from 'react-native'; +import {useSelector} from 'react-redux'; +import {NO_RESULTS_FOUND} from '../../constants/strings'; +import {RootState} from '../../store/rootreducer'; +import {PreviewType, ScreenType} from '../../types'; +import {normalize, SCREEN_WIDTH} from '../../utils'; +import ChatResultsCell from './ChatResultsCell'; + +interface ChatResultsProps { + // TODO: make sure results come in as same type, regardless of profile, category, badges + results: SectionListData[]; + previewType: PreviewType; + screenType: ScreenType; + setChatModalVisible: Function; +} + +const sectionHeader: React.FC = () => { + return null; +}; + +const ChatResultsList: React.FC = ({ + results, + setChatModalVisible, +}) => { + const [showEmptyView, setshowEmptyView] = useState(false); + const {user: loggedInUser} = useSelector((state: RootState) => state.user); + + useEffect(() => { + if (results && results.length > 0) { + let showEmpty = true; + + results.forEach((e) => { + if (e.data.length > 0) { + showEmpty = false; + } + }); + setshowEmptyView(showEmpty); + } + }, [results]); + + return showEmptyView ? ( + + {NO_RESULTS_FOUND} + + ) : ( + item.id + index} + renderItem={({item}) => { + return ( + + ); + }} + stickySectionHeadersEnabled={false} + ListEmptyComponent={() => ( + + Start a new chat by searching for someone + + )} + /> + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: 30, + alignItems: 'center', + }, + sectionHeaderStyle: { + width: '100%', + height: 0.5, + marginVertical: 5, + backgroundColor: '#C4C4C4', + }, + noResultsTextContainer: { + justifyContent: 'center', + flexDirection: 'row', + width: SCREEN_WIDTH, + }, + noResultsTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, +}); + +export default ChatResultsList; diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx new file mode 100644 index 00000000..294efa57 --- /dev/null +++ b/src/screens/chat/ChatSearchBar.tsx @@ -0,0 +1,119 @@ +import React, {useEffect, useState} from 'react'; +import { + Keyboard, + NativeSyntheticEvent, + StyleSheet, + Text, + TextInput, + TextInputProps, + TextInputSubmitEditingEventData, + TouchableOpacity, + View, + ViewStyle, + LayoutChangeEvent, +} from 'react-native'; +import {normalize} from 'react-native-elements'; +import Animated, {useAnimatedStyle} from 'react-native-reanimated'; +import Icon from 'react-native-vector-icons/Feather'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; +import {getSearchSuggestions} from '../../utils'; + +const AnimatedIcon = Animated.createAnimatedComponent(Icon); + +interface SearchBarProps extends TextInputProps { + onCancel: () => void; + animationProgress: Animated.SharedValue; + searching: boolean; + placeholder: string; +} +const ChatSearchBar: React.FC = ({ + onFocus, + onBlur, + onChangeText, + value, + onCancel, + searching, + animationProgress, + onLayout, + placeholder, +}) => { + const handleSubmit = ( + e: NativeSyntheticEvent, + ) => { + e.preventDefault(); + Keyboard.dismiss(); + }; + + /* + * On-search marginRight style ("cancel" button slides and fades in). + */ + const animatedStyles = useAnimatedStyle(() => ({ + marginRight: animationProgress.value * 58, + opacity: animationProgress.value, + })); + + return ( + + + + To: + + + + + + Cancel + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + height: 40, + paddingHorizontal: 20, + flexDirection: 'row', + zIndex: 2, + }, + searchTextContainer: {marginHorizontal: 12}, + searchTextStyes: {fontWeight: 'bold', fontSize: 14, lineHeight: 17}, + inputContainer: { + flexGrow: 1, + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 8, + borderRadius: 20, + backgroundColor: '#F0F0F0', + }, + searchIcon: { + marginRight: 8, + }, + input: { + flex: 1, + fontSize: 16, + color: '#000', + letterSpacing: normalize(0.5), + }, + cancelButton: { + height: '100%', + position: 'absolute', + justifyContent: 'center', + paddingHorizontal: 8, + }, + cancelText: { + color: '#818181', + fontWeight: '500', + }, +}); + +export default ChatSearchBar; diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx new file mode 100644 index 00000000..2bbaf8d2 --- /dev/null +++ b/src/screens/chat/NewChatModal.tsx @@ -0,0 +1,137 @@ +import {useNavigation} from '@react-navigation/core'; +import React, {useEffect, useRef, useState} from 'react'; +import { + Keyboard, + SectionListData, + StatusBar, + StyleSheet, + Text, + View, +} from 'react-native'; +import {useSharedValue} from 'react-native-reanimated'; +import {BottomDrawer} from '../../components'; +import {SEARCH_ENDPOINT} from '../../constants'; +import {loadSearchResults} from '../../services'; +import {ScreenType} from '../../types'; +import {normalize} from '../../utils'; +import {ChatResultsList, ChatSearchBar} from './index'; +interface NewChatModalProps { + setChatModalVisible: (open: boolean) => void; +} + +const NewChatModal: React.FC = ({setChatModalVisible}) => { + const [modalVisible, setModalVisible] = useState(true); + const navigation = useNavigation(); + const sheetRef = useRef(null); + const [searching, setSearching] = useState(false); + /* + * Animated value + */ + const animationProgress = useSharedValue(0); + const [results, setResults] = useState[]>([]); + const [query, setQuery] = useState(''); + const handleFocus = () => { + setSearching(true); + }; + const handleBlur = () => { + Keyboard.dismiss(); + }; + const handleCancel = () => { + setSearching(false); + }; + + useEffect(() => { + if (!searching) { + return; + } + if (query.length < 3) { + return; + } + (async () => { + const searchResults = await loadSearchResults( + `${SEARCH_ENDPOINT}?query=${query}`, + ); + if (query.length > 2) { + const sanitizedResult = [ + { + title: 'users', + data: searchResults?.users, + }, + ]; + setResults(sanitizedResult); + } else { + setResults([]); + } + })(); + }, [query]); + + const _modalContent = () => { + return ( + + + New Message + + + {results.length > 0 && ( + + Suggested + + )} + + + ); + }; + + return ( + + + + {_modalContent()} + + + ); +}; + +const styles = StyleSheet.create({ + modalShadowContainer: { + height: '100%', + borderRadius: 9, + backgroundColor: 'white', + }, + titleContainerStyles: {marginVertical: 24}, + titleTextStyles: { + fontWeight: 'bold', + fontSize: normalize(18), + lineHeight: normalize(21), + textAlign: 'center', + }, + headerContainerStyles: { + marginTop: 26, + marginBottom: 10, + marginHorizontal: 28, + }, + headerTextStyles: { + fontWeight: 'bold', + fontSize: normalize(17), + lineHeight: normalize(20), + }, +}); + +export default NewChatModal; diff --git a/src/screens/chat/index.ts b/src/screens/chat/index.ts index d2ccb02b..328eb8bf 100644 --- a/src/screens/chat/index.ts +++ b/src/screens/chat/index.ts @@ -1,2 +1,6 @@ export {default as ChatListScreen} from './ChatListScreen'; export {default as ChatScreen} from './ChatScreen'; +export {default as NewChatModal} from './NewChatModal'; +export {default as ChatSearchBar} from './ChatSearchBar'; +export {default as ChatResultsList} from './ChatResultsList'; +export {default as ChatResultsCell} from './ChatResultsCell'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index f7e1c467..6d8e4848 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -24,7 +24,7 @@ import { SearchResultsBackground, TabsGradient, } from '../../components'; -import {SEARCH_ENDPOINT} from '../../constants'; +import {SEARCH_ENDPOINT_V2} from '../../constants'; import {loadSearchResults} from '../../services'; import {resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; @@ -71,7 +71,7 @@ const SearchScreen: React.FC = () => { } (async () => { const searchResults = await loadSearchResults( - `${SEARCH_ENDPOINT}?query=${query}`, + `${SEARCH_ENDPOINT_V2}?query=${query}`, ); if (query.length > 2) { const sanitizedResult = [ diff --git a/src/utils/common.ts b/src/utils/common.ts index 4f31af8e..0900a084 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,14 +1,14 @@ +import AsyncStorage from '@react-native-community/async-storage'; +import moment from 'moment'; +import {Linking} from 'react-native'; +import {getAll} from 'react-native-contacts'; +import {BROWSABLE_SOCIAL_URLS, TOGGLE_BUTTON_TYPE} from '../constants'; import { ContactType, NotificationType, - UniversityType, UniversityBadgeType, + UniversityType, } from './../types/types'; -import moment from 'moment'; -import {Linking} from 'react-native'; -import {BROWSABLE_SOCIAL_URLS, TOGGLE_BUTTON_TYPE} from '../constants'; -import AsyncStorage from '@react-native-community/async-storage'; -import {getAll} from 'react-native-contacts'; export const getToggleButtonText: ( buttonType: string, @@ -173,3 +173,21 @@ const _crestIcon = (university: UniversityType) => { return require('../assets/images/bwbadges.png'); } }; + +export const createChannel = async ( + loggedInUser: string, + id: string, + chatClient: any, +) => { + console.log(loggedInUser, id, chatClient); + try { + const channel = chatClient.channel('messaging', { + members: [loggedInUser, id], + }); + await channel.watch(); + return channel; + } catch (error) { + console.log(error); + throw error; + } +}; -- cgit v1.2.3-70-g09d2