From 63bef47bffd2893f3013a02f71383c9c0a27881f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 24 Jun 2021 18:20:15 -0400 Subject: Fix moment comment count, Add video support --- src/components/comments/CommentsCount.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx index 90514193..d4a93bdd 100644 --- a/src/components/comments/CommentsCount.tsx +++ b/src/components/comments/CommentsCount.tsx @@ -3,27 +3,32 @@ import React from 'react'; import {StyleSheet, Text} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import CommentsIcon from '../../assets/icons/moment-comment-icon.svg'; -import {MomentPostType, ScreenType} from '../../types'; +import {ScreenType} from '../../types'; import {normalize} from '../../utils'; interface CommentsCountProps { - moment: MomentPostType; + momentId: string; + count: number; screenType: ScreenType; } -const CommentsCount: React.FC = ({moment, screenType}) => { +const CommentsCount: React.FC = ({ + momentId, + count, + screenType, +}) => { const navigation = useNavigation(); return ( navigation.navigate('MomentCommentsScreen', { - moment_id: moment.moment_id, + moment_id: momentId, screenType, }) }> - {moment.comments_count} + {count} ); }; -- cgit v1.2.3-70-g09d2 From 7ad33344681b430feff9b00392bf6d8e9e1722e7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 25 Jun 2021 17:47:07 -0400 Subject: Remove unused styles, Fix comment navigation, Fix add comment --- src/components/comments/AddComment.tsx | 23 +---------------------- src/components/comments/CommentTextField.tsx | 26 ++++++++++++-------------- src/components/moments/MomentPost.tsx | 1 + 3 files changed, 14 insertions(+), 36 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 8a4ec082..33707d94 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -8,12 +8,11 @@ import { View, } from 'react-native'; import {useDispatch} from 'react-redux'; -import {TAGG_LIGHT_BLUE} from '../../constants'; import {CommentContext} from '../../screens/profile/MomentCommentsScreen'; import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; import {CommentThreadType, CommentType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; import {CommentTextField} from './CommentTextField'; import MentionInputControlled from './MentionInputControlled'; @@ -174,26 +173,6 @@ const styles = StyleSheet.create({ flex: 1, maxHeight: 100, }, - avatar: { - height: 35, - width: 35, - borderRadius: 30, - marginRight: 10, - marginLeft: '3%', - marginVertical: '2%', - alignSelf: 'flex-end', - }, - submitButton: { - height: 35, - width: 35, - backgroundColor: TAGG_LIGHT_BLUE, - borderRadius: 999, - justifyContent: 'center', - alignItems: 'center', - marginRight: '3%', - marginVertical: '2%', - alignSelf: 'flex-end', - }, whiteBackround: { backgroundColor: '#fff', }, diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx index 6e92329c..65a237e7 100644 --- a/src/components/comments/CommentTextField.tsx +++ b/src/components/comments/CommentTextField.tsx @@ -99,20 +99,18 @@ const CommentTextField: FC = ({ )} - {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( - - - - - - )} + + + + + {validateInput(keyboardText) && diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 70bea442..e55c93ba 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -396,6 +396,7 @@ const styles = StyleSheet.create({ }, commentsCountContainer: { position: 'absolute', + zIndex: 3, right: '2%', bottom: SCREEN_HEIGHT * 0.12, }, -- cgit v1.2.3-70-g09d2 From dcf45600b6e2be7820ed2d8c0f44603624f1e719 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 25 Jun 2021 18:01:41 -0400 Subject: Lint --- src/components/comments/CommentTextField.tsx | 19 +++++++------------ src/components/moments/MomentPost.tsx | 10 +--------- 2 files changed, 8 insertions(+), 21 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx index 65a237e7..6d86eb3f 100644 --- a/src/components/comments/CommentTextField.tsx +++ b/src/components/comments/CommentTextField.tsx @@ -1,8 +1,8 @@ import React, {FC, ReactFragment} from 'react'; import { NativeSyntheticEvent, - StyleSheet, StyleProp, + StyleSheet, Text, TextInput, TextInputSelectionChangeEventData, @@ -10,22 +10,21 @@ import { View, ViewStyle, } from 'react-native'; -import {useSelector} from 'react-redux'; -import {TAGG_LIGHT_BLUE} from '../../constants'; -import {RootState} from '../../store/rootReducer'; import { + MentionPartType, Part, PartType, - MentionPartType, } from 'react-native-controlled-mentions/dist/types'; import { defaultMentionTextStyle, isMentionPartType, } from 'react-native-controlled-mentions/dist/utils'; -import {Avatar} from '../common'; -import {normalize} from '../../utils'; - +import {useSelector} from 'react-redux'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {RootState} from '../../store/rootReducer'; +import {normalize} from '../../utils'; +import {Avatar} from '../common'; type CommentTextFieldProps = { containerStyle: StyleProp; @@ -40,8 +39,6 @@ type CommentTextFieldProps = { ) => null; parts: Part[]; addComment: () => any; - theme?: 'dark' | 'white'; - keyboardVisible?: boolean; comment?: string; }; @@ -56,8 +53,6 @@ const CommentTextField: FC = ({ handleSelectionChange, parts, addComment, - theme = 'white', - keyboardVisible = true, comment = '', ...textInputProps }) => { diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index e55c93ba..cb3a138b 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,13 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, { - createRef, - LegacyRef, - MutableRefObject, - useContext, - useEffect, - useRef, - useState, -} from 'react'; +import React, {useContext, useEffect, useRef, useState} from 'react'; import { Image, KeyboardAvoidingView, -- cgit v1.2.3-70-g09d2 From 3b7297189633cda8b886fa06f4b9d4787b6aa7c7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 30 Jun 2021 14:27:25 -0400 Subject: Clean up code, Remove tab bar logic to use modal style instead --- src/components/camera/GalleryIcon.tsx | 14 ++++++- src/components/comments/ZoomInCropper.tsx | 17 +-------- src/components/moments/Moment.tsx | 62 ++++--------------------------- src/routes/main/MainStackScreen.tsx | 14 +------ src/screens/moments/CameraScreen.tsx | 37 +++++------------- src/utils/camera.ts | 54 ++++++++++++++++----------- 6 files changed, 66 insertions(+), 132 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx index c49ace7d..bc8b1d41 100644 --- a/src/components/camera/GalleryIcon.tsx +++ b/src/components/camera/GalleryIcon.tsx @@ -23,7 +23,19 @@ export const GalleryIcon: React.FC = ({ const navigation = useNavigation(); return ( navigateToImagePicker(navigation, screenType, title)} + onPress={() => + navigateToImagePicker((pic) => + navigation.navigate('ZoomInCropper', { + screenType, + title, + media: { + filename: pic.filename, + uri: pic.path, + isVideo: false, + }, + }), + ) + } style={styles.saveButton}> {mostRecentPhotoUri !== '' ? ( = ({ const [y0, setY0] = useState(); const [y1, setY1] = useState(); - // Removes bottom navigation bar on current screen and add it back when navigating away - 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/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index b080ca4a..25d69fba 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -1,8 +1,9 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; +import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; import {Text} from 'react-native-animatable'; import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; +import ImagePicker from 'react-native-image-crop-picker'; import LinearGradient from 'react-native-linear-gradient'; import DeleteIcon from '../../assets/icons/delete-logo.svg'; import DownIcon from '../../assets/icons/down_icon.svg'; @@ -12,6 +13,7 @@ import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {MomentType, ScreenType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; +import {navigateToVideoPicker} from '../../utils/camera'; import MomentTile from './MomentTile'; interface MomentProps { @@ -53,59 +55,6 @@ const Moment: React.FC = ({ }, }); }; - /** - * This function opens the ImagePicker, only lets you select video files, - * formats the file extension, then makes a call to the server to get the presigned URL, - * after which it makes a POST request to the returned URL to upload the file directly to S3. - * params: none - * @returns: none - */ - const navigateToVideoPicker = () => { - ImagePicker.openPicker({ - mediaType: 'video', - }) - .then(async (vid) => { - console.log(vid); - if (vid.path) { - navigateToCaptionScreenForVideo(vid.path); - } - }) - .catch((err) => { - if (err.code && err.code !== 'E_PICKER_CANCELLED') { - Alert.alert(ERROR_UPLOAD); - } - }); - }; - - const navigateToImagePicker = () => { - ImagePicker.openPicker({ - smartAlbums: [ - 'Favorites', - 'RecentlyAdded', - 'SelfPortraits', - 'Screenshots', - 'UserLibrary', - ], - mediaType: 'any', - }) - .then((picture) => { - if (picture.path && picture.filename) { - navigation.navigate('ZoomInCropper', { - screenType, - title, - media: { - filename: picture.filename, - uri: picture.path, - isVideo: false, - }, - }); - } - }) - .catch((err) => { - if (err.code && err.code !== 'E_PICKER_CANCELLED') { - Alert.alert(ERROR_UPLOAD); - } - }); const navigateToCameraScreen = () => { navigation.navigate('CameraScreen', { title, @@ -153,7 +102,10 @@ const Moment: React.FC = ({ Alert.alert('Video Upload', 'pick one', [ { text: 'gallery', - onPress: navigateToVideoPicker, + onPress: () => + navigateToVideoPicker((vid) => + navigateToCaptionScreenForVideo(vid.path), + ), }, { text: 'camera (simulator will not work)', diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index f6adeab1..65a695f5 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -332,6 +332,7 @@ const MainStackScreen: React.FC = ({route}) => { name="ZoomInCropper" component={ZoomInCropper} options={{ + ...modalStyle, gestureEnabled: false, }} /> @@ -339,6 +340,7 @@ const MainStackScreen: React.FC = ({route}) => { name="CameraScreen" component={CameraScreen} options={{ + ...modalStyle, gestureEnabled: false, }} /> @@ -407,18 +409,6 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1.3), fontWeight: '700', }, - whiteHeaderTitle: { - fontSize: normalize(16), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'white', - }, - blackHeaderTitle: { - fontSize: normalize(16), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'black', - }, }); export default MainStackScreen; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index c6ed1116..1826f9d7 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -1,8 +1,8 @@ import CameraRoll from '@react-native-community/cameraroll'; import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; -import {RouteProp, useFocusEffect} from '@react-navigation/core'; +import {RouteProp} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {createRef, useCallback, useEffect, useState} from 'react'; +import React, {createRef, useEffect, useState} from 'react'; import {StyleSheet, TouchableOpacity, View} from 'react-native'; import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; @@ -36,22 +36,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { const [mostRecentPhoto, setMostRecentPhoto] = useState(''); const [showSaveButton, setShowSaveButton] = useState(false); - /* - * Removes bottom navigation bar on current screen and add it back when navigating away - */ - useFocusEffect( - useCallback(() => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: false, - }); - return () => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: true, - }); - }; - }, [navigation]), - ); - /* * Chooses the last picture from gallery to display as the gallery button icon */ @@ -75,9 +59,10 @@ const CameraScreen: React.FC = ({route, navigation}) => { navigation.navigate('CaptionScreen', { screenType, title, - image: { - filename: capturedImage, - path: capturedImage, + media: { + filename: 'dont have that info', + uri: capturedImage, + isVideo: false, // TODO: false for now }, }); }; @@ -116,7 +101,10 @@ const CameraScreen: React.FC = ({route, navigation}) => { )} - takePicture(cameraRef, setShowSaveButton, setCapturedImage) + takePicture(cameraRef, (pic) => { + setShowSaveButton(true); + setCapturedImage(pic.uri); + }) } style={styles.captureButtonContainer}> @@ -155,11 +143,6 @@ const styles = StyleSheet.create({ flexDirection: 'column', backgroundColor: 'black', }, - preview: { - flex: 1, - justifyContent: 'flex-end', - alignItems: 'center', - }, captureButtonContainer: { alignSelf: 'center', backgroundColor: 'transparent', diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 73461ad7..1ee5dbf4 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -1,9 +1,8 @@ import CameraRoll from '@react-native-community/cameraroll'; -import {Dispatch, RefObject, SetStateAction} from 'react'; +import {RefObject} from 'react'; import {Alert} from 'react-native'; -import {RNCamera} from 'react-native-camera'; -import ImagePicker from 'react-native-image-crop-picker'; -import {ScreenType} from 'src/types'; +import {RNCamera, TakePictureResponse} from 'react-native-camera'; +import ImagePicker, {Image, Video} from 'react-native-image-crop-picker'; import {ERROR_UPLOAD} from '../constants/strings'; /* @@ -11,8 +10,7 @@ import {ERROR_UPLOAD} from '../constants/strings'; */ export const takePicture = ( cameraRef: RefObject, - setShowSaveButton: Dispatch>, - setCapturedImage: Dispatch>, + callback: (pic: TakePictureResponse) => void, ) => { if (cameraRef !== null) { cameraRef.current?.pausePreview(); @@ -20,9 +18,8 @@ export const takePicture = ( forceUpOrientation: true, writeExif: false, }; - cameraRef.current?.takePictureAsync(options).then((response) => { - setShowSaveButton(true); - setCapturedImage(response.uri); + cameraRef.current?.takePictureAsync(options).then((pic) => { + callback(pic); }); } }; @@ -33,11 +30,7 @@ export const downloadImage = (capturedImageURI: string) => { .catch((_err) => Alert.alert('Failed to save to device!')); }; -export const navigateToImagePicker = ( - navigation: any, - screenType: ScreenType, - title: string, -) => { +export const navigateToImagePicker = (callback: (pic: Image) => void) => { ImagePicker.openPicker({ smartAlbums: [ 'Favorites', @@ -48,13 +41,32 @@ export const navigateToImagePicker = ( ], mediaType: 'photo', }) - .then((picture) => { - if ('path' in picture) { - navigation.navigate('ZoomInCropper', { - screenType, - title, - image: picture, - }); + .then((pic) => { + if (pic.path && pic.filename) { + callback(pic); + } + }) + .catch((err) => { + if (err.code && err.code !== 'E_PICKER_CANCELLED') { + Alert.alert(ERROR_UPLOAD); + } + }); +}; + +/** + * This function opens the ImagePicker, only lets you select video files, + * formats the file extension, then makes a call to the server to get the presigned URL, + * after which it makes a POST request to the returned URL to upload the file directly to S3. + * params: none + * @returns: none + */ +export const navigateToVideoPicker = (callback: (vid: Video) => void) => { + ImagePicker.openPicker({ + mediaType: 'video', + }) + .then(async (vid) => { + if (vid.path) { + callback(vid); } }) .catch((err) => { -- cgit v1.2.3-70-g09d2 From ba0ea15092e64929f2a3f9f88f3245e476dfcbe1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 30 Jun 2021 14:28:38 -0400 Subject: Clean up import --- src/components/comments/ZoomInCropper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/comments') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 2fc0fd44..cfd3cbbc 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; -import {default as React, useEffect, useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {Image, StyleSheet, TouchableOpacity} from 'react-native'; import {normalize} from 'react-native-elements'; import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom'; -- cgit v1.2.3-70-g09d2 From a8c210165938cfa4da7ed6bc185af297d528d2aa Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 30 Jun 2021 15:32:52 -0400 Subject: Remove filename requirement for all moment upload --- src/components/comments/ZoomInCropper.tsx | 17 +++++++++++++++-- src/components/moments/Moment.tsx | 2 -- src/routes/main/MainStackNavigator.tsx | 5 ++--- src/screens/moments/CameraScreen.tsx | 18 +++++++++++++++--- src/screens/profile/CaptionScreen.tsx | 16 ++++------------ src/services/MomentService.ts | 21 +++++++-------------- 6 files changed, 43 insertions(+), 36 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index cfd3cbbc..7fa88f6e 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -1,6 +1,7 @@ import {RouteProp} from '@react-navigation/core'; +import {useFocusEffect} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {Image, StyleSheet, TouchableOpacity} from 'react-native'; import {normalize} from 'react-native-elements'; import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom'; @@ -33,6 +34,19 @@ 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) { @@ -65,7 +79,6 @@ export const ZoomInCropper: React.FC = ({ screenType, title: title, media: { - filename: media.filename, uri: croppedURL, isVideo: false, }, diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index f057b329..50c60fd9 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -44,12 +44,10 @@ const Moment: React.FC = ({ const navigation = useNavigation(); const navigateToCaptionScreenForVideo = (uri: string) => { - const randHash = Math.random().toString(36).substring(7); navigation.navigate('CaptionScreen', { screenType, title, media: { - filename: `poc_${randHash}.mov`, uri, isVideo: true, }, diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 21430d7a..a5d73988 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -37,14 +37,13 @@ export type MainStackParams = { }; CaptionScreen: { title?: string; - media?: {filename: string; uri: string; isVideo: boolean}; + media?: {uri: string; isVideo: boolean}; screenType: ScreenType; selectedTags?: MomentTagType[]; moment?: MomentType; }; TagFriendsScreen: { media: { - filename: string; uri: string; isVideo: boolean; }; @@ -111,7 +110,7 @@ export type MainStackParams = { Chat: undefined; NewChatModal: undefined; ZoomInCropper: { - media: {filename: string; uri: string; isVideo: boolean}; + media: {uri: string; isVideo: boolean}; screenType: ScreenType; title: string; }; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index b3275764..104774c0 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -1,8 +1,9 @@ import CameraRoll from '@react-native-community/cameraroll'; import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp} from '@react-navigation/core'; +import {useFocusEffect} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {createRef, useEffect, useState} from 'react'; +import React, {createRef, useCallback, useEffect, useState} from 'react'; import {StyleSheet, TouchableOpacity, View} from 'react-native'; import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; @@ -36,6 +37,19 @@ const CameraScreen: React.FC = ({route, navigation}) => { const [mostRecentPhoto, setMostRecentPhoto] = useState(''); const [showSaveButton, setShowSaveButton] = useState(false); + useFocusEffect( + useCallback(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + return () => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); + }; + }, [navigation]), + ); + /* * Chooses the last picture from gallery to display as the gallery button icon */ @@ -61,7 +75,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { screenType, title, media: { - filename: 'dont have that info', uri: capturedImage, isVideo: false, // TODO: false for now }, @@ -131,7 +144,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { screenType, title, media: { - filename: pic.filename, uri: pic.path, isVideo: false, }, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 364b81a3..da3efb06 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -69,7 +69,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { selectedTags ? selectedTags : [], ); const [taggedList, setTaggedList] = useState(''); - const mediaFilename = moment ? undefined : route.params.media!.filename; const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -138,7 +137,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleShare = async () => { setLoading(true); - if (moment || !mediaFilename || !title) { + if (moment || !title) { handleFailed(); return; } @@ -146,22 +145,16 @@ const CaptionScreen: React.FC = ({route, navigation}) => { let momentId; // separate upload logic for image/video if (isMediaAVideo) { - const presignedURL = await handlePresignedURL(mediaFilename, title); + const presignedURL = await handlePresignedURL(title); if (!presignedURL) { handleFailed(); return; } momentId = presignedURL.moment_id; // TODO: assume success for now - await handleVideoUpload(mediaFilename, mediaUri, presignedURL); + await handleVideoUpload(mediaUri, presignedURL); } else { - const momentResponse = await postMoment( - mediaFilename, - mediaUri, - caption, - title, - userId, - ); + const momentResponse = await postMoment(mediaUri, caption, title, userId); if (!momentResponse) { handleFailed(); return; @@ -252,7 +245,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onPress={() => navigation.navigate('TagFriendsScreen', { media: { - filename: mediaFilename ?? '', uri: mediaUri, isVideo: isMediaAVideo, }, diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index b274ef04..ad0b0042 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -6,6 +6,7 @@ import { MOMENT_TAGS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT, PRESIGNED_URL_ENDPOINT, + RADIO_BUTTON_GREY, TAGG_CUSTOMER_SUPPORT, } from '../constants'; import { @@ -16,7 +17,6 @@ import {MomentPostType, MomentTagType, PresignedURLResponse} from '../types'; import {checkImageUploadStatus} from '../utils'; export const postMoment = async ( - fileName: string, uri: string, caption: string, category: string, @@ -25,13 +25,9 @@ export const postMoment = async ( try { const request = new FormData(); - //Manipulating filename to end with .jpg instead of .heic - if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) { - fileName = fileName.split('.')[0] + '.jpg'; - } request.append('image', { uri: uri, - name: fileName, + name: 'moment.jpg', // we don't care about filename, anything works type: 'image/jpg', }); request.append('moment', category); @@ -219,14 +215,13 @@ export const deleteMomentTag = async (moment_tag_id: string) => { * This function makes a request to the server in order to provide the client with a presigned URL. * This is called first, in order for the client to directly upload a file to S3 * @param value: string | undefined - * @param filename: string | undefined * @returns a PresignedURLResponse object */ -export const handlePresignedURL = async ( - filename: string | undefined, - momentCategory: string, -) => { +export const handlePresignedURL = async (momentCategory: string) => { try { + // TODO: just a random filename for video poc, we should not need to once complete + const randHash = Math.random().toString(36).substring(7); + const filename = `[pc_${randHash}].mov`; const token = await AsyncStorage.getItem('token'); const response = await fetch(PRESIGNED_URL_ENDPOINT, { method: 'POST', @@ -260,13 +255,11 @@ export const handlePresignedURL = async ( /** * This util function takes in the file object and the PresignedURLResponse object, creates form data from the latter, * and makes a post request to the presigned URL, sending the file object inside of the form data. - * @param filename: the filename * @param filePath: the path to the file, including filename * @param urlObj PresignedURLResponse | undefined * @returns responseURL or boolean */ export const handleVideoUpload = async ( - filename: string, filePath: string, urlObj: PresignedURLResponse | undefined, ) => { @@ -297,7 +290,7 @@ export const handleVideoUpload = async ( uri: filePath, // other types such as 'quicktime' 'image' etc exist, and we can programmatically type this, but for now sticking with simple 'video' type: 'video', - name: filename, + name: 'moment.mov', // we don't care about filename, anything works }); const response = await fetch(urlObj.response_url.url, { method: 'POST', -- cgit v1.2.3-70-g09d2