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/common') 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/common') 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 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/common') 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/common') 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/common') 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 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/common') 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/common') 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/common') 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/common') 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 29cfccc7010aee6a5c5f47db4881810fa2b75b9f Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/common') 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)) + } + /> + )}