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/components') 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 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/components') 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 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/components') 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 9cd597d1f1eb232540337d5f1e241ba00e6610fa Mon Sep 17 00:00:00 2001 From: Shravya Ramesh 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/components') 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 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/components') 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/components') 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/components') 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 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/components') 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/components') 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/components') 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/components') 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 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/components') 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 b4a4639f2ed05c02b9061d9febddf8339bc1fe26 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 21 May 2021 17:25:01 -0700 Subject: Refactor footer component, Add key --- src/components/moments/TagFriendsFoooter.tsx | 132 +++++++++++++++++++++++++++ src/components/moments/index.ts | 1 + src/screens/moments/TagFriendsScreen.tsx | 103 ++------------------- src/screens/moments/TagSelectionScreen.tsx | 1 + 4 files changed, 144 insertions(+), 93 deletions(-) create mode 100644 src/components/moments/TagFriendsFoooter.tsx (limited to 'src/components') diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx new file mode 100644 index 00000000..6b8fc62a --- /dev/null +++ b/src/components/moments/TagFriendsFoooter.tsx @@ -0,0 +1,132 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {Dispatch, SetStateAction} from 'react'; +import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import {ProfilePreview} from '..'; +import {ProfilePreviewType, ScreenType} from '../../types'; +import {normalize} from '../../utils/layouts'; + +interface TagFriendsFooterProps { + taggedUsers: ProfilePreviewType[]; + setTaggedUsers: Dispatch>; +} +const TagFriendsFooter: React.FC = ({ + taggedUsers, + setTaggedUsers, +}) => { + const navigation = useNavigation(); + + const handleRemoveTag = (user: ProfilePreviewType) => { + const filteredSelection = taggedUsers.filter((item) => user.id !== item.id); + setTaggedUsers(filteredSelection); + }; + + const TaggMoreButton = () => ( + + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }) + } + style={{ + flexDirection: 'column', + alignItems: 'center', + }}> + + {'Tagg More'} + + ); + + const TaggedUser = (user: ProfilePreviewType) => ( + + handleRemoveTag(user)}> + + + + + ); + + /* + * Title/Button depending on the number of users inside taggedUsers list + * If taggUsers is empty, title acts as a button + * Else, gets disabled and TaggMore button appears + */ + const TagFriendsTitle = () => ( + + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }) + }> + + Tag Friends + + ); + + return ( + <> + + + {taggedUsers.map((user) => ( + + ))} + {taggedUsers.length !== 0 && } + + + ); +}; + +const styles = StyleSheet.create({ + tagIcon: {width: 20, height: 20, marginRight: '3%'}, + tagFriendsTitle: { + color: 'white', + fontSize: normalize(12), + lineHeight: normalize(16.71), + letterSpacing: normalize(0.3), + fontWeight: '600', + }, + tagFriendsContainer: { + flexDirection: 'row', + marginTop: '3%', + flexWrap: 'wrap', + justifyContent: 'flex-start', + }, + taggMoreLabel: { + fontWeight: '500', + fontSize: normalize(9), + lineHeight: normalize(10), + letterSpacing: normalize(0.2), + color: 'white', + textAlign: 'center', + marginVertical: '5%', + }, + closeIconContainer: { + width: 20, + height: 20, + right: -20, + zIndex: 1, + }, +}); + +export default TagFriendsFooter; diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index 89fd689c..6af29bc5 100644 --- a/src/components/moments/index.ts +++ b/src/components/moments/index.ts @@ -3,3 +3,4 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader'; export {default as MomentPostHeader} from './MomentPostHeader'; export {default as MomentPostContent} from './MomentPostContent'; export {default as Moment} from './Moment'; +export {default as TagFriendsFooter} from './TagFriendsFoooter'; diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index e810b510..941fea3e 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -7,8 +7,6 @@ import { KeyboardAvoidingView, Platform, StyleSheet, - Text, - TouchableOpacity, TouchableWithoutFeedback, View, } from 'react-native'; @@ -16,13 +14,13 @@ import {Button} from 'react-native-elements'; import {MainStackParams} from 'src/routes'; import { CaptionScreenHeader, - ProfilePreview, SearchBackground, TaggLoadingIndicator, } from '../../components'; +import {TagFriendsFooter} from '../../components/moments'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; -import {ProfilePreviewType, ScreenType} from '../../types'; -import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {ProfilePreviewType} from '../../types'; +import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; type TagFriendsScreenRouteProps = RouteProp< MainStackParams, @@ -37,6 +35,9 @@ const TagFriendsScreen: React.FC = ({route}) => { const [loading, setLoading] = useState(false); const [taggedUsers, setTaggedUsers] = useState([]); + /* + * Update list of tagged users from route params + */ useEffect(() => { setTaggedUsers(selectedUsers ? selectedUsers : []); }, [route.params]); @@ -82,72 +83,10 @@ const TagFriendsScreen: React.FC = ({route}) => { resizeMode={'cover'} /> - - navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, - }) - }> - - Tag Friends - - - {taggedUsers.map((user) => ( - - { - const filteredSelection = taggedUsers.filter( - (item) => user.id !== item.id, - ); - setTaggedUsers(filteredSelection); - }}> - - - - - ))} - {taggedUsers.length !== 0 && ( - - navigation.navigate('TagSelectionScreen', { - selectedUsers: taggedUsers, - }) - } - style={{ - flexDirection: 'column', - alignItems: 'center', - }}> - - {'Tagg More'} - - )} - + @@ -194,28 +133,6 @@ const styles = StyleSheet.create({ flex: { flex: 1, }, - tagFriendsTitle: { - color: 'white', - fontSize: normalize(12), - lineHeight: normalize(16.71), - letterSpacing: normalize(0.3), - fontWeight: '600', - }, - tagFriendsContainer: { - flexDirection: 'row', - marginTop: '3%', - flexWrap: 'wrap', - justifyContent: 'flex-start', - }, - taggMoreLabel: { - fontWeight: '500', - fontSize: normalize(9), - lineHeight: normalize(10), - letterSpacing: normalize(0.2), - color: 'white', - textAlign: 'center', - marginVertical: '5%', - }, }); export default TagFriendsScreen; diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx index c49dd17d..8d679b87 100644 --- a/src/screens/moments/TagSelectionScreen.tsx +++ b/src/screens/moments/TagSelectionScreen.tsx @@ -129,6 +129,7 @@ const TagSelectionScreen: React.FC = ({route}) => { keyExtractor={(item) => item.id} renderItem={(item) => ( Date: Fri, 21 May 2021 20:53:37 -0400 Subject: Fix draggables --- src/components/common/MomentTags.tsx | 1 - src/screens/moments/TagFriendsScreen.tsx | 34 ++++++++++++++++++-------------- 2 files changed, 19 insertions(+), 16 deletions(-) (limited to 'src/components') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index fb9ef5be..04b0558b 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -30,7 +30,6 @@ const MomentTags: React.FC = ({ if (!tags) { return null; } - return editing && deleteFromList ? ( <> {tags.map((tag) => ( diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 9c78a63e..e6a9f5fb 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -39,8 +39,10 @@ const TagFriendsScreen: React.FC = ({route}) => { * Update list of tagged users from route params */ useEffect(() => { - setTaggedUsers(selectedUsers ? selectedUsers : []); - }, [route.params]); + if (selectedUsers !== undefined) { + setTaggedUsers(selectedUsers); + } + }, [selectedUsers]); /* * Navigate back to Tag Users Screen, send selected users @@ -82,19 +84,21 @@ const TagFriendsScreen: React.FC = ({route}) => { source={{uri: image.path}} resizeMode={'cover'} /> - ({ - id: '', - x: 0, - y: 0, - user, - }))} - imageRef={imageRef} - deleteFromList={(user) => - setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id)) - } - /> + {taggedUsers.length !== 0 && ( + ({ + id: '', + x: 0, + y: 0, + user, + }))} + imageRef={imageRef} + deleteFromList={(user) => + setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id)) + } + /> + )}