From f0b3aa2590303e3441b6ddc4cd0fcdfd0f59bbd4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 12:01:55 -0700 Subject: Add new folder, Add new screen, Add temp button --- src/routes/main/MainStackNavigator.tsx | 1 + src/routes/main/MainStackScreen.tsx | 2 ++ 2 files changed, 3 insertions(+) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 3b183cc0..dac60c0c 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -99,6 +99,7 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; + TagSelection: undefined; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index d76f9137..d146190c 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -32,6 +32,7 @@ import { SuggestedPeopleScreen, SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, + TagSelection, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -310,6 +311,7 @@ const MainStackScreen: React.FC = ({route}) => { component={NewChatModal} options={{headerShown: false, ...newChatModalStyle}} /> + ); }; -- cgit v1.2.3-70-g09d2 From 0ea5e2a5c9a717638a2714aef54d729938fe562e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 10:05:02 -0700 Subject: Missed from previous commit --- src/routes/main/MainStackNavigator.tsx | 6 +++++- src/routes/main/MainStackScreen.tsx | 8 +++++++- 2 files changed, 12 insertions(+), 2 deletions(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index dac60c0c..67be9e46 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -6,6 +6,7 @@ import {Image} from 'react-native-image-crop-picker'; import { CommentBaseType, MomentType, + ProfilePreviewType, ScreenType, SearchCategoryType, } from '../../types'; @@ -39,6 +40,7 @@ export type MainStackParams = { title: string; image: Image; screenType: ScreenType; + selectedUsers?: ProfilePreviewType[]; }; IndividualMoment: { moment: MomentType; @@ -99,7 +101,9 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; - TagSelection: undefined; + TagSelection: { + selectedUsers: ProfilePreviewType[]; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index d146190c..d18d11c6 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -311,7 +311,13 @@ const MainStackScreen: React.FC = ({route}) => { component={NewChatModal} options={{headerShown: false, ...newChatModalStyle}} /> - + ); }; -- cgit v1.2.3-70-g09d2 From b8167487f9b069262459efd81b8860ddf615df13 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 14:00:28 -0700 Subject: Change screen name --- src/routes/main/MainStackNavigator.tsx | 2 +- src/routes/main/MainStackScreen.tsx | 6 +- src/screens/moments/TagSelection.tsx | 177 --------------------------- src/screens/moments/TagSelectionScreen.tsx | 185 +++++++++++++++++++++++++++++ src/screens/moments/index.ts | 2 +- src/screens/profile/CaptionScreen.tsx | 8 +- 6 files changed, 193 insertions(+), 187 deletions(-) delete mode 100644 src/screens/moments/TagSelection.tsx create mode 100644 src/screens/moments/TagSelectionScreen.tsx (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 67be9e46..a8da3030 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -101,7 +101,7 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; - TagSelection: { + TagSelectionScreen: { selectedUsers: ProfilePreviewType[]; }; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index d18d11c6..61491641 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -32,7 +32,7 @@ import { SuggestedPeopleScreen, SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, - TagSelection, + TagSelectionScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -312,8 +312,8 @@ const MainStackScreen: React.FC = ({route}) => { options={{headerShown: false, ...newChatModalStyle}} /> ; -interface TagSelectionProps { - route: TagSelectionRouteProps; -} - -const TagSelection: React.FC = ({route}) => { - const navigation = useNavigation(); - const [users, setUsers] = useState([]); - const [selectedUsers, setSelectedUsers] = useState( - route.params.selectedUsers, - ); - const [searching, setSearching] = useState(false); - const [query, setQuery] = useState(''); - const [label, setLabel] = useState('Recent'); - - useEffect(() => { - navigation.setOptions({ - headerLeft: () => ( - { - if (selectedUsers.length > 0) { - navigation.setParams({selectedUsers: selectedUsers}); - } - navigation.goBack(); - }}> - - - ), - }); - }); - - /* - * - */ - const loadUsers = async () => { - const data: ProfilePreviewType[] = await loadTaggUserSuggestions(); - const filteredData: ProfilePreviewType[] = data.filter((user) => { - const index = selectedUsers.findIndex((s) => s.id === user.id); - return index === -1; - }); - setUsers([...filteredData, ...selectedUsers]); - }; - - /* - * - */ - const getQuerySuggested = async () => { - if (query.length > 0) { - const searchResults = await loadSearchResults( - `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`, - ); - setUsers(searchResults?.users); - } else { - setUsers([]); - } - }; - - /* - * - */ - useEffect(() => { - loadUsers(); - }, []); - - /* - * - */ - useEffect(() => { - if (query.length === 0) { - setLabel('Recent'); - loadUsers(); - } - - if (!searching) { - return; - } - - if (query.length < 3) { - return; - } - setLabel(''); - getQuerySuggested(); - }, [query]); - - return ( - - - { - setSearching(true); - }} - value={query} - /> - - {label} - {users && ( - item.id} - renderItem={(item) => ( - - )} - /> - )} - - ); -}; - -export default TagSelection; - -const styles = StyleSheet.create({ - safeAreaView: { - backgroundColor: 'white', - height: SCREEN_HEIGHT, - }, - backButton: { - marginLeft: 30, - marginTop: 20, - }, - searchBarContainer: { - width: SCREEN_WIDTH * 0.9, - alignSelf: 'flex-end', - marginTop: 10, - }, - searchContainer: { - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - width: '100%', - height: normalize(42), - alignItems: 'center', - marginBottom: '3%', - marginHorizontal: 10, - }, - title: { - fontWeight: '700', - fontSize: normalize(17), - lineHeight: normalize(20.29), - marginHorizontal: '7%', - marginTop: '4%', - marginBottom: '2%', - }, -}); diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx new file mode 100644 index 00000000..6920c75c --- /dev/null +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -0,0 +1,185 @@ +import {useNavigation} from '@react-navigation/core'; +import {RouteProp} from '@react-navigation/native'; +import React, {useEffect, useState} from 'react'; +import { + SafeAreaView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {FlatList} from 'react-native-gesture-handler'; +import {MainStackParams} from '../../routes'; +import BackIcon from '../../assets/icons/back-arrow.svg'; +import {SearchBar, TaggUserSelectionCell} from '../../components'; +import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; +import {loadSearchResults} from '../../services'; +import {ProfilePreviewType} from '../../types'; +import { + loadTaggUserSuggestions, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; + +type TagSelectionScreenRouteProps = RouteProp< + MainStackParams, + 'TagSelectionScreen' +>; +interface TagSelectionScreenProps { + route: TagSelectionScreenRouteProps; +} + +const TagSelectionScreen: React.FC = ({route}) => { + const navigation = useNavigation(); + const [users, setUsers] = useState([]); + const [selectedUsers, setSelectedUsers] = useState( + route.params.selectedUsers, + ); + const [searching, setSearching] = useState(false); + const [query, setQuery] = useState(''); + const [label, setLabel] = useState('Recent'); + + /* + * + */ + useEffect(() => { + navigation.setOptions({ + headerLeft: () => ( + { + if (selectedUsers.length > 0) { + navigation.setParams({selectedUsers: selectedUsers}); + navigation.navigate('CaptionScreen'); + } else { + navigation.goBack(); + } + }}> + + + ), + }); + }); + + /* + * + */ + const loadUsers = async () => { + const data: ProfilePreviewType[] = await loadTaggUserSuggestions(); + const filteredData: ProfilePreviewType[] = data.filter((user) => { + const index = selectedUsers.findIndex((s) => s.id === user.id); + return index === -1; + }); + setUsers([...filteredData, ...selectedUsers]); + }; + + /* + * + */ + const getQuerySuggested = async () => { + if (query.length > 0) { + const searchResults = await loadSearchResults( + `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`, + ); + setUsers(searchResults?.users); + } else { + setUsers([]); + } + }; + + /* + * + */ + useEffect(() => { + loadUsers(); + }, []); + + /* + * + */ + useEffect(() => { + if (query.length === 0) { + setLabel('Recent'); + loadUsers(); + } + + if (!searching) { + return; + } + + if (query.length < 3) { + return; + } + setLabel(''); + getQuerySuggested(); + }, [query]); + + return ( + + + { + setSearching(true); + }} + value={query} + /> + + {label} + {users && ( + item.id} + renderItem={(item) => ( + + )} + /> + )} + + ); +}; + +export default TagSelectionScreen; + +const styles = StyleSheet.create({ + safeAreaView: { + backgroundColor: 'white', + height: SCREEN_HEIGHT, + }, + backButton: { + marginLeft: 30, + marginTop: 20, + }, + searchBarContainer: { + width: SCREEN_WIDTH * 0.9, + alignSelf: 'flex-end', + marginTop: 10, + }, + searchContainer: { + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + height: normalize(42), + alignItems: 'center', + marginBottom: '3%', + marginHorizontal: 10, + }, + title: { + fontWeight: '700', + fontSize: normalize(17), + lineHeight: normalize(20.29), + marginHorizontal: '7%', + marginTop: '4%', + marginBottom: '2%', + }, +}); diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts index f2f4cbc5..3cdd3128 100644 --- a/src/screens/moments/index.ts +++ b/src/screens/moments/index.ts @@ -1 +1 @@ -export {default as TagSelection} from './TagSelection'; +export {default as TagSelectionScreen} from './TagSelectionScreen'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index bc7c9ed0..4fa81f8c 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -126,17 +126,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> + {/* TODO: Add tag friends component */} - navigation.navigate('TagSelection', { + navigation.navigate('TagSelectionScreen', { selectedUsers: taggedUsers, }) }> - {/* TODO: Add tag friends component */} - - Tag Friends - + Tag Friends {/* TODO: Display tagged friends component */} -- cgit v1.2.3-70-g09d2 From 602ff2ced6176a46e5d219d38e8e4f64a4a61f56 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 16:13:16 -0700 Subject: Add new Tag Friends Screen --- src/routes/main/MainStackNavigator.tsx | 5 + src/routes/main/MainStackScreen.tsx | 5 + src/screens/moments/TagFriendsScreen.tsx | 212 +++++++++++++++++++++++++++++++ src/screens/moments/index.ts | 1 + 4 files changed, 223 insertions(+) create mode 100644 src/screens/moments/TagFriendsScreen.tsx (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 054fb643..aeead38d 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -102,6 +102,11 @@ export type MainStackParams = { TagSelectionScreen: { selectedUsers: ProfilePreviewType[]; }; + TagFriendsScreen: { + image: Image; + screenType: ScreenType; + selectedUsers?: ProfilePreviewType[]; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 61491641..1b646f24 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -33,6 +33,7 @@ import { SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, TagSelectionScreen, + TagFriendsScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -318,6 +319,10 @@ const MainStackScreen: React.FC = ({route}) => { ...headerBarOptions('black', ''), }} /> + ); }; diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx new file mode 100644 index 00000000..54da94ee --- /dev/null +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -0,0 +1,212 @@ +import {RouteProp} from '@react-navigation/core'; +import {useNavigation} from '@react-navigation/native'; +import React, {Fragment, useEffect, useState} from 'react'; +import { + Image, + Keyboard, + KeyboardAvoidingView, + Platform, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native'; +import {Button} from 'react-native-elements'; +import {MainStackParams} from 'src/routes'; +import { + CaptionScreenHeader, + ProfilePreview, + SearchBackground, + TaggLoadingIndicator, +} from '../../components'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; +import {ProfilePreviewType, ScreenType} from '../../types'; +import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; + +type TagFriendsScreenRouteProps = RouteProp< + MainStackParams, + 'TagFriendsScreen' +>; +interface TagFriendsScreenProps { + route: TagFriendsScreenRouteProps; +} +const TagFriendsScreen: React.FC = ({route}) => { + const {image, selectedUsers} = route.params; + const navigation = useNavigation(); + const [loading, setLoading] = useState(false); + const [taggedUsers, setTaggedUsers] = useState([]); + + useEffect(() => { + setTaggedUsers(selectedUsers ? selectedUsers : []); + }, [route.params]); + + /* + * Navigate back to Tag Users Screen, send selected users + */ + const handleDone = () => { + navigation.navigate('CaptionScreen', { + ...route.params, + selectedUsers: taggedUsers, + }); + }; + + return ( + + {loading ? : } + + + + +