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/screens/profile/CaptionScreen.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'src/screens/profile') 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 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/screens/profile') 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 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/screens/profile') 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 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/screens/profile') 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 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/screens/profile') 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 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/screens/profile') 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 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/screens/profile') 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 45bed4c2d0c74407a13476f1db08b387fe7078dc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 16:16:57 -0700 Subject: Replace tag component on current caption screen --- src/screens/profile/CaptionScreen.tsx | 70 +++++++++++++++++++++++++---------- 1 file changed, 50 insertions(+), 20 deletions(-) (limited to 'src/screens/profile') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 146ad86c..f41487c9 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, useEffect, useState} from 'react'; +import React, {Fragment, useCallback, useEffect, useState} from 'react'; import { Alert, Image, @@ -16,7 +16,7 @@ import { import {MentionInput} from 'react-native-controlled-mentions'; import {Button, normalize} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; -import {ProfilePreview, SearchBackground} from '../../components'; +import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; @@ -28,9 +28,10 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ProfilePreviewType, ScreenType} from '../../types'; +import {ProfilePreviewType} from '../../types'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; +import FrontArrow from '../../assets/icons/front-arrow.svg'; /** * Upload Screen to allow users to upload posts to Tagg @@ -54,11 +55,26 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); const [taggedUsers, setTaggedUsers] = useState([]); - + const [taggedList, setTaggedList] = useState(''); useEffect(() => { setTaggedUsers(selectedUsers ? selectedUsers : []); }, [route.params]); + useEffect(() => { + const getTaggedUsersListString = () => { + let listString = ''; + for (let i = 0; i < taggedUsers.length; i++) { + if (listString.length < 21) { + listString = listString.concat(`@${taggedUsers[i].username} `); + } else { + break; + } + } + setTaggedList(listString); + }; + getTaggedUsersListString(); + }, [taggedUsers]); + const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required navigation.navigate('Profile', { @@ -126,28 +142,42 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - + + + Tag Friends + + {taggedList} + {taggedList.length > 21 ? '. . .' : ''} + - navigation.navigate('TagSelectionScreen', { + navigation.navigate('TagFriendsScreen', { + image: image, + screenType: screenType, selectedUsers: taggedUsers, }) }> - Tag Friends + - - {taggedUsers.map((user) => ( - - {/* TODO: Add Icon for Tag Friends */} - - - ))} - -- cgit v1.2.3-70-g09d2 From 866b2220ab3d2be7b742b672c956ad28f7685190 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 16:33:37 -0700 Subject: Organize imports --- src/screens/profile/CaptionScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/screens/profile') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index f41487c9..dbfb3a4a 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, useCallback, useEffect, 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, normalize} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; +import FrontArrow from '../../assets/icons/front-arrow.svg'; import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; @@ -31,7 +32,6 @@ import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType} from '../../types'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import FrontArrow from '../../assets/icons/front-arrow.svg'; /** * Upload Screen to allow users to upload posts to Tagg -- cgit v1.2.3-70-g09d2 From 923e1084e18ce5636cf4448096907bc95f1018ff Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 21:23:55 -0400 Subject: Add api calls --- src/constants/api.ts | 1 + src/screens/profile/CaptionScreen.tsx | 58 +++++++++++++++++++++++++---------- src/services/MomentService.ts | 47 ++++++++++++++++++++++------ 3 files changed, 80 insertions(+), 26 deletions(-) (limited to 'src/screens/profile') diff --git a/src/constants/api.ts b/src/constants/api.ts index d52fc203..f02ee407 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -32,6 +32,7 @@ export const SEARCH_ENDPOINT_MESSAGES: string = API_URL + 'search/messages/'; export const SEARCH_ENDPOINT_SUGGESTED: string = API_URL + 'search/suggested/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; export const MOMENT_TAGS_ENDPOINT: string = API_URL + 'moments/tags/'; +export const MOMENTTAG_ENDPOINT: string = API_URL + 'moment-tag/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; export const COMMENTS_ENDPOINT: string = API_URL + 'comments/'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 2093a1f9..2fe30645 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -23,7 +23,7 @@ import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; import {MainStackParams} from '../../routes'; -import {postMoment} from '../../services'; +import {postMoment, postMomentTags} from '../../services'; import { loadUserMoments, updateProfileCompletionStage, @@ -85,27 +85,51 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }; const handleShare = async () => { + const handleFailed = () => { + setLoading(false); + setTimeout(() => { + Alert.alert(ERROR_UPLOAD); + }, 500); + }; + const handleSuccess = () => { + setLoading(false); + navigateToProfile(); + setTimeout(() => { + Alert.alert(SUCCESS_PIC_UPLOAD); + }, 500); + }; setLoading(true); if (!image.filename) { return; } - postMoment(image.filename, image.path, caption, title, userId).then( - (data) => { - setLoading(false); - if (data) { - dispatch(loadUserMoments(userId)); - dispatch(updateProfileCompletionStage(data)); - navigateToProfile(); - setTimeout(() => { - Alert.alert(SUCCESS_PIC_UPLOAD); - }, 500); - } else { - setTimeout(() => { - Alert.alert(ERROR_UPLOAD); - }, 500); - } - }, + const momentResponse = await postMoment( + image.filename, + image.path, + caption, + title, + userId, + ); + if (!momentResponse) { + handleFailed(); + return; + } + const momentTagResponse = await postMomentTags( + momentResponse.moment_id, + taggedUsers.map((u, index) => ({ + x: index * 50 - 150, + y: index * 50 - 150, + user_id: u.id, + })), + ); + if (!momentTagResponse) { + handleFailed(); + return; + } + dispatch(loadUserMoments(userId)); + dispatch( + updateProfileCompletionStage(momentResponse.profile_completion_stage), ); + handleSuccess(); }; return ( diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index a26a1abb..46b55066 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -2,24 +2,19 @@ import AsyncStorage from '@react-native-community/async-storage'; import RNFetchBlob from 'rn-fetch-blob'; import { MOMENTS_ENDPOINT, + MOMENTTAG_ENDPOINT, MOMENT_TAGS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT, } from '../constants'; import {MomentTagType, MomentType} from '../types'; import {checkImageUploadStatus} from '../utils'; -export const postMoment: ( +export const postMoment = async ( fileName: string, uri: string, caption: string, category: string, userId: string, -) => Promise = async ( - fileName, - uri, - caption, - category, - userId, ) => { try { const request = new FormData(); @@ -45,9 +40,13 @@ export const postMoment: ( body: request, }); let statusCode = response.status; - let data = await response.json(); + let data: { + moments: any; + moment_id: string; + profile_completion_stage: number; + } = await response.json(); if (statusCode === 200 && checkImageUploadStatus(data.moments)) { - return data.profile_completion_stage; + return data; } } catch (err) { console.log(err); @@ -142,3 +141,33 @@ export const loadMomentTags = async (moment_id: string) => { return []; } }; + +export const postMomentTags = async ( + moment_id: string, + tags: { + x: number; + y: number; + user_id: string; + }[], +) => { + try { + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + form.append('moment_id', moment_id); + form.append('tags', JSON.stringify(tags)); + const response = await fetch( + MOMENTTAG_ENDPOINT + `?moment_id=${moment_id}`, + { + method: 'POST', + headers: { + Authorization: 'Token ' + token, + }, + body: form, + }, + ); + return response.status === 201 || response.status === 200; + } catch (error) { + console.error(error); + return false; + } +}; -- cgit v1.2.3-70-g09d2 From 1f227b51cfbff4f132844f8fa703e9ea5ebd5780 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 21:33:48 -0400 Subject: Clean up styles --- src/screens/moments/TagSelectionScreen.tsx | 34 +++++++++++------------------- src/screens/profile/CaptionScreen.tsx | 27 ++++++++++++------------ 2 files changed, 26 insertions(+), 35 deletions(-) (limited to 'src/screens/profile') diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index 8d679b87..a698a07b 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -1,13 +1,8 @@ +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; 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 {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import {FlatList} from 'react-native-gesture-handler'; import BackIcon from '../../assets/icons/back-arrow.svg'; import {SearchBar, TaggUserSelectionCell} from '../../components'; @@ -16,10 +11,12 @@ import {MainStackParams} from '../../routes'; import {loadSearchResults} from '../../services'; import {ProfilePreviewType} from '../../types'; import { + isIPhoneX, loadTaggUserSuggestions, normalize, SCREEN_HEIGHT, SCREEN_WIDTH, + StatusBarHeight, } from '../../utils'; type TagSelectionScreenRouteProps = RouteProp< @@ -39,6 +36,7 @@ const TagSelectionScreen: React.FC = ({route}) => { const [searching, setSearching] = useState(false); const [query, setQuery] = useState(''); const [label, setLabel] = useState('Recent'); + const paddingBottom = useBottomTabBarHeight(); /* * Add back button, Send selected users to CaptionScreen @@ -112,7 +110,7 @@ const TagSelectionScreen: React.FC = ({route}) => { }, [query]); return ( - + = ({route}) => { value={query} /> - {label} + {label !== '' && {label}} {users && ( item.id} renderItem={(item) => ( = ({route}) => { )} /> )} - + ); }; const styles = StyleSheet.create({ - safeAreaView: { + container: { + paddingTop: StatusBarHeight, backgroundColor: 'white', height: SCREEN_HEIGHT, }, @@ -153,24 +153,14 @@ const styles = StyleSheet.create({ 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', + marginTop: isIPhoneX() ? 15 : 12, 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/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 2fe30645..188ccc1f 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -168,7 +168,14 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - + navigation.navigate('TagFriendsScreen', { + image: image, + screenType: screenType, + selectedUsers: taggedUsers, + }) + } style={{ marginHorizontal: '5%', marginTop: '3%', @@ -194,17 +201,8 @@ const CaptionScreen: React.FC = ({route, navigation}) => { {taggedList} {taggedList.length > 21 ? '. . .' : ''} - - navigation.navigate('TagFriendsScreen', { - image: image, - screenType: screenType, - selectedUsers: taggedUsers, - }) - }> - - - + + @@ -256,7 +254,10 @@ const styles = StyleSheet.create({ letterSpacing: normalize(0.3), fontWeight: '600', }, - tagFriendsContainer: {flexDirection: 'row', marginTop: '3%'}, + tagFriendsContainer: { + flexDirection: 'row', + marginTop: '3%', + }, }); export default CaptionScreen; -- cgit v1.2.3-70-g09d2