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 ++ src/screens/index.ts | 1 + src/screens/moments/TagSelection.tsx | 7 +++++++ src/screens/moments/index.ts | 1 + src/screens/profile/CaptionScreen.tsx | 9 ++++++++- 6 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 src/screens/moments/TagSelection.tsx create mode 100644 src/screens/moments/index.ts (limited to 'src') 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}} /> + ); }; diff --git a/src/screens/index.ts b/src/screens/index.ts index 44ae4b52..0c7d911f 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -6,3 +6,4 @@ export * from './suggestedPeople'; export * from './suggestedPeopleOnboarding'; export * from './badge'; export * from './chat'; +export * from './moments'; diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx new file mode 100644 index 00000000..fe88bc90 --- /dev/null +++ b/src/screens/moments/TagSelection.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const TagSelection: React.FC = () => { + return <>; +}; + +export default TagSelection; diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts new file mode 100644 index 00000000..f2f4cbc5 --- /dev/null +++ b/src/screens/moments/index.ts @@ -0,0 +1 @@ +export {default as TagSelection} from './TagSelection'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index a41abba6..15abe965 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -10,6 +10,8 @@ import { StyleSheet, TouchableWithoutFeedback, View, + TouchableOpacity, + Text, } from 'react-native'; import {MentionInput} from 'react-native-controlled-mentions'; import {Button} from 'react-native-elements'; @@ -26,7 +28,7 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; /** @@ -118,6 +120,11 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> + + + Tag Friends + + -- cgit v1.2.3-70-g09d2 From f55de9bacc8c9b38690cd24340b47328ce777352 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 16:40:11 -0700 Subject: Create tagg selection screen --- src/screens/moments/TagSelection.tsx | 102 ++++++++++++++++++++++++++++++++++- 1 file changed, 100 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx index fe88bc90..5a1e6ac9 100644 --- a/src/screens/moments/TagSelection.tsx +++ b/src/screens/moments/TagSelection.tsx @@ -1,7 +1,105 @@ -import React from 'react'; +import {useNavigation} from '@react-navigation/native'; +import React, {useEffect, useState} from 'react'; +import {Keyboard, SafeAreaView, StyleSheet} from 'react-native'; +import {FlatList} from 'react-native-gesture-handler'; +import {TaggUserSelectionCell} from '../../components'; +import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; +import {loadSearchResults} from '../../services'; +import {ProfilePreviewType} from '../../types'; +import {loadTaggUserSuggestions, SCREEN_HEIGHT} from '../../utils'; +import {ChatSearchBar} from '../chat'; const TagSelection: React.FC = () => { - return <>; + const navigation = useNavigation(); + const [users, setUsers] = useState([]); + const [selectedUsers, setSelectedUsers] = useState([]); + + 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(); + }, []); + + const [searching, setSearching] = useState(false); + const [query, setQuery] = useState(''); + const handleFocus = () => { + setSearching(true); + }; + const handleBlur = () => { + Keyboard.dismiss(); + }; + const handleCancel = () => { + setQuery(''); + navigation.goBack(); + }; + + useEffect(() => { + if (query.length === 0) { + loadUsers(); + } + + if (!searching) { + return; + } + + if (query.length < 3) { + return; + } + getQuerySuggested(); + }, [query]); + + useEffect(() => { + console.log('selectedUsers: ', selectedUsers); + }, [selectedUsers, users]); + + return ( + + + {users && ( + item.id} + renderItem={(item) => ( + + )} + /> + )} + + ); }; export default TagSelection; + +const styles = StyleSheet.create({ + safeAreaView: {backgroundColor: 'white', height: SCREEN_HEIGHT}, +}); -- cgit v1.2.3-70-g09d2 From f1af15c7f38178fb8a3576c8af92f828dea8a0ed Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 16:40:43 -0700 Subject: Add tagg uiser list item --- src/components/common/TaggUserSelectionCell.tsx | 62 +++++++++++++++++++++++++ src/components/common/index.ts | 1 + 2 files changed, 63 insertions(+) create mode 100644 src/components/common/TaggUserSelectionCell.tsx (limited to 'src') diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx new file mode 100644 index 00000000..88382119 --- /dev/null +++ b/src/components/common/TaggUserSelectionCell.tsx @@ -0,0 +1,62 @@ +import React, {useState} from 'react'; +import {StyleSheet, View} from 'react-native'; +import {ProfilePreview} from '..'; +import {ProfilePreviewType, ScreenType} from '../../types'; +import {SCREEN_WIDTH} from '../../utils'; +import TaggRadioButton from './TaggRadioButton'; + +interface TaggUserSelectionCellProps { + item: ProfilePreviewType; + selectedUsers: ProfilePreviewType[]; + setSelectedUsers: Function; +} +const TaggUserSelectionCell: React.FC = ({ + item, + selectedUsers, + setSelectedUsers, +}) => { + const [pressed, setPressed] = useState(false); + + const handlePress = () => { + // Add to selected list pf users + if (pressed === false) { + setSelectedUsers([...selectedUsers, item]); + setPressed(true); + } + // Remove item from selected list of users + else { + const filteredSelection = selectedUsers.filter( + (user) => user.id !== item.id, + ); + setSelectedUsers(filteredSelection); + setPressed(false); + } + }; + return ( + + + + + + + ); +}; + +export default TaggUserSelectionCell; + +const styles = StyleSheet.create({ + container: { + marginHorizontal: '3%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 48abb8b8..44edbe5f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -27,3 +27,4 @@ export {default as Avatar} from './Avatar'; export {default as TaggTypeahead} from './TaggTypeahead'; export {default as TaggUserRowCell} from './TaggUserRowCell'; export {default as LikeButton} from './LikeButton'; +export {default as TaggUserSelectionCell} from './TaggUserSelectionCell'; -- cgit v1.2.3-70-g09d2 From 8ad9571539f1cf8b468dc830fb3643f567ba11e5 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 16:42:14 -0700 Subject: Navigate to Tagg selection screen --- src/screens/profile/CaptionScreen.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 15abe965..fb382e53 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -120,7 +120,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - + navigation.navigate('TagSelection')}> Tag Friends -- cgit v1.2.3-70-g09d2 From 408c1c4046d1945ea4d2e857796841368ab1b8e8 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 16:42:45 -0700 Subject: Add new radio button --- src/components/common/TaggRadioButton.tsx | 51 +++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/components/common/TaggRadioButton.tsx (limited to 'src') diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx new file mode 100644 index 00000000..bd48bd5c --- /dev/null +++ b/src/components/common/TaggRadioButton.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import {StyleSheet, TouchableOpacity, View} from 'react-native'; + +interface TaggRadioButtonProps { + pressed: boolean; + setPressed: Function; + onPress: Function; +} +const TaggRadioButton: React.FC = ({ + pressed, + setPressed, + onPress, +}) => { + const activeOuterStyle = { + borderColor: pressed ? '#6EE7E7' : '#BEBEBE', + }; + + const activeInnerStyle = { + backgroundColor: pressed ? '#6EE7E7' : 'white', + }; + return ( + { + setPressed(!pressed); + onPress(); + }}> + {pressed && } + + ); +}; + +export default TaggRadioButton; +const styles = StyleSheet.create({ + outer: { + width: 20, + height: 20, + borderWidth: 1.5, + borderRadius: 20, + + backgroundColor: 'white', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + inner: { + width: 14, + height: 14, + borderRadius: 8, + }, +}); -- cgit v1.2.3-70-g09d2 From 68c33a12c867ab328e7e1899d4fcbfcdb6f7f119 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 16:43:32 -0700 Subject: Modify to reuse existing search bar --- src/screens/chat/ChatSearchBar.tsx | 14 ++++++++++---- src/screens/chat/NewChatModal.tsx | 1 + 2 files changed, 11 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx index 91018d4c..1c91f493 100644 --- a/src/screens/chat/ChatSearchBar.tsx +++ b/src/screens/chat/ChatSearchBar.tsx @@ -17,6 +17,7 @@ interface SearchBarProps extends TextInputProps { onCancel: () => void; searching: boolean; placeholder: string; + label?: string; } const ChatSearchBar: React.FC = ({ onFocus, @@ -26,6 +27,7 @@ const ChatSearchBar: React.FC = ({ onCancel, onLayout, placeholder, + label, }) => { const handleSubmit = ( e: NativeSyntheticEvent, @@ -34,14 +36,18 @@ const ChatSearchBar: React.FC = ({ Keyboard.dismiss(); }; + const extraLabelStyle = {paddingLeft: label ? 0 : 10}; + return ( - - To: - + {label && ( + + {label} + + )} = ({ value={query} searching={searching} placeholder={''} + label={'To:'} /> {results.length > 0 && ( -- cgit v1.2.3-70-g09d2 From adc3712b1144bbf62d62ed02b015c8e8c489bffb Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 19 May 2021 16:44:40 -0700 Subject: Add common function to get suggested list pf users --- src/constants/index.ts | 1 + src/utils/search.ts | 11 ++++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/constants/index.ts b/src/constants/index.ts index a9cfe947..96ed3fb0 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,3 +1,4 @@ export * from './api'; export * from './constants'; export * from './regex'; +export * from './badges'; diff --git a/src/utils/search.ts b/src/utils/search.ts index 26f40b1b..b3abce9c 100644 --- a/src/utils/search.ts +++ b/src/utils/search.ts @@ -1,6 +1,7 @@ import AsyncStorage from '@react-native-community/async-storage'; +import {loadSearchResults} from '../services'; -import {BADGE_DATA} from '../constants/badges'; +import {BADGE_DATA, SEARCH_ENDPOINT_SUGGESTED} from '../constants'; import { ProfilePreviewType, CategoryPreviewType, @@ -138,3 +139,11 @@ export const getRecentlySearchedCategories = async (): Promise< } return []; }; + +/* + * Retrieves and returns a list of suggested tagg users + */ +export const loadTaggUserSuggestions = async () => { + const searchResults = await loadSearchResults(`${SEARCH_ENDPOINT_SUGGESTED}`); + return searchResults?.users; +}; -- cgit v1.2.3-70-g09d2 From 7c2be0e80e5da6d2359a30948037c1c1e78c0200 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 10:04:16 -0700 Subject: Add back button, Exchange selected users --- src/screens/moments/TagSelection.tsx | 35 +++++++++++++++++++++++++++++++++-- src/screens/profile/CaptionScreen.tsx | 18 +++++++++++++++--- 2 files changed, 48 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx index 5a1e6ac9..4d1f664e 100644 --- a/src/screens/moments/TagSelection.tsx +++ b/src/screens/moments/TagSelection.tsx @@ -9,10 +9,41 @@ import {ProfilePreviewType} from '../../types'; import {loadTaggUserSuggestions, SCREEN_HEIGHT} from '../../utils'; import {ChatSearchBar} from '../chat'; -const TagSelection: React.FC = () => { +type TagSelectionRouteProps = RouteProp; +interface TagSelectionProps { + route: TagSelectionRouteProps; +} + +const TagSelection: React.FC = ({route}) => { const navigation = useNavigation(); const [users, setUsers] = useState([]); - const [selectedUsers, setSelectedUsers] = 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(); diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index fb382e53..bc7c9ed0 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useEffect, useState} from 'react'; import { Alert, Image, @@ -16,6 +16,7 @@ import { import {MentionInput} from 'react-native-controlled-mentions'; import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; +import {ProfilePreviewType} from 'src/types'; import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; @@ -45,13 +46,18 @@ interface CaptionScreenProps { } const CaptionScreen: React.FC = ({route, navigation}) => { - const {title, image, screenType} = route.params; + const {title, image, screenType, selectedUsers} = route.params; const { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); + const [taggedUsers, setTaggedUsers] = useState([]); + + useEffect(() => { + setTaggedUsers(selectedUsers ? selectedUsers : []); + }, selectedUsers); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -122,11 +128,17 @@ const CaptionScreen: React.FC = ({route, navigation}) => { /> navigation.navigate('TagSelection')}> + onPress={() => + navigation.navigate('TagSelection', { + selectedUsers: taggedUsers, + }) + }> + {/* TODO: Add tag friends component */} Tag Friends + {/* TODO: Display tagged friends component */} -- 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') 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 d18f9db3a22bb0193c4c0ef62c15a7757cf66470 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 10:05:31 -0700 Subject: Updated generic SearchBar --- src/components/search/SearchBar.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 25ea3b59..a17d0695 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -21,10 +21,10 @@ import {getSearchSuggestions, normalize} from '../../utils'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); interface SearchBarProps extends TextInputProps { - onCancel: () => void; - animationProgress: Animated.SharedValue; - searching: boolean; - onLayout: (e: LayoutChangeEvent) => void; + onCancel?: () => void; + animationProgress?: Animated.SharedValue; + searching?: boolean; + onLayout?: (e: LayoutChangeEvent) => void; } const SearchBar: React.FC = ({ onFocus, @@ -113,8 +113,8 @@ const SearchBar: React.FC = ({ * On-search marginRight style ("cancel" button slides and fades in). */ const animatedStyles = useAnimatedStyle(() => ({ - marginRight: animationProgress.value * 58, - opacity: animationProgress.value, + marginRight: (animationProgress ? animationProgress.value : 0) * 58, + opacity: animationProgress ? animationProgress.value : 0, })); return ( @@ -136,11 +136,13 @@ const SearchBar: React.FC = ({ {...{placeholder, value, onChangeText, onFocus, onBlur}} /> - - - Cancel - - + {onCancel && ( + + + Cancel + + + )} ); }; -- cgit v1.2.3-70-g09d2 From 0b053937ac70bff6ef31425d20091800f5244d54 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 10:09:16 -0700 Subject: Use modified search bar for TagSelection --- src/screens/moments/TagSelection.tsx | 57 ++++++++++++++++++++++++++---------- 1 file changed, 42 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx index 4d1f664e..d087591b 100644 --- a/src/screens/moments/TagSelection.tsx +++ b/src/screens/moments/TagSelection.tsx @@ -1,13 +1,26 @@ -import {useNavigation} from '@react-navigation/native'; +import {useNavigation} from '@react-navigation/core'; +import {RouteProp} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {Keyboard, SafeAreaView, StyleSheet} from 'react-native'; +import { + SafeAreaView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; import {FlatList} from 'react-native-gesture-handler'; -import {TaggUserSelectionCell} from '../../components'; +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, SCREEN_HEIGHT} from '../../utils'; -import {ChatSearchBar} from '../chat'; +import { + loadTaggUserSuggestions, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; type TagSelectionRouteProps = RouteProp; interface TagSelectionProps { @@ -103,15 +116,15 @@ const TagSelection: React.FC = ({route}) => { return ( - + + { + setSearching(true); + }} + value={query} + /> + {users && ( = ({route}) => { export default TagSelection; const styles = StyleSheet.create({ - safeAreaView: {backgroundColor: 'white', height: SCREEN_HEIGHT}, + 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, + }, }); -- cgit v1.2.3-70-g09d2 From 437c4e9d10bd8c62d40140851c7d509dee77a7e2 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 10:09:34 -0700 Subject: Use modified search bar for InviteFriendsScreen --- src/screens/profile/InviteFriendsScreen.tsx | 93 +++++++++++------------------ 1 file changed, 36 insertions(+), 57 deletions(-) (limited to 'src') diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index bf91e8f3..d6effe02 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -9,14 +9,12 @@ import { StatusBar, StyleSheet, Text, - TextInput, TouchableWithoutFeedback, View, } from 'react-native'; import {checkPermission} from 'react-native-contacts'; -import Animated from 'react-native-reanimated'; -import Icon from 'react-native-vector-icons/Feather'; -import {TabsGradient} from '../../components'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {SearchBar, TabsGradient} from '../../components'; import {InviteFriendTile} from '../../components/friends'; import {MainStackParams} from '../../routes'; import {usersFromContactsService} from '../../services/UserFriendsService'; @@ -30,7 +28,6 @@ import { SCREEN_WIDTH, StatusBarHeight, } from '../../utils'; -const AnimatedIcon = Animated.createAnimatedComponent(Icon); export type InviteContactType = { firstName: string; @@ -176,32 +173,13 @@ const InviteFriendsScreen: React.FC = ({}) => { - - - { - setQuery(text.toLowerCase()); - }} - onBlur={() => { - Keyboard.dismiss(); - }} - onEndEditing={() => { - Keyboard.dismiss(); - }} - value={query} - placeholder={'Search'} - /> - + { + Keyboard.dismiss(); + }} + value={query} + /> Date: Thu, 20 May 2021 10:10:58 -0700 Subject: Better generic radio button, Use button in cell --- src/components/common/TaggRadioButton.tsx | 3 --- src/components/common/TaggUserSelectionCell.tsx | 20 ++++++++++++-------- 2 files changed, 12 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx index bd48bd5c..fc4008e5 100644 --- a/src/components/common/TaggRadioButton.tsx +++ b/src/components/common/TaggRadioButton.tsx @@ -3,12 +3,10 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'; interface TaggRadioButtonProps { pressed: boolean; - setPressed: Function; onPress: Function; } const TaggRadioButton: React.FC = ({ pressed, - setPressed, onPress, }) => { const activeOuterStyle = { @@ -22,7 +20,6 @@ const TaggRadioButton: React.FC = ({ { - setPressed(!pressed); onPress(); }}> {pressed && } diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx index 88382119..a8564ddf 100644 --- a/src/components/common/TaggUserSelectionCell.tsx +++ b/src/components/common/TaggUserSelectionCell.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; import {ProfilePreview} from '..'; import {ProfilePreviewType, ScreenType} from '../../types'; @@ -17,11 +17,20 @@ const TaggUserSelectionCell: React.FC = ({ }) => { const [pressed, setPressed] = useState(false); + useEffect(() => { + const updatePressed = () => { + const userSelected = selectedUsers.findIndex( + (selectedUser) => item.id === selectedUser.id, + ); + setPressed(userSelected !== -1); + }; + updatePressed(); + }); + const handlePress = () => { // Add to selected list pf users if (pressed === false) { setSelectedUsers([...selectedUsers, item]); - setPressed(true); } // Remove item from selected list of users else { @@ -29,7 +38,6 @@ const TaggUserSelectionCell: React.FC = ({ (user) => user.id !== item.id, ); setSelectedUsers(filteredSelection); - setPressed(false); } }; return ( @@ -41,11 +49,7 @@ const TaggUserSelectionCell: React.FC = ({ screenType={ScreenType.Profile} /> - + ); }; -- cgit v1.2.3-70-g09d2 From 161e78651737208ddfb898f9fbf5250d8debf061 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 10:11:13 -0700 Subject: Styling tag selection screen --- src/screens/moments/TagSelection.tsx | 48 +++++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx index d087591b..83b0551a 100644 --- a/src/screens/moments/TagSelection.tsx +++ b/src/screens/moments/TagSelection.tsx @@ -58,6 +58,9 @@ const TagSelection: React.FC = ({route}) => { }); }); + /* + * + */ const loadUsers = async () => { const data: ProfilePreviewType[] = await loadTaggUserSuggestions(); const filteredData: ProfilePreviewType[] = data.filter((user) => { @@ -67,6 +70,9 @@ const TagSelection: React.FC = ({route}) => { setUsers([...filteredData, ...selectedUsers]); }; + /* + * + */ const getQuerySuggested = async () => { if (query.length > 0) { const searchResults = await loadSearchResults( @@ -78,25 +84,19 @@ const TagSelection: React.FC = ({route}) => { } }; + /* + * + */ useEffect(() => { loadUsers(); }, []); - const [searching, setSearching] = useState(false); - const [query, setQuery] = useState(''); - const handleFocus = () => { - setSearching(true); - }; - const handleBlur = () => { - Keyboard.dismiss(); - }; - const handleCancel = () => { - setQuery(''); - navigation.goBack(); - }; - + /* + * + */ useEffect(() => { if (query.length === 0) { + setLabel('Recent'); loadUsers(); } @@ -107,13 +107,10 @@ const TagSelection: React.FC = ({route}) => { if (query.length < 3) { return; } + setLabel(''); getQuerySuggested(); }, [query]); - useEffect(() => { - console.log('selectedUsers: ', selectedUsers); - }, [selectedUsers, users]); - return ( @@ -125,6 +122,7 @@ const TagSelection: React.FC = ({route}) => { value={query} /> + {label} {users && ( = ({route}) => { 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', @@ -160,4 +166,12 @@ const styles = StyleSheet.create({ marginBottom: '3%', marginHorizontal: 10, }, + title: { + fontWeight: '700', + fontSize: normalize(17), + lineHeight: normalize(20.29), + marginHorizontal: '7%', + marginTop: '4%', + marginBottom: '2%', + }, }); -- 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') 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 3318d424aeca35aba5256e020544db50b6746334 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 14:14:49 -0700 Subject: Fix pass selected user --- src/screens/moments/TagSelectionScreen.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index 6920c75c..ae11aa08 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -49,8 +49,10 @@ const TagSelectionScreen: React.FC = ({route}) => { { if (selectedUsers.length > 0) { - navigation.setParams({selectedUsers: selectedUsers}); - navigation.navigate('CaptionScreen'); + navigation.navigate('CaptionScreen', { + ...route.params, + selectedUsers: selectedUsers, + }); } else { navigation.goBack(); } -- cgit v1.2.3-70-g09d2 From ab0336395d39ab5300e84fbccd9c347b04a08ecf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 15:18:27 -0700 Subject: Fix maximum depth bug --- src/screens/profile/CaptionScreen.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 4fa81f8c..cd722090 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -8,10 +8,10 @@ import { KeyboardAvoidingView, Platform, StyleSheet, + Text, + TouchableOpacity, TouchableWithoutFeedback, View, - TouchableOpacity, - Text, } from 'react-native'; import {MentionInput} from 'react-native-controlled-mentions'; import {Button} from 'react-native-elements'; @@ -29,7 +29,7 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; /** @@ -57,7 +57,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { useEffect(() => { setTaggedUsers(selectedUsers ? selectedUsers : []); - }, selectedUsers); + }, [route.params]); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -181,6 +181,10 @@ const styles = StyleSheet.create({ flex: { flex: 1, }, + tagFriendsTitle: { + color: 'white', + fontSize: 18, + }, }); export default CaptionScreen; -- cgit v1.2.3-70-g09d2 From 342e3dcb835dc1cb3e757187c9578334d5865ed6 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 15:24:32 -0700 Subject: Add comments for tag selection screen --- src/screens/moments/TagSelectionScreen.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index ae11aa08..d68447f8 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -9,10 +9,10 @@ import { 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 {MainStackParams} from '../../routes'; import {loadSearchResults} from '../../services'; import {ProfilePreviewType} from '../../types'; import { @@ -41,7 +41,7 @@ const TagSelectionScreen: React.FC = ({route}) => { const [label, setLabel] = useState('Recent'); /* - * + * Add back button, Send selected users to CaptionScreen */ useEffect(() => { navigation.setOptions({ @@ -69,7 +69,8 @@ const TagSelectionScreen: React.FC = ({route}) => { }); /* - * + * Load the initial list users from search/suggested endpoint + * that the loggedInUser might want to select */ const loadUsers = async () => { const data: ProfilePreviewType[] = await loadTaggUserSuggestions(); @@ -81,7 +82,7 @@ const TagSelectionScreen: React.FC = ({route}) => { }; /* - * + * Load list of users based on search query */ const getQuerySuggested = async () => { if (query.length > 0) { @@ -95,14 +96,7 @@ const TagSelectionScreen: React.FC = ({route}) => { }; /* - * - */ - useEffect(() => { - loadUsers(); - }, []); - - /* - * + * Make calls to appropriate functions to load user lists for selection */ useEffect(() => { if (query.length === 0) { -- cgit v1.2.3-70-g09d2 From 4ef2ccb03db2b454a9d13e6a7d885bce3a2f96c5 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 15:31:51 -0700 Subject: Add comments for Tag user selection cell --- src/components/common/TaggUserSelectionCell.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx index a8564ddf..01d965cf 100644 --- a/src/components/common/TaggUserSelectionCell.tsx +++ b/src/components/common/TaggUserSelectionCell.tsx @@ -17,6 +17,9 @@ const TaggUserSelectionCell: React.FC = ({ }) => { const [pressed, setPressed] = useState(false); + /* + * To update state of radio button on initial render and subsequent re-renders + */ useEffect(() => { const updatePressed = () => { const userSelected = selectedUsers.findIndex( @@ -27,8 +30,12 @@ const TaggUserSelectionCell: React.FC = ({ updatePressed(); }); + /* + * Handles on press on radio button + * Adds/removes user from selected list of users + */ const handlePress = () => { - // Add to selected list pf users + // Add to selected list of users if (pressed === false) { setSelectedUsers([...selectedUsers, item]); } -- cgit v1.2.3-70-g09d2 From 1f70bdd3d3b7edfddd6d2bad9cd27e22101d13d4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 16:02:33 -0700 Subject: Add image style to avatar- bugfix --- src/components/common/Avatar.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 86ebedf3..4d9aec41 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -16,6 +16,7 @@ const Avatar: FC = ({ return ( {loading && ( -- cgit v1.2.3-70-g09d2 From b1d71d48d5d6a6c4a8cebdfc6aa21135691c39da Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 20 May 2021 18:10:09 -0700 Subject: Add tagged users preview component --- src/components/profile/ProfilePreview.tsx | 44 ++++++++++++++++++++++++++--- src/screens/profile/CaptionScreen.tsx | 46 +++++++++++++++++++++---------- src/types/types.ts | 3 +- 3 files changed, 73 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 66d68d8f..af49c6a2 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -148,6 +148,14 @@ const ProfilePreview: React.FC = ({ usernameStyle = styles.discoverUsersUsername; nameStyle = styles.discoverUsersName; break; + case 'Tag Selection': + containerStyle = styles.tagSelectionContainer; + avatarStyle = styles.tagSelectionAvatar; + nameContainerStyle = styles.tagSelectionNameContainer; + usernameToDisplay = '@' + username; + usernameStyle = styles.tagSelectionUsername; + nameStyle = styles.tagSelectionName; + break; case 'Comment': containerStyle = styles.commentContainer; avatarStyle = styles.commentAvatar; @@ -195,10 +203,9 @@ const ProfilePreview: React.FC = ({ {first_name.concat(' ', last_name)} )} - {previewType === 'Comment' && ( - {usernameToDisplay} - )} - {previewType === 'Discover Users' && ( + {(previewType === 'Discover Users' || + previewType === 'Tag Selection' || + previewType === 'Comment') && ( <> {usernameToDisplay} @@ -368,6 +375,35 @@ const styles = StyleSheet.create({ marginRight: 15, borderRadius: 50, }, + tagSelectionContainer: { + width: 60, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'flex-start', + margin: '1%', + }, + tagSelectionAvatar: { + width: 34, + height: 34, + borderRadius: 20, + }, + tagSelectionNameContainer: { + width: '100%', + paddingVertical: '5%', + }, + tagSelectionUsername: { + fontWeight: '500', + fontSize: normalize(9), + lineHeight: normalize(10), + letterSpacing: normalize(0.2), + color: 'white', + textAlign: 'center', + }, + tagSelectionName: { + fontWeight: '500', + fontSize: 8, + color: 'white', + }, }); export default ProfilePreview; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index cd722090..146ad86c 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -14,10 +14,9 @@ import { View, } from 'react-native'; import {MentionInput} from 'react-native-controlled-mentions'; -import {Button} from 'react-native-elements'; +import {Button, normalize} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; -import {ProfilePreviewType} from 'src/types'; -import {SearchBackground} from '../../components'; +import {ProfilePreview, SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; @@ -29,6 +28,7 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; +import {ProfilePreviewType, ScreenType} from '../../types'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; @@ -126,17 +126,29 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - {/* TODO: Add tag friends component */} - - navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, - }) - }> - Tag Friends - - {/* TODO: Display tagged friends component */} + + + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }) + }> + Tag Friends + + + {taggedUsers.map((user) => ( + + {/* TODO: Add Icon for Tag Friends */} + + + ))} + + @@ -183,8 +195,12 @@ const styles = StyleSheet.create({ }, tagFriendsTitle: { color: 'white', - fontSize: 18, + fontSize: normalize(12), + lineHeight: normalize(16.71), + letterSpacing: normalize(0.3), + fontWeight: '600', }, + tagFriendsContainer: {flexDirection: 'row', marginTop: '3%'}, }); export default CaptionScreen; diff --git a/src/types/types.ts b/src/types/types.ts index e9975529..7bf5597f 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -142,7 +142,8 @@ export type PreviewType = | 'Discover Users' | 'Friend' | 'Suggested People Drawer' - | 'Suggested People Screen'; + | 'Suggested People Screen' + | 'Tag Selection'; export enum ScreenType { Profile, -- cgit v1.2.3-70-g09d2 From 89625b0b04c6bb09bee571cf4df29ebe58cdaee9 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 11:33:08 -0700 Subject: Add return type for load tagg users function --- src/utils/search.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/utils/search.ts b/src/utils/search.ts index b3abce9c..789acbc3 100644 --- a/src/utils/search.ts +++ b/src/utils/search.ts @@ -143,7 +143,9 @@ export const getRecentlySearchedCategories = async (): Promise< /* * Retrieves and returns a list of suggested tagg users */ -export const loadTaggUserSuggestions = async () => { +export const loadTaggUserSuggestions = async (): Promise< + ProfilePreviewType[] +> => { const searchResults = await loadSearchResults(`${SEARCH_ENDPOINT_SUGGESTED}`); return searchResults?.users; }; -- cgit v1.2.3-70-g09d2 From d28255ac358c5d49dc3b1b1d99c967b4063b6abd Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 13:56:21 -0700 Subject: Revert a change on Avatar --- src/components/common/Avatar.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 29197d6e..fa80f121 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -16,7 +16,6 @@ const Avatar: FC = ({ return loading ? ( {loading && ( -- cgit v1.2.3-70-g09d2 From 5b57d5c82a0d8b30a58fd66acd79f083e3019cfc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 14:07:19 -0700 Subject: Add colors through types --- src/components/common/TaggRadioButton.tsx | 5 +++-- src/constants/constants.ts | 1 + src/screens/chat/ChatScreen.tsx | 3 ++- src/screens/onboarding/BasicInfoOnboarding.tsx | 8 ++++---- 4 files changed, 10 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx index fc4008e5..25d00ec9 100644 --- a/src/components/common/TaggRadioButton.tsx +++ b/src/components/common/TaggRadioButton.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {StyleSheet, TouchableOpacity, View} from 'react-native'; +import {RADIO_BUTTON_GREY, TAGG_LIGHT_BLUE_2} from '../../constants/constants'; interface TaggRadioButtonProps { pressed: boolean; @@ -10,11 +11,11 @@ const TaggRadioButton: React.FC = ({ onPress, }) => { const activeOuterStyle = { - borderColor: pressed ? '#6EE7E7' : '#BEBEBE', + borderColor: pressed ? TAGG_LIGHT_BLUE_2 : RADIO_BUTTON_GREY, }; const activeInnerStyle = { - backgroundColor: pressed ? '#6EE7E7' : 'white', + backgroundColor: pressed ? TAGG_LIGHT_BLUE_2 : 'white', }; return ( = ({navigation}) => { const insets = useSafeAreaInsets(); const chatTheme: DeepPartial = { colors: { - accent_blue: '#6EE7E7', + accent_blue: TAGG_LIGHT_BLUE_2, }, messageList: { container: { diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx index 3058a04e..e5e6f59b 100644 --- a/src/screens/onboarding/BasicInfoOnboarding.tsx +++ b/src/screens/onboarding/BasicInfoOnboarding.tsx @@ -27,6 +27,7 @@ import { nameRegex, passwordRegex, phoneRegex, + TAGG_LIGHT_BLUE_2, usernameRegex, } from '../../constants'; import { @@ -70,9 +71,8 @@ const BasicInfoOnboarding: React.FC = ({route}) => { const [invalidWithError, setInvalidWithError] = useState( 'Please enter a valid ', ); - const [autoCapitalize, setAutoCap] = useState< - 'none' | 'sentences' | 'words' | 'characters' | undefined - >('none'); + const [autoCapitalize, setAutoCap] = + useState<'none' | 'sentences' | 'words' | 'characters' | undefined>('none'); const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); @@ -565,7 +565,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, arrow: { - color: '#6EE7E7', + color: TAGG_LIGHT_BLUE_2, }, showPassContainer: { marginVertical: '1%', -- cgit v1.2.3-70-g09d2 From 04b71b8813db48a2ee5f57e617d26fcd5c465621 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 14:09:33 -0700 Subject: Move export to last line --- src/components/common/TaggRadioButton.tsx | 3 ++- src/components/common/TaggUserSelectionCell.tsx | 4 ++-- src/screens/moments/TagSelectionScreen.tsx | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx index 25d00ec9..495eddae 100644 --- a/src/components/common/TaggRadioButton.tsx +++ b/src/components/common/TaggRadioButton.tsx @@ -28,7 +28,6 @@ const TaggRadioButton: React.FC = ({ ); }; -export default TaggRadioButton; const styles = StyleSheet.create({ outer: { width: 20, @@ -47,3 +46,5 @@ const styles = StyleSheet.create({ borderRadius: 8, }, }); + +export default TaggRadioButton; diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx index 01d965cf..2ea1e4ce 100644 --- a/src/components/common/TaggUserSelectionCell.tsx +++ b/src/components/common/TaggUserSelectionCell.tsx @@ -61,8 +61,6 @@ const TaggUserSelectionCell: React.FC = ({ ); }; -export default TaggUserSelectionCell; - const styles = StyleSheet.create({ container: { marginHorizontal: '3%', @@ -71,3 +69,5 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, }); + +export default TaggUserSelectionCell; diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index d68447f8..7770731c 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -144,8 +144,6 @@ const TagSelectionScreen: React.FC = ({route}) => { ); }; -export default TagSelectionScreen; - const styles = StyleSheet.create({ safeAreaView: { backgroundColor: 'white', @@ -179,3 +177,5 @@ const styles = StyleSheet.create({ marginBottom: '2%', }, }); + +export default TagSelectionScreen; -- cgit v1.2.3-70-g09d2 From 7a2bc3b67f521e4d4a0b479e72c65bba0a908647 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 14:50:38 -0700 Subject: Change onPress as argument --- src/components/common/TaggRadioButton.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx index 495eddae..3cc2780c 100644 --- a/src/components/common/TaggRadioButton.tsx +++ b/src/components/common/TaggRadioButton.tsx @@ -1,10 +1,15 @@ import React from 'react'; -import {StyleSheet, TouchableOpacity, View} from 'react-native'; +import { + GestureResponderEvent, + StyleSheet, + TouchableOpacity, + View, +} from 'react-native'; import {RADIO_BUTTON_GREY, TAGG_LIGHT_BLUE_2} from '../../constants/constants'; interface TaggRadioButtonProps { pressed: boolean; - onPress: Function; + onPress: (event: GestureResponderEvent) => void; } const TaggRadioButton: React.FC = ({ pressed, @@ -20,9 +25,7 @@ const TaggRadioButton: React.FC = ({ return ( { - onPress(); - }}> + onPress={onPress}> {pressed && } ); -- cgit v1.2.3-70-g09d2 From d8d5321985f4eef6fd5750e35dc10e57d4dce5b5 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 16:11:27 -0700 Subject: Add new assets for tag components --- src/assets/icons/tagging/tag-icon.png | Bin 0 -> 85713 bytes src/assets/icons/tagging/white-plus-icon.png | Bin 0 -> 18393 bytes src/assets/icons/tagging/x-icon.png | Bin 0 -> 20875 bytes 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/icons/tagging/tag-icon.png create mode 100644 src/assets/icons/tagging/white-plus-icon.png create mode 100644 src/assets/icons/tagging/x-icon.png (limited to 'src') diff --git a/src/assets/icons/tagging/tag-icon.png b/src/assets/icons/tagging/tag-icon.png new file mode 100644 index 00000000..5dfa9099 Binary files /dev/null and b/src/assets/icons/tagging/tag-icon.png differ diff --git a/src/assets/icons/tagging/white-plus-icon.png b/src/assets/icons/tagging/white-plus-icon.png new file mode 100644 index 00000000..258166a7 Binary files /dev/null and b/src/assets/icons/tagging/white-plus-icon.png differ diff --git a/src/assets/icons/tagging/x-icon.png b/src/assets/icons/tagging/x-icon.png new file mode 100644 index 00000000..5f2b244c Binary files /dev/null and b/src/assets/icons/tagging/x-icon.png differ -- cgit v1.2.3-70-g09d2 From b86d07cc9b93fd4c6e1780ba9eea482c99af840c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 16:12:17 -0700 Subject: Fix spacing for tagged user tile --- src/components/profile/ProfilePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index af49c6a2..88c075e2 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -389,7 +389,7 @@ const styles = StyleSheet.create({ }, tagSelectionNameContainer: { width: '100%', - paddingVertical: '5%', + marginVertical: '10%', }, tagSelectionUsername: { fontWeight: '500', -- 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') 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 ? : } + + + + +