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') 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