From 59e26e30a18bca1d40400c3a98f133fcfbd13a28 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Jul 2021 18:47:27 -0400 Subject: Add initial styling for caption screen --- src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/profile/CaptionScreen.tsx | 126 +++++++++++++++++---------------- 2 files changed, 66 insertions(+), 62 deletions(-) (limited to 'src') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index bc023da8..d21a1fe4 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -36,7 +36,7 @@ export type MainStackParams = { screenType: ScreenType; }; CaptionScreen: { - title?: string; + title?: string; // TODO: remove this? media?: {uri: string; isVideo: boolean}; screenType: ScreenType; selectedTags?: MomentTagType[]; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 7fef73db..2c5356c0 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, {FC, useEffect, useState} from 'react'; import { Alert, Image, @@ -13,12 +13,11 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {MentionInputControlled} from '../../components'; import {Button, normalize} from 'react-native-elements'; import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {SearchBackground} from '../../components'; +import {MentionInputControlled, SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; @@ -40,7 +39,7 @@ import { } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {MomentTagType} from '../../types'; -import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; /** @@ -204,9 +203,34 @@ const CaptionScreen: React.FC = ({route, navigation}) => { } }; + const SelectableItem: FC = () => ( + + navigation.navigate('TagFriendsScreen', { + media: { + uri: mediaUri, + isVideo: isMediaAVideo, + }, + selectedTags: tags, + }) + } + style={styles.tagFriendsContainer}> + + Tag Friends + + {taggedList} + {taggedList.length > 21 ? '. . .' : ''} + + + + ); + return ( - {loading ? : } + {loading && } = ({route, navigation}) => { onPress={moment ? handleDoneEditing : handleShare} /> - - {isMediaAVideo ? ( - @@ -297,21 +299,23 @@ const styles = StyleSheet.create({ color: TAGG_LIGHT_BLUE_2, }, header: { - marginVertical: 20, + marginTop: 20, + marginBottom: 30, + }, + captionContainer: { + backgroundColor: 'white', + flexDirection: 'row', + padding: normalize(15), }, media: { - position: 'relative', - width: SCREEN_WIDTH, - aspectRatio: 1, - marginBottom: '3%', + height: normalize(150), + aspectRatio: 9 / 16, }, text: { - position: 'relative', backgroundColor: 'white', - width: '100%', - paddingHorizontal: '2%', - paddingVertical: '1%', - height: 60, + flex: 1, + height: normalize(150), + marginLeft: normalize(15), }, flex: { flex: 1, -- cgit v1.2.3-70-g09d2 From 8811dbc4cbcc338169e1fa9a9181b7026d7cdfbc Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Jul 2021 19:29:59 -0400 Subject: Adjust most styling for caption screen --- src/components/moments/CaptionScreenHeader.tsx | 5 +- src/screens/profile/CaptionScreen.tsx | 113 ++++++++++++++++--------- 2 files changed, 75 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx index 0638c128..cda85e57 100644 --- a/src/components/moments/CaptionScreenHeader.tsx +++ b/src/components/moments/CaptionScreenHeader.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {Text, View, StyleSheet, ViewProps} from 'react-native'; +import {normalize} from '../../utils'; interface CaptionScreenHeaderProps extends ViewProps { title: string; } @@ -26,8 +27,8 @@ const styles = StyleSheet.create({ width: '90%', }, header: { - fontSize: 20, - fontWeight: 'bold', + fontSize: normalize(18), + fontWeight: '700', color: 'white', textAlign: 'center', }, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 2c5356c0..1d2946bb 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -4,6 +4,7 @@ import React, {FC, useEffect, useState} from 'react'; import { Alert, Image, + ImageSourcePropType, Keyboard, KeyboardAvoidingView, Platform, @@ -13,7 +14,8 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {Button, normalize} from 'react-native-elements'; +import {openContactForm} from 'react-native-contacts'; +import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; @@ -39,7 +41,7 @@ import { } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {MomentTagType} from '../../types'; -import {StatusBarHeight} from '../../utils'; +import {normalize, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; /** @@ -66,7 +68,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [tags, setTags] = useState( selectedTags ? selectedTags : [], ); - const [taggedList, setTaggedList] = useState(''); + const [taggedUsersText, setTaggedUsersText] = useState(''); const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -83,18 +85,17 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }, [selectedTags]); useEffect(() => { - const getTaggedUsersListString = () => { - let listString = ''; - for (let i = 0; i < tags.length; i++) { - if (listString.length < 21) { - listString = listString.concat(`@${tags[i].user.username} `); - } else { - break; - } + let listString = ''; + for (const tag of tags) { + const usernameStr = `@${tag.user.username} `; + if (listString.length + usernameStr.length > 21) { + listString = listString.concat('. . .'); + break; + } else { + listString = listString.concat(usernameStr); } - setTaggedList(listString); - }; - getTaggedUsersListString(); + } + setTaggedUsersText(listString); }, [tags]); const navigateToProfile = () => { @@ -203,28 +204,24 @@ const CaptionScreen: React.FC = ({route, navigation}) => { } }; - const SelectableItem: FC = () => ( - - navigation.navigate('TagFriendsScreen', { - media: { - uri: mediaUri, - isVideo: isMediaAVideo, - }, - selectedTags: tags, - }) - } - style={styles.tagFriendsContainer}> - - Tag Friends - - {taggedList} - {taggedList.length > 21 ? '. . .' : ''} - - + const SelectableItem: FC<{ + text: string; + imageUri: ImageSourcePropType; + onPress: () => void; + }> = ({text, imageUri, onPress}) => ( + + + + {text} + + + {taggedUsersText} + + ); @@ -273,7 +270,32 @@ const CaptionScreen: React.FC = ({route, navigation}) => { partTypes={mentionPartTypes('blue', 'caption')} /> - + + navigation.navigate('TagFriendsScreen', { + media: { + uri: mediaUri, + isVideo: isMediaAVideo, + }, + selectedTags: tags, + }) + } + /> + + navigation.navigate('TagFriendsScreen', { + media: { + uri: mediaUri, + isVideo: isMediaAVideo, + }, + selectedTags: tags, + }) + } + /> @@ -306,6 +328,7 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flexDirection: 'row', padding: normalize(15), + marginBottom: normalize(35), }, media: { height: normalize(150), @@ -322,27 +345,35 @@ const styles = StyleSheet.create({ }, tagFriendsTitle: { color: 'white', - fontSize: normalize(12), + fontSize: normalize(14), lineHeight: normalize(16.71), letterSpacing: normalize(0.3), fontWeight: '600', }, tagFriendsContainer: { marginHorizontal: '5%', - marginTop: '3%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', + marginBottom: normalize(20), }, - taggedListContainer: { + taggedUsersText: { color: 'white', width: 150, fontSize: normalize(10), lineHeight: normalize(11), letterSpacing: normalize(0.3), textAlign: 'right', + marginRight: 5, + }, + tagIcon: { + width: normalize(20), + height: normalize(20), + marginRight: 15, + }, + row: { + flexDirection: 'row', }, - tagIcon: {width: 20, height: 20}, }); export default CaptionScreen; -- cgit v1.2.3-70-g09d2 From dda5964a5f334655826f36023025f90cb86364c8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Jul 2021 19:41:02 -0400 Subject: Add comments --- src/screens/profile/CaptionScreen.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 1d2946bb..67d1fd04 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -86,6 +86,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { useEffect(() => { let listString = ''; + // Append non-truncated usernames together and no more than 21 characters total + // e.g. "@ivan.tagg" + // e.g. "@ivan.tagg @foobar . . ." for (const tag of tags) { const usernameStr = `@${tag.user.username} `; if (listString.length + usernameStr.length > 21) { -- cgit v1.2.3-70-g09d2 From 2697a10f65f84eb44757bc3b37c09bdc1989de5d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 14:38:10 -0400 Subject: Remove title, Cleanup caption screen route props, Add new screen --- src/components/comments/ZoomInCropper.tsx | 4 +- src/components/moments/Moment.tsx | 1 - src/routes/main/MainStackNavigator.tsx | 21 ++++---- src/routes/main/MainStackScreen.tsx | 8 ++++ src/screens/moments/CameraScreen.tsx | 4 +- src/screens/profile/CaptionScreen.tsx | 39 +++++++-------- src/screens/profile/ChoosingCategoryScreen.tsx | 66 ++++++++++++++++++++++++++ src/screens/profile/index.ts | 1 + 8 files changed, 107 insertions(+), 37 deletions(-) create mode 100644 src/screens/profile/ChoosingCategoryScreen.tsx (limited to 'src') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 7fa88f6e..4de82418 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -25,7 +25,7 @@ export const ZoomInCropper: React.FC = ({ route, navigation, }) => { - const {screenType, title, media} = route.params; + const {screenType, media} = route.params; const [aspectRatio, setAspectRatio] = useState(1); // Stores the coordinates of the cropped image @@ -77,7 +77,6 @@ export const ZoomInCropper: React.FC = ({ .then((croppedURL) => { navigation.navigate('CaptionScreen', { screenType, - title: title, media: { uri: croppedURL, isVideo: false, @@ -93,7 +92,6 @@ export const ZoomInCropper: React.FC = ({ ) { navigation.navigate('CaptionScreen', { screenType, - title: title, media, }); } diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 73503c5e..87bfad77 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -43,7 +43,6 @@ const Moment: React.FC = ({ const navigateToCameraScreen = () => { navigation.navigate('CameraScreen', { - title, screenType, }); }; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index d21a1fe4..e840eb38 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -35,13 +35,21 @@ export type MainStackParams = { userXId: string | undefined; screenType: ScreenType; }; + CameraScreen: { + screenType: ScreenType; + }; + ZoomInCropper: { + media: {uri: string; isVideo: boolean}; + screenType: ScreenType; + }; CaptionScreen: { - title?: string; // TODO: remove this? - media?: {uri: string; isVideo: boolean}; screenType: ScreenType; + media?: {uri: string; isVideo: boolean}; + selectedCategory?: string; selectedTags?: MomentTagType[]; moment?: MomentType; }; + ChoosingCategoryScreen: {}; TagFriendsScreen: { media: { uri: string; @@ -109,15 +117,6 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; - ZoomInCropper: { - media: {uri: string; isVideo: boolean}; - screenType: ScreenType; - title: string; - }; - CameraScreen: { - title: string; - screenType: ScreenType; - }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 948f37b8..15300c0d 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -40,6 +40,7 @@ import {ScreenType} from '../../types'; import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; import {ZoomInCropper} from '../../components/comments/ZoomInCropper'; +import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen'; /** * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited. @@ -180,6 +181,13 @@ const MainStackScreen: React.FC = ({route}) => { gestureEnabled: false, }} /> + = ({route, navigation}) => { - const {title, screenType} = route.params; + const {screenType} = route.params; const cameraRef = createRef(); const tabBarHeight = useBottomTabBarHeight(); const [cameraType, setCameraType] = useState('front'); @@ -72,7 +72,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { const navigateToCropper = (uri: string) => { navigation.navigate('ZoomInCropper', { screenType, - title, media: { uri, isVideo: false, @@ -83,7 +82,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { const navigateToCaptionScreen = (isVideo: boolean, uri: string) => { navigation.navigate('CaptionScreen', { screenType, - title, media: { uri, isVideo, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 67d1fd04..025d81a7 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -14,7 +14,6 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {openContactForm} from 'react-native-contacts'; import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; @@ -48,27 +47,28 @@ import {mentionPartTypes} from '../../utils/comments'; * Upload Screen to allow users to upload posts to Tagg */ type CaptionScreenRouteProp = RouteProp; + type CaptionScreenNavigationProp = StackNavigationProp< MainStackParams, 'CaptionScreen' >; + interface CaptionScreenProps { route: CaptionScreenRouteProp; navigation: CaptionScreenNavigationProp; } const CaptionScreen: React.FC = ({route, navigation}) => { - const {title, screenType, selectedTags, moment} = route.params; + const {screenType, moment} = route.params; const { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const [caption, setCaption] = useState(moment ? moment.caption : ''); const [loading, setLoading] = useState(false); - const [tags, setTags] = useState( - selectedTags ? selectedTags : [], - ); + const [tags, setTags] = useState([]); const [taggedUsersText, setTaggedUsersText] = useState(''); + const [momentCategory, setMomentCategory] = useState(); const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -81,8 +81,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { : route.params.media?.isVideo ?? false; useEffect(() => { - setTags(selectedTags ? selectedTags : []); - }, [selectedTags]); + setTags(route.params.selectedTags ?? []); + }, [route.params.selectedTags]); + + useEffect(() => { + setMomentCategory(route.params.selectedCategory); + }, [route.params.selectedCategory]); useEffect(() => { let listString = ''; @@ -145,7 +149,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleShare = async () => { setLoading(true); - if (moment || !title) { + if (moment || !momentCategory) { handleFailed(); return; } @@ -153,7 +157,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { let momentId; // separate upload logic for image/video if (isMediaAVideo) { - const presignedURLResponse = await handlePresignedURL(title); + const presignedURLResponse = await handlePresignedURL(momentCategory); if (!presignedURLResponse) { handleFailed(); return; @@ -166,7 +170,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { handleFailed(); } } else { - const momentResponse = await postMoment(mediaUri, caption, title, userId); + const momentResponse = await postMoment( + mediaUri, + caption, + momentCategory, + userId, + ); if (!momentResponse) { handleFailed(); return; @@ -276,15 +285,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { - navigation.navigate('TagFriendsScreen', { - media: { - uri: mediaUri, - isVideo: isMediaAVideo, - }, - selectedTags: tags, - }) - } + onPress={() => navigation.navigate('ChoosingCategoryScreen', {})} /> ; + +interface ChoosingCategoryScreenProps { + route: ChoosingCategoryScreenRouteProps; +} + +const ChoosingCategoryScreen: React.FC = ({ + route, +}) => { + const navigation = useNavigation(); + const tabBarHeight = useBottomTabBarHeight(); + const insetTop = useSafeAreaInsets().top; + const MomentItem: FC<{ + title: string; + }> = ({title}) => ( + { + await AsyncStorage.setItem('selectedMomentCategory', title); + navigation.goBack(); + }}> + foo + + ); + return ( + + {/* */} + {/* */} + + + {[0, 0, 0, 0].map((item) => ( + + ))} + + + {/* */} + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginTop: StatusBarHeight, + }, + scrollContainer: {}, +}); + +export default ChoosingCategoryScreen; diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts index ea0505a2..101101b8 100644 --- a/src/screens/profile/index.ts +++ b/src/screens/profile/index.ts @@ -13,3 +13,4 @@ export {default as AccountType} from './AccountType'; export {default as CategorySelection} from './CategorySelection'; export {default as CreateCustomCategory} from './CreateCustomCategory'; export {default as CommentReactionScreen} from './CommentReactionScreen'; +export {default as ChoosingCategoryScreen} from './ChoosingCategoryScreen'; -- cgit v1.2.3-70-g09d2 From a33896aab969ee0c6678ab562ff2aeef25657c7c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 14:46:38 -0400 Subject: Remove old plus, Fix wrong upload click bug --- src/components/common/NavigationIcon.tsx | 2 +- src/components/moments/Moment.tsx | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index debb36b3..a5f42992 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -37,7 +37,7 @@ const NavigationIcon = (props: NavigationIconProps) => { case 'Upload': imgSrc = props.disabled ? require('../../assets/navigationIcons/new-upload.png') - : require('../../assets/navigationIcons/upload-clicked.png'); + : require('../../assets/navigationIcons/new-upload.png'); break; case 'Notifications': imgSrc = props.disabled diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 87bfad77..b4703e70 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -80,13 +80,6 @@ const Moment: React.FC = ({ )} {!userXId && ( - {shouldAllowDeletion && ( handleMomentCategoryDelete(title)} -- cgit v1.2.3-70-g09d2 From f39a320fd9e07750c8fcf7cc1882f21324a0ce58 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 15:07:18 -0400 Subject: Fix navigation error handling --- src/constants/strings.ts | 1 + src/routes/tabs/NavigationBar.tsx | 4 ++-- src/screens/profile/CaptionScreen.tsx | 34 ++++++++++++++++++---------------- 3 files changed, 21 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 112bc546..071b3835 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -45,6 +45,7 @@ export const ERROR_SELECT_GENDER = 'Please select your gender'; export const ERROR_SELECT_UNIVERSITY = 'Please select your University'; export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins'; export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app'; +export const ERROR_NO_MOMENT_CATEGORY = 'Please select a category!'; export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again"; export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again"; export const ERROR_T_AND_C_NOT_ACCEPTED = 'You must first agree to the terms and conditions.'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 12f6ab58..c3f0b9f8 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -66,7 +66,7 @@ const NavigationBar: React.FC = () => { disabled={!focused} /> ); - case 'Profile': + case 'ProfileTab': return ; case 'SuggestedPeople': return ( @@ -118,7 +118,7 @@ const NavigationBar: React.FC = () => { }} /> diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 025d81a7..ad301ded 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -23,9 +23,11 @@ import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import { + ERROR_NO_MOMENT_CATEGORY, ERROR_SOMETHING_WENT_WRONG_REFRESH, ERROR_UPLOAD, } from '../../constants/strings'; +import * as RootNavigation from '../../RootNavigation'; import {MainStackParams} from '../../routes'; import { handlePresignedURL, @@ -69,6 +71,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [tags, setTags] = useState([]); const [taggedUsersText, setTaggedUsersText] = useState(''); const [momentCategory, setMomentCategory] = useState(); + // const [momentCategory, setMomentCategory] = useState(); const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -105,27 +108,23 @@ const CaptionScreen: React.FC = ({route, navigation}) => { setTaggedUsersText(listString); }, [tags]); - const navigateToProfile = () => { - //Since the logged In User is navigating to own profile, useXId is not required - navigation.navigate('Profile', { - screenType, - userXId: undefined, - }); - }; - - const handleFailed = () => { + const handleFailed = (noCategory = false) => { setLoading(false); setTimeout(() => { - Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD); + if (noCategory) { + Alert.alert(ERROR_NO_MOMENT_CATEGORY); + } else { + Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD); + } }, 500); }; const handleSuccess = () => { setLoading(false); - if (moment) { - setLoading(false); - navigation.goBack(); - } else { - navigateToProfile(); + if (!moment) { + // if posting, pop all screens until at camera screen (default upload screen) + // then switch to the profile tab + navigation.popToTop(); + RootNavigation.navigate('ProfileTab'); setTimeout(() => { if (isMediaAVideo) { Alert.alert( @@ -135,6 +134,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { Alert.alert(''); } }, 500); + } else { + // if editing, simply go back to (most likely) indiv moment + navigation.goBack(); } }; @@ -150,7 +152,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleShare = async () => { setLoading(true); if (moment || !momentCategory) { - handleFailed(); + handleFailed(true); return; } let profileCompletionStage; -- cgit v1.2.3-70-g09d2 From 933b27e8d1f03b9d07f99b9662503e68f6a6ac91 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 15:24:41 -0400 Subject: Add logic to display current selected category --- src/screens/profile/CaptionScreen.tsx | 54 +++++++++++++++++--------- src/screens/profile/ChoosingCategoryScreen.tsx | 9 +++-- 2 files changed, 41 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index ad301ded..a8664d85 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -219,25 +219,35 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }; const SelectableItem: FC<{ - text: string; + text: 'Tag Friends' | 'Category'; imageUri: ImageSourcePropType; onPress: () => void; - }> = ({text, imageUri, onPress}) => ( - - - - {text} - - - {taggedUsersText} - - - - ); + }> = ({text, imageUri, onPress}) => { + return ( + + + {text === 'Category' && !momentCategory && ( + * + )} + + {text} + + + {text === 'Tag Friends' && ( + {taggedUsersText} + )} + {text === 'Category' && ( + {momentCategory} + )} + + + + ); + }; return ( @@ -363,13 +373,21 @@ const styles = StyleSheet.create({ alignItems: 'center', marginBottom: normalize(20), }, - taggedUsersText: { + asteriskText: { + color: TAGG_LIGHT_BLUE_2, + fontWeight: 'bold', + fontSize: normalize(15), + height: 15, + alignSelf: 'center', + }, + itemInfoText: { color: 'white', width: 150, fontSize: normalize(10), lineHeight: normalize(11), letterSpacing: normalize(0.3), textAlign: 'right', + marginRight: 5, }, tagIcon: { diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index 285732e7..dd3bc1bb 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -33,10 +33,11 @@ const ChoosingCategoryScreen: React.FC = ({ title: string; }> = ({title}) => ( { - await AsyncStorage.setItem('selectedMomentCategory', title); - navigation.goBack(); - }}> + onPress={async () => + navigation.navigate('CaptionScreen', { + selectedCategory: 'Food', + }) + }> foo ); -- cgit v1.2.3-70-g09d2 From 160eaf8084deb21d15fe03e6984a5bb057a57e94 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 16:19:38 -0400 Subject: Add more styling to choosing category screen --- src/screens/profile/CaptionScreen.tsx | 10 ++-- src/screens/profile/ChoosingCategoryScreen.tsx | 82 ++++++++++++++++++++------ 2 files changed, 69 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index a8664d85..280319b4 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -224,13 +224,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onPress: () => void; }> = ({text, imageUri, onPress}) => { return ( - + {text === 'Category' && !momentCategory && ( * )} - {text} + {text} {text === 'Tag Friends' && ( @@ -359,14 +361,14 @@ const styles = StyleSheet.create({ flex: { flex: 1, }, - tagFriendsTitle: { + selectableItemTitle: { color: 'white', fontSize: normalize(14), lineHeight: normalize(16.71), letterSpacing: normalize(0.3), fontWeight: '600', }, - tagFriendsContainer: { + selectableItemContainer: { marginHorizontal: '5%', flexDirection: 'row', justifyContent: 'space-between', diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index dd3bc1bb..a591cd69 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -1,4 +1,3 @@ -import AsyncStorage from '@react-native-community/async-storage'; import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp, useNavigation} from '@react-navigation/native'; import React, {FC} from 'react'; @@ -9,10 +8,13 @@ import { TouchableOpacity, View, } from 'react-native'; -import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; -import {CaptionScreenHeader, SearchBackground} from '../../components'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import {useSelector} from 'react-redux'; +import FrontArrow from '../../assets/icons/front-arrow.svg'; +import {SearchBackground} from '../../components'; import {MainStackParams} from '../../routes'; -import {StatusBarHeight} from '../../utils'; +import {RootState} from '../../store/rootReducer'; +import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; type ChoosingCategoryScreenRouteProps = RouteProp< MainStackParams, @@ -26,33 +28,57 @@ interface ChoosingCategoryScreenProps { const ChoosingCategoryScreen: React.FC = ({ route, }) => { + const {momentCategories} = useSelector( + (state: RootState) => state.momentCategories, + ); const navigation = useNavigation(); const tabBarHeight = useBottomTabBarHeight(); const insetTop = useSafeAreaInsets().top; + const MomentItem: FC<{ title: string; - }> = ({title}) => ( - - navigation.navigate('CaptionScreen', { - selectedCategory: 'Food', - }) - }> - foo + onPress: () => void; + }> = ({title, onPress}) => ( + + + + {/* */} + {title} + + + + ); + return ( - {/* */} - {/* */} - - {[0, 0, 0, 0].map((item) => ( - + + {momentCategories.map((title) => ( + + navigation.navigate('CaptionScreen', { + selectedCategory: title, + }) + } + /> ))} - {/* */} ); }; @@ -61,7 +87,25 @@ const styles = StyleSheet.create({ container: { marginTop: StatusBarHeight, }, - scrollContainer: {}, + itemContainer: { + marginHorizontal: '5%', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: normalize(20), + }, + itemTitle: { + color: 'white', + fontSize: normalize(14), + lineHeight: normalize(16.71), + letterSpacing: normalize(0.3), + fontWeight: '600', + alignSelf: 'center', + marginLeft: normalize(25), + }, + row: { + flexDirection: 'row', + }, }); export default ChoosingCategoryScreen; -- cgit v1.2.3-70-g09d2 From 0e01031c024c1ce68e18974329cc7cb8e770a781 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 16:32:08 -0400 Subject: Adjust caption container --- src/screens/profile/CaptionScreen.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 280319b4..aa866f56 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -71,7 +71,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [tags, setTags] = useState([]); const [taggedUsersText, setTaggedUsersText] = useState(''); const [momentCategory, setMomentCategory] = useState(); - // const [momentCategory, setMomentCategory] = useState(); const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -288,12 +287,13 @@ const CaptionScreen: React.FC = ({route, navigation}) => { /> )} Date: Wed, 7 Jul 2021 16:40:34 -0400 Subject: Refactor moment category icon logic --- src/components/onboarding/MomentCategory.tsx | 89 ++-------------------------- src/utils/moments.ts | 84 ++++++++++++++++++++++++++ 2 files changed, 90 insertions(+), 83 deletions(-) (limited to 'src') diff --git a/src/components/onboarding/MomentCategory.tsx b/src/components/onboarding/MomentCategory.tsx index 97099b9e..eb9d5bcc 100644 --- a/src/components/onboarding/MomentCategory.tsx +++ b/src/components/onboarding/MomentCategory.tsx @@ -3,11 +3,12 @@ import {StyleSheet} from 'react-native'; import {Image, Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; +import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import { - BACKGROUND_GRADIENT_MAP, - MOMENT_CATEGORY_BG_COLORS, -} from '../../constants'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; + getMomentCategoryIconInfo, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; type MomentCategoryProps = { categoryType: string; @@ -22,85 +23,7 @@ const MomentCategory: React.FC = ({ isAdded, onSelect, }) => { - var icon, bgColor; - - /** - * Choose icon and color based on category type - */ - switch (categoryType) { - case 'Friends': - icon = require('../../assets/moment-categories/friends-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[0]; - break; - case 'Adventure': - icon = require('../../assets/moment-categories/adventure-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[1]; - break; - case 'Photo Dump': - icon = require('../../assets/moment-categories/photo-dump-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[2]; - break; - case 'Food': - icon = require('../../assets/moment-categories/food-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[3]; - break; - case 'Music': - icon = require('../../assets/moment-categories/music-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[4]; - break; - case 'Art': - icon = require('../../assets/moment-categories/art-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[5]; - break; - case 'Sports': - icon = require('../../assets/moment-categories/sports-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[6]; - break; - case 'Fashion': - icon = require('../../assets/moment-categories/fashion-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[7]; - break; - case 'Travel': - icon = require('../../assets/moment-categories/travel-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[8]; - break; - case 'Pets': - icon = require('../../assets/moment-categories/pets-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[9]; - break; - case 'Fitness': - icon = require('../../assets/moment-categories/fitness-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[10]; - break; - case 'DIY': - icon = require('../../assets/moment-categories/diy-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[11]; - break; - case 'Nature': - icon = require('../../assets/moment-categories/nature-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[12]; - break; - case 'Early Life': - icon = require('../../assets/moment-categories/early-life-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[13]; - break; - case 'Beauty': - icon = require('../../assets/moment-categories/beauty-icon.png'); - bgColor = MOMENT_CATEGORY_BG_COLORS[14]; - break; - default: - // All custom categories - icon = require('../../assets/moment-categories/custom-icon.png'); - // A quick deterministic "random" color picker by summing up ascii char codees - const charCodeSum = categoryType - .split('') - .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0); - bgColor = - MOMENT_CATEGORY_BG_COLORS[ - charCodeSum % MOMENT_CATEGORY_BG_COLORS.length - ]; - break; - } + const {icon, bgColor} = getMomentCategoryIconInfo(categoryType); /** * The Linear Gradient helps us add a gradient border when the category is already added /selected by user diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 9e8cc332..2b924b1b 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -1,4 +1,6 @@ import moment from 'moment'; +import {ImageSourcePropType} from 'react-native'; +import {MOMENT_CATEGORY_BG_COLORS} from '../constants'; /** * Formats elapsed time from a given time. @@ -71,3 +73,85 @@ export const getTimeInShorthand = (date_time: string) => { } return time; }; + +export const getMomentCategoryIconInfo = (category: string) => { + let icon: ImageSourcePropType, bgColor: string; + switch (category) { + case 'Friends': + icon = require('../../assets/moment-categories/friends-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[0]; + break; + case 'Adventure': + icon = require('../../assets/moment-categories/adventure-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[1]; + break; + case 'Photo Dump': + icon = require('../../assets/moment-categories/photo-dump-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[2]; + break; + case 'Food': + icon = require('../../assets/moment-categories/food-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[3]; + break; + case 'Music': + icon = require('../../assets/moment-categories/music-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[4]; + break; + case 'Art': + icon = require('../../assets/moment-categories/art-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[5]; + break; + case 'Sports': + icon = require('../../assets/moment-categories/sports-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[6]; + break; + case 'Fashion': + icon = require('../../assets/moment-categories/fashion-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[7]; + break; + case 'Travel': + icon = require('../../assets/moment-categories/travel-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[8]; + break; + case 'Pets': + icon = require('../../assets/moment-categories/pets-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[9]; + break; + case 'Fitness': + icon = require('../../assets/moment-categories/fitness-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[10]; + break; + case 'DIY': + icon = require('../../assets/moment-categories/diy-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[11]; + break; + case 'Nature': + icon = require('../../assets/moment-categories/nature-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[12]; + break; + case 'Early Life': + icon = require('../../assets/moment-categories/early-life-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[13]; + break; + case 'Beauty': + icon = require('../../assets/moment-categories/beauty-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[14]; + break; + default: + // All custom categories + icon = require('../../assets/moment-categories/custom-icon.png'); + // A quick deterministic "random" color picker by summing up ascii char codees + const charCodeSum = category + .split('') + .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0); + bgColor = + MOMENT_CATEGORY_BG_COLORS[ + charCodeSum % MOMENT_CATEGORY_BG_COLORS.length + ]; + break; + } + return { + icon, + bgColor, + }; +}; -- cgit v1.2.3-70-g09d2 From 408f422ead09b9810860fc6ebe5da4eb9721ad76 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 16:57:26 -0400 Subject: Fix icon bug --- src/utils/moments.ts | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 2b924b1b..4aadb4d4 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -78,68 +78,68 @@ export const getMomentCategoryIconInfo = (category: string) => { let icon: ImageSourcePropType, bgColor: string; switch (category) { case 'Friends': - icon = require('../../assets/moment-categories/friends-icon.png'); + icon = require('../assets/moment-categories/friends-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[0]; break; case 'Adventure': - icon = require('../../assets/moment-categories/adventure-icon.png'); + icon = require('../assets/moment-categories/adventure-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[1]; break; case 'Photo Dump': - icon = require('../../assets/moment-categories/photo-dump-icon.png'); + icon = require('../assets/moment-categories/photo-dump-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[2]; break; case 'Food': - icon = require('../../assets/moment-categories/food-icon.png'); + icon = require('../assets/moment-categories/food-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[3]; break; case 'Music': - icon = require('../../assets/moment-categories/music-icon.png'); + icon = require('../assets/moment-categories/music-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[4]; break; case 'Art': - icon = require('../../assets/moment-categories/art-icon.png'); + icon = require('../assets/moment-categories/art-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[5]; break; case 'Sports': - icon = require('../../assets/moment-categories/sports-icon.png'); + icon = require('../assets/moment-categories/sports-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[6]; break; case 'Fashion': - icon = require('../../assets/moment-categories/fashion-icon.png'); + icon = require('../assets/moment-categories/fashion-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[7]; break; case 'Travel': - icon = require('../../assets/moment-categories/travel-icon.png'); + icon = require('../assets/moment-categories/travel-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[8]; break; case 'Pets': - icon = require('../../assets/moment-categories/pets-icon.png'); + icon = require('../assets/moment-categories/pets-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[9]; break; case 'Fitness': - icon = require('../../assets/moment-categories/fitness-icon.png'); + icon = require('../assets/moment-categories/fitness-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[10]; break; case 'DIY': - icon = require('../../assets/moment-categories/diy-icon.png'); + icon = require('../assets/moment-categories/diy-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[11]; break; case 'Nature': - icon = require('../../assets/moment-categories/nature-icon.png'); + icon = require('../assets/moment-categories/nature-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[12]; break; case 'Early Life': - icon = require('../../assets/moment-categories/early-life-icon.png'); + icon = require('../assets/moment-categories/early-life-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[13]; break; case 'Beauty': - icon = require('../../assets/moment-categories/beauty-icon.png'); + icon = require('../assets/moment-categories/beauty-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[14]; break; default: // All custom categories - icon = require('../../assets/moment-categories/custom-icon.png'); + icon = require('../assets/moment-categories/custom-icon.png'); // A quick deterministic "random" color picker by summing up ascii char codees const charCodeSum = category .split('') -- cgit v1.2.3-70-g09d2 From 2a6035061a8a8a37dc74905180928aa75d92983f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 16:57:41 -0400 Subject: Add more styling to choosing category --- src/constants/constants.ts | 1 + src/screens/profile/ChoosingCategoryScreen.tsx | 80 ++++++++++++++++++-------- 2 files changed, 57 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index f4ffd750..13a73208 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -66,6 +66,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4'; export const TAGG_PURPLE = '#8F01FF'; export const TAGG_DARK_BLUE = '#4E699C'; +export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1'; export const TAGG_LIGHT_BLUE: string = '#698DD3'; export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7'; export const TAGG_LIGHT_PURPLE = '#F4DDFF'; diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index a591cd69..daf7642d 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -2,19 +2,27 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp, useNavigation} from '@react-navigation/native'; import React, {FC} from 'react'; import { + Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; import {SearchBackground} from '../../components'; +import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; -import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; +import { + getMomentCategoryIconInfo, + normalize, + SCREEN_HEIGHT, + StatusBarHeight, +} from '../../utils'; type ChoosingCategoryScreenRouteProps = RouteProp< MainStackParams, @@ -38,28 +46,32 @@ const ChoosingCategoryScreen: React.FC = ({ const MomentItem: FC<{ title: string; onPress: () => void; - }> = ({title, onPress}) => ( - - - - {/* */} - {title} - - - - - - ); + }> = ({title, onPress}) => { + const icon = getMomentCategoryIconInfo(title).icon; + return ( + + + + + + + + {title} + + + + + + ); + }; return ( @@ -69,6 +81,7 @@ const ChoosingCategoryScreen: React.FC = ({ contentContainerStyle={{paddingBottom: tabBarHeight}}> {momentCategories.map((title) => ( navigation.navigate('CaptionScreen', { @@ -92,7 +105,26 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - marginBottom: normalize(20), + marginVertical: normalize(20), + borderRadius: 4, + }, + gradientIcon: { + width: normalize(40), + height: normalize(40), + justifyContent: 'center', + alignItems: 'center', + borderRadius: 4, + }, + iconBackground: { + height: '85%', + width: '85%', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: TAGG_DARK_PURPLEISH_BLUE, + }, + icon: { + height: normalize(25), + width: normalize(25), }, itemTitle: { color: 'white', -- cgit v1.2.3-70-g09d2 From 12d92de8b9c93a4615952134ca4973049e45952f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 15:42:50 -0400 Subject: Cleanup tabbar visibility status --- src/components/comments/ZoomInCropper.tsx | 13 ------------- src/screens/moments/CameraScreen.tsx | 5 ----- 2 files changed, 18 deletions(-) (limited to 'src') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 4de82418..6f2d7c21 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -34,19 +34,6 @@ export const ZoomInCropper: React.FC = ({ const [y0, setY0] = useState(); const [y1, setY1] = useState(); - useFocusEffect( - useCallback(() => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: false, - }); - return () => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: true, - }); - }; - }, [navigation]), - ); - // Setting original aspect ratio of image useEffect(() => { if (media.uri) { diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index be153d0c..07c9b059 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -45,11 +45,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: false, }); - return () => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: true, - }); - }; }, [navigation]), ); -- cgit v1.2.3-70-g09d2 From f9b9a3297dd8d935d0ed5f176451075e192aee49 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 15:45:38 -0400 Subject: Add navigation to camera tab with big blue plus --- src/components/moments/Moment.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index b4703e70..a1621f2e 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -7,9 +7,9 @@ import LinearGradient from 'react-native-linear-gradient'; import DeleteIcon from '../../assets/icons/delete-logo.svg'; import DownIcon from '../../assets/icons/down_icon.svg'; import BigPlusIcon from '../../assets/icons/plus-icon-white.svg'; -import PlusIcon from '../../assets/icons/plus-icon.svg'; import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; +import * as RootNavigation from '../../RootNavigation'; import {MomentType, ScreenType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import MomentTile from './MomentTile'; @@ -41,12 +41,6 @@ const Moment: React.FC = ({ }) => { const navigation = useNavigation(); - const navigateToCameraScreen = () => { - navigation.navigate('CameraScreen', { - screenType, - }); - }; - return ( @@ -106,7 +100,7 @@ const Moment: React.FC = ({ /> ))} {(images === undefined || images.length === 0) && !userXId && ( - + RootNavigation.navigate('Upload')}> -- cgit v1.2.3-70-g09d2 From ff783d8aebc90802079f843b27f2719173bd6b70 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 16:01:56 -0400 Subject: Add post button --- src/components/moments/MomentPostButton.tsx | 49 +++++++++++++++++++++++++++++ src/components/moments/index.ts | 1 + src/screens/profile/CaptionScreen.tsx | 7 ++++- 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/components/moments/MomentPostButton.tsx (limited to 'src') diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx new file mode 100644 index 00000000..78fe209b --- /dev/null +++ b/src/components/moments/MomentPostButton.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import {StyleSheet} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +interface MomentPostButtonProps { + enabled: boolean; + onPress: () => void; +} + +const MomentPostButton: React.FC = ({ + enabled, + onPress, +}) => { + return ( + + Post + + ); +}; + +const styles = StyleSheet.create({ + button: { + width: SCREEN_WIDTH * 0.8, + height: normalize(37), + backgroundColor: TAGG_LIGHT_BLUE, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 6, + alignSelf: 'center', + }, + grey: { + backgroundColor: '#C4C4C4', + }, + text: { + color: 'white', + fontWeight: 'bold', + fontSize: normalize(15), + lineHeight: 18, + letterSpacing: 2, + }, +}); + +export default MomentPostButton; diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index cac2da2e..d2f5d150 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 Moment} from './Moment'; export {default as TagFriendsFooter} from './TagFriendsFoooter'; export {default as MomentPost} from './MomentPost'; +export {default as MomentPostButton} from './MomentPostButton'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index aa866f56..86628d16 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -18,7 +18,11 @@ import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {MentionInputControlled, SearchBackground} from '../../components'; +import { + MentionInputControlled, + MomentPostButton, + SearchBackground, +} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; @@ -314,6 +318,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }) } /> + null} /> -- cgit v1.2.3-70-g09d2 From 2c2921af0fc075482aa1a7d2064d24c4999497ca Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 16:23:49 -0400 Subject: Remove moment post button, Update to use square button --- src/components/common/TaggSquareButton.tsx | 17 +++++--- src/components/moments/MomentPostButton.tsx | 49 ----------------------- src/components/moments/index.ts | 1 - src/screens/profile/CaptionScreen.tsx | 61 ++++++++++++++++++++++------- 4 files changed, 58 insertions(+), 70 deletions(-) delete mode 100644 src/components/moments/MomentPostButton.tsx (limited to 'src') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 1a1c33b3..2447276d 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { GestureResponderEvent, + StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, - ViewProps, + TouchableOpacityProps, ViewStyle, } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; @@ -15,14 +16,15 @@ import { TAGG_PURPLE, } from '../../constants'; import {normalize, SCREEN_WIDTH} from '../../utils'; -interface TaggSquareButtonProps extends ViewProps { + +interface TaggSquareButtonProps extends TouchableOpacityProps { onPress: (event: GestureResponderEvent) => void; title: string; buttonStyle: 'normal' | 'large' | 'gradient'; buttonColor: 'purple' | 'white' | 'blue'; labelColor: 'white' | 'blue'; - style?: ViewStyle; - labelStyle?: TextStyle; + style?: StyleProp; + labelStyle?: StyleProp; } const TaggSquareButton: React.FC = (props) => { @@ -50,6 +52,7 @@ const TaggSquareButton: React.FC = (props) => { case 'large': return ( @@ -59,7 +62,10 @@ const TaggSquareButton: React.FC = (props) => { ); case 'gradient': return ( - + = (props) => { default: return ( diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx deleted file mode 100644 index 78fe209b..00000000 --- a/src/components/moments/MomentPostButton.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import {StyleSheet} from 'react-native'; -import {Text} from 'react-native-animatable'; -import {TouchableOpacity} from 'react-native-gesture-handler'; -import {TAGG_LIGHT_BLUE} from '../../constants'; -import {normalize, SCREEN_WIDTH} from '../../utils'; - -interface MomentPostButtonProps { - enabled: boolean; - onPress: () => void; -} - -const MomentPostButton: React.FC = ({ - enabled, - onPress, -}) => { - return ( - - Post - - ); -}; - -const styles = StyleSheet.create({ - button: { - width: SCREEN_WIDTH * 0.8, - height: normalize(37), - backgroundColor: TAGG_LIGHT_BLUE, - justifyContent: 'center', - alignItems: 'center', - borderRadius: 6, - alignSelf: 'center', - }, - grey: { - backgroundColor: '#C4C4C4', - }, - text: { - color: 'white', - fontWeight: 'bold', - fontSize: normalize(15), - lineHeight: 18, - letterSpacing: 2, - }, -}); - -export default MomentPostButton; diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index d2f5d150..cac2da2e 100644 --- a/src/components/moments/index.ts +++ b/src/components/moments/index.ts @@ -3,4 +3,3 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader'; export {default as Moment} from './Moment'; export {default as TagFriendsFooter} from './TagFriendsFoooter'; export {default as MomentPost} from './MomentPost'; -export {default as MomentPostButton} from './MomentPostButton'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 86628d16..86e30bdc 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -22,10 +22,11 @@ import { MentionInputControlled, MomentPostButton, SearchBackground, + TaggSquareButton, } from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; -import {TAGG_LIGHT_BLUE_2} from '../../constants'; +import {TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2} from '../../constants'; import { ERROR_NO_MOMENT_CATEGORY, ERROR_SOMETHING_WENT_WRONG_REFRESH, @@ -46,7 +47,7 @@ import { } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {MomentTagType} from '../../types'; -import {normalize, StatusBarHeight} from '../../utils'; +import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; /** @@ -268,12 +269,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { buttonStyle={styles.button} onPress={() => navigation.goBack()} /> -