diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/common/TaggLoadingIndicator.tsx | 25 | ||||
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 43 | ||||
| -rw-r--r-- | src/screens/profile/SocialMediaTaggs.tsx | 10 | ||||
| -rw-r--r-- | src/services/MomentServices.ts | 10 |
4 files changed, 47 insertions, 41 deletions
diff --git a/src/components/common/TaggLoadingIndicator.tsx b/src/components/common/TaggLoadingIndicator.tsx index c3c44bf9..d9143bd6 100644 --- a/src/components/common/TaggLoadingIndicator.tsx +++ b/src/components/common/TaggLoadingIndicator.tsx @@ -1,11 +1,23 @@ import * as React from 'react'; -import {Image, StyleSheet, View} from 'react-native'; +import {Image, Modal, StyleSheet, View} from 'react-native'; -type TaggLoadingIndicatorProps = { - color: string; -}; -const TaggLoadingIndicator: React.FC<TaggLoadingIndicatorProps> = ({color}) => { - return ( +interface TaggLoadingIndicatorProps { + fullscreen: boolean; +} + +const TaggLoadingIndicator: React.FC<TaggLoadingIndicatorProps> = ({ + fullscreen = false, +}) => { + return fullscreen ? ( + <Modal transparent> + <View style={[styles.container, styles.horizontal]}> + <Image + source={require('../../assets/gifs/loading-animation.gif')} + style={styles.icon} + /> + </View> + </Modal> + ) : ( <View style={[styles.container, styles.horizontal]}> <Image source={require('../../assets/gifs/loading-animation.gif')} @@ -19,6 +31,7 @@ const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', + backgroundColor: 'rgba(0,0,0,0.3)', }, horizontal: { flexDirection: 'row', diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index bc85d338..3d422e8a 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,7 +1,8 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React from 'react'; +import React, {Fragment, useState} from 'react'; import { + Alert, Image, Keyboard, KeyboardAvoidingView, @@ -15,6 +16,8 @@ import {useDispatch, useSelector} from 'react-redux'; import {MainStackParams} from 'src/routes'; import {SearchBackground, TaggBigInput} from '../../components'; import {CaptionScreenHeader} from '../../components/'; +import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; +import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; import {postMoment} from '../../services'; import { loadUserMoments, @@ -42,7 +45,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); - const [caption, setCaption] = React.useState(''); + const [caption, setCaption] = useState(''); + const [loading, setLoading] = useState(false); const handleCaptionUpdate = (caption: string) => { setCaption(caption); @@ -57,22 +61,24 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { }; const handleShare = async () => { - try { - const data = await postMoment( - image.filename, - image.path, - caption, - title, - userId, - ); - if (data) { - dispatch(loadUserMoments(userId)); - dispatch(updateProfileCompletionStage(data)); - navigateToProfile(); - } - } catch (err) { - console.log(err); - } + setLoading(true); + postMoment(image.filename, image.path, caption, title, userId).then( + (data) => { + setLoading(false); + if (data) { + dispatch(loadUserMoments(userId)); + dispatch(updateProfileCompletionStage(data)); + navigateToProfile(); + setTimeout(() => { + Alert.alert(SUCCESS_PIC_UPLOAD); + }, 500); + } else { + setTimeout(() => { + Alert.alert(ERROR_UPLOAD); + }, 500); + } + }, + ); }; return ( @@ -82,6 +88,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}> <View style={styles.contentContainer}> + {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />} <View style={styles.buttonsContainer}> <Button title="Cancel" diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx index 81d271d1..1b6bb389 100644 --- a/src/screens/profile/SocialMediaTaggs.tsx +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -1,13 +1,7 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; -import { - ActivityIndicator, - ScrollView, - StatusBar, - StyleSheet, - View, -} from 'react-native'; +import {ScrollView, StatusBar, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import { AvatarTitle, @@ -16,7 +10,7 @@ import { TaggPost, TwitterTaggPost, } from '../../components'; -import {AVATAR_GRADIENT, TAGG_DARK_BLUE} from '../../constants'; +import {AVATAR_GRADIENT} from '../../constants'; import {ProfileStackParams} from '../../routes'; import {SimplePostType, TwitterPostType, SocialAccountType} from '../../types'; import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils'; diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts index 514b674c..735f2ed2 100644 --- a/src/services/MomentServices.ts +++ b/src/services/MomentServices.ts @@ -6,11 +6,7 @@ import { MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT, } from '../constants'; -import { - ERROR_FAILED_TO_COMMENT, - ERROR_UPLOAD, - SUCCESS_PIC_UPLOAD, -} from '../constants/strings'; +import {ERROR_FAILED_TO_COMMENT} from '../constants/strings'; import {MomentType} from '../types'; import {checkImageUploadStatus} from '../utils'; @@ -139,14 +135,10 @@ export const postMoment: ( let statusCode = response.status; let data = await response.json(); if (statusCode === 200 && checkImageUploadStatus(data.moments)) { - Alert.alert(SUCCESS_PIC_UPLOAD); return data.profile_completion_stage; - } else { - Alert.alert(ERROR_UPLOAD); } } catch (err) { console.log(err); - Alert.alert(ERROR_UPLOAD); } return undefined; }; |