From 73a77690fa1dd0737f0226e08b19001bc0d676a3 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 7 Jul 2021 17:39:19 -0400 Subject: Basic functionality --- src/components/common/MomentTags.tsx | 44 +++++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 8 deletions(-) (limited to 'src/components') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index d8a70353..36c87558 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -10,6 +10,13 @@ interface MomentTagsProps { setTags: (tag: MomentTagType[]) => void; imageRef: RefObject; deleteFromList?: (user: ProfilePreviewType) => void; + boundaries?: DraggableBoundaries; +} +interface DraggableBoundaries { + top?: number; + bottom?: number; + left?: number; + right?: number; } const MomentTags: React.FC = ({ @@ -18,11 +25,16 @@ const MomentTags: React.FC = ({ setTags, imageRef, deleteFromList, + boundaries, }) => { const [offset, setOffset] = useState([0, 0]); const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); const [draggableRefs, setDraggableRefs] = useState[]>([]); + const [minXBoundary, setMinXBoundary] = useState(0); + const [maxXBoundary, setMaxXBoundary] = useState(0); + const [minYBoundary, setMinYBoundary] = useState(0); + const [maxYBoundary, setMaxYBoundary] = useState(0); const updateTagPosition = (ref: RefObject, userId: string) => { if (ref !== null && ref.current !== null) { @@ -77,6 +89,22 @@ const MomentTags: React.FC = ({ }, ); } + + // Checks for and adds boundaries + if (boundaries) { + if (boundaries.top) { + setMinYBoundary(boundaries.top); + } + if (boundaries.bottom) { + setMaxYBoundary(boundaries.bottom); + } + if (boundaries.left) { + setMinXBoundary(boundaries.left); + } + if (boundaries.right) { + setMaxXBoundary(boundaries.right); + } + } }, editing ? 100 : 0, ); @@ -94,10 +122,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} + minX={offset[0] + minXBoundary} + minY={offset[1] + minYBoundary} + maxX={imageDimensions[0] + offset[0] - maxXBoundary} + maxY={imageDimensions[1] + offset[1] - maxYBoundary} onDragStart={() => { const currZIndex = maxZIndex; setMaxZIndex(currZIndex + 1); @@ -123,10 +151,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} + minX={offset[0] + minXBoundary} + minY={offset[1] + minYBoundary} + maxX={imageDimensions[0] + offset[0] - maxXBoundary} + maxY={imageDimensions[1] + offset[1] - maxYBoundary} disabled={true}> Date: Thu, 8 Jul 2021 16:53:46 -0400 Subject: Respond to comments, simplify boundaries, place calculations within useEffect --- ios/Podfile.lock | 4 +-- src/components/common/MomentTags.tsx | 26 +++++++++-------- src/screens/moments/TagFriendsScreen.tsx | 48 ++++++++++++++++++++++---------- 3 files changed, 49 insertions(+), 29 deletions(-) (limited to 'src/components') diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 19df8c81..82a5b8a8 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -455,7 +455,7 @@ PODS: - React-Core - React-RCTImage - TOCropViewController - - RNInAppBrowser (3.6.1): + - RNInAppBrowser (3.6.3): - React-Core - RNReactNativeHapticFeedback (1.11.0): - React-Core @@ -801,7 +801,7 @@ SPEC CHECKSUMS: RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32 RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584 - RNInAppBrowser: 0523b3c15501fb8b54b4f32905d2e71ca902d914 + RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357 RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285 RNReanimated: b9c929bfff7dedc9c89ab1875f1c6151023358d9 RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 36c87558..62b551f0 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -31,10 +31,8 @@ const MomentTags: React.FC = ({ const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); const [draggableRefs, setDraggableRefs] = useState[]>([]); - const [minXBoundary, setMinXBoundary] = useState(0); - const [maxXBoundary, setMaxXBoundary] = useState(0); - const [minYBoundary, setMinYBoundary] = useState(0); - const [maxYBoundary, setMaxYBoundary] = useState(0); + // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary] + const [boundariesList, setBoundariesList] = useState([0, 0, 0, 0]); const updateTagPosition = (ref: RefObject, userId: string) => { if (ref !== null && ref.current !== null) { @@ -92,18 +90,22 @@ const MomentTags: React.FC = ({ // Checks for and adds boundaries if (boundaries) { + console.log(boundaries); + const newBounds = [...boundariesList]; if (boundaries.top) { - setMinYBoundary(boundaries.top); + newBounds[2] = boundaries.top; } if (boundaries.bottom) { - setMaxYBoundary(boundaries.bottom); + newBounds[3] = boundaries.bottom; } if (boundaries.left) { - setMinXBoundary(boundaries.left); + newBounds[0] = boundaries.left; } if (boundaries.right) { - setMaxXBoundary(boundaries.right); + newBounds[1] = boundaries.right; } + console.log(newBounds); + setBoundariesList(newBounds); } }, editing ? 100 : 0, @@ -122,10 +124,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0] + minXBoundary} - minY={offset[1] + minYBoundary} - maxX={imageDimensions[0] + offset[0] - maxXBoundary} - maxY={imageDimensions[1] + offset[1] - maxYBoundary} + minX={offset[0] + boundariesList[0]} + minY={offset[1] + boundariesList[2]} + maxX={imageDimensions[0] + offset[0] - boundariesList[1]} + maxY={imageDimensions[1] + offset[1] - boundariesList[3]} onDragStart={() => { const currZIndex = maxZIndex; setMaxZIndex(currZIndex + 1); diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 1852e6a6..5c3501bb 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -38,19 +38,8 @@ const TagFriendsScreen: React.FC = ({route}) => { const [tags, setTags] = useState([]); const [imageWidth, setImageWidth] = useState(0); const [imageHeight, setImageHeight] = useState(0); - - // Calculate boundary (if any) for drag from bottom - let bottomBound; - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { - bottomBound = SCREEN_HEIGHT * 0.15; - } else { - bottomBound = - SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2); - } - } else { - bottomBound = 0; - } + const [bottomBound, setBottomBound] = useState(0); + const [topBound, setTopBound] = useState(0); /* * Update list of tagged users from route params @@ -104,6 +93,21 @@ const TagFriendsScreen: React.FC = ({route}) => { } }; + /* + * Calculate boundary (if any) for drag from bottom + */ + useEffect(() => { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setBottomBound(SCREEN_HEIGHT * 0.15); + } else { + setBottomBound( + SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2), + ); + } + } + }, [imageHeight, imageWidth]); + /* * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. */ @@ -171,7 +175,21 @@ const TagFriendsScreen: React.FC = ({route}) => { )} - + { + const {_x, y, _width, height} = event.nativeEvent.layout; + const tempBound = y + height; + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setTopBound(tempBound + 15); + } else { + setTopBound( + tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15, + ); + } + } + }}> { navigation.goBack(); @@ -218,7 +236,7 @@ const TagFriendsScreen: React.FC = ({route}) => { deleteFromList={(user) => setTags(tags.filter((tag) => tag.user.id !== user.id)) } - boundaries={{bottom: bottomBound}} + boundaries={{top: topBound, bottom: bottomBound}} /> )} {tags.length !== 0 && ( -- cgit v1.2.3-70-g09d2 From 9acc152bb1aa7dabdd846ec7fb9a508ace41c9ce Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 8 Jul 2021 17:06:22 -0400 Subject: Fix lint --- src/components/common/MomentTags.tsx | 8 ++++---- src/screens/moments/TagFriendsScreen.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 62b551f0..6ea76508 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -153,10 +153,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0] + minXBoundary} - minY={offset[1] + minYBoundary} - maxX={imageDimensions[0] + offset[0] - maxXBoundary} - maxY={imageDimensions[1] + offset[1] - maxYBoundary} + minX={offset[0] + boundariesList[0]} + minY={offset[1] + boundariesList[2]} + maxX={imageDimensions[0] + offset[0] - boundariesList[1]} + maxY={imageDimensions[1] + offset[1] - boundariesList[3]} disabled={true}> = ({route}) => { { - const {_x, y, _width, height} = event.nativeEvent.layout; + const {y, height} = event.nativeEvent.layout; const tempBound = y + height; if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { -- cgit v1.2.3-70-g09d2 From e62ba8ca223d92f662016445264030d28009288f Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 8 Jul 2021 17:22:56 -0400 Subject: Fixed boundaries --- src/components/common/MomentTags.tsx | 2 -- src/screens/moments/TagFriendsScreen.tsx | 26 ++++++++++++++------------ 2 files changed, 14 insertions(+), 14 deletions(-) (limited to 'src/components') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 6ea76508..37069e18 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -90,7 +90,6 @@ const MomentTags: React.FC = ({ // Checks for and adds boundaries if (boundaries) { - console.log(boundaries); const newBounds = [...boundariesList]; if (boundaries.top) { newBounds[2] = boundaries.top; @@ -104,7 +103,6 @@ const MomentTags: React.FC = ({ if (boundaries.right) { newBounds[1] = boundaries.right; } - console.log(newBounds); setBoundariesList(newBounds); } }, diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 983b1be3..6c982936 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -38,6 +38,7 @@ const TagFriendsScreen: React.FC = ({route}) => { const [imageWidth, setImageWidth] = useState(0); const [imageHeight, setImageHeight] = useState(0); const [bottomBound, setBottomBound] = useState(0); + const [topHeight, setTopHeight] = useState(0); const [topBound, setTopBound] = useState(0); /* @@ -77,9 +78,10 @@ const TagFriendsScreen: React.FC = ({route}) => { }; /* - * Calculate boundary (if any) for drag from bottom + * Calculate boundary (if any) for drag from bottom and top */ useEffect(() => { + // Bottom dead zone if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { setBottomBound(SCREEN_HEIGHT * 0.15); @@ -89,7 +91,16 @@ const TagFriendsScreen: React.FC = ({route}) => { ); } } - }, [imageHeight, imageWidth]); + + // Top dead zone + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < topHeight) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setTopBound(topHeight + 15); + } else { + setTopBound(topHeight - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15); + } + } + }, [imageHeight, imageWidth, topHeight]); /* * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. @@ -162,16 +173,7 @@ const TagFriendsScreen: React.FC = ({route}) => { style={styles.titleContainer} onLayout={(event) => { const {y, height} = event.nativeEvent.layout; - const tempBound = y + height; - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { - setTopBound(tempBound + 15); - } else { - setTopBound( - tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15, - ); - } - } + setTopHeight(y + height); }}> { -- cgit v1.2.3-70-g09d2 From 8ddc908e549fd47ad096d9d621ddb2a2d6218a26 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Jul 2021 08:27:16 -0700 Subject: Resize moment thumbnail on notifications --- src/components/notifications/Notification.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index fd1b11ac..946f2164 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -314,7 +314,11 @@ const Notification: React.FC = (props) => { - + )} @@ -357,8 +361,9 @@ const styles = StyleSheet.create({ lineHeight: normalize(14.32), }, moment: { - height: normalize(42), - width: normalize(42), + height: normalize(72), + width: normalize(40), + backgroundColor: 'black', }, buttonsContainer: { height: '80%', -- 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/components') 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 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/components') 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/components') 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 2fa0b4fb6da8cf5dd4b87174f438e90a08dffe84 Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/components') 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 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/components') 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/components') 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/components') 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/components') 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()} /> -