aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/gifs/loading-animation.gifbin0 -> 285396 bytes
-rw-r--r--src/components/common/TaggLoadingIndicator.tsx40
-rw-r--r--src/screens/profile/CaptionScreen.tsx43
-rw-r--r--src/screens/profile/EditProfile.tsx17
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx10
-rw-r--r--src/services/MomentServices.ts10
6 files changed, 70 insertions, 50 deletions
diff --git a/src/assets/gifs/loading-animation.gif b/src/assets/gifs/loading-animation.gif
new file mode 100644
index 00000000..6a69b07b
--- /dev/null
+++ b/src/assets/gifs/loading-animation.gif
Binary files differ
diff --git a/src/components/common/TaggLoadingIndicator.tsx b/src/components/common/TaggLoadingIndicator.tsx
index cfb99e80..91c68622 100644
--- a/src/components/common/TaggLoadingIndicator.tsx
+++ b/src/components/common/TaggLoadingIndicator.tsx
@@ -1,27 +1,53 @@
import * as React from 'react';
-import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-type TaggLoadingIndicatorProps = {
- color: string;
-};
-const TaggLoadingIndicator: React.FC<TaggLoadingIndicatorProps> = ({color}) => {
+interface TaggLoadingIndicatorProps {
+ fullscreen: boolean;
+}
+
+const TaggLoadingIndicator: React.FC<TaggLoadingIndicatorProps> = ({
+ fullscreen = false,
+}) => {
return (
- <View style={[styles.container, styles.horizontal]}>
- <ActivityIndicator size="large" color={color} />
+ <View
+ style={[
+ fullscreen ? styles.fullscreen : {},
+ styles.container,
+ styles.horizontal,
+ ]}>
+ <Image
+ source={require('../../assets/gifs/loading-animation.gif')}
+ style={styles.icon}
+ />
</View>
);
};
const styles = StyleSheet.create({
+ fullscreen: {
+ zIndex: 999,
+ position: 'absolute',
+ height: SCREEN_HEIGHT,
+ width: SCREEN_WIDTH,
+ },
container: {
flex: 1,
justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'rgba(0,0,0,0.3)',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10,
},
+ icon: {
+ alignSelf: 'center',
+ justifyContent: 'center',
+ width: '40%',
+ aspectRatio: 2,
+ },
});
export default TaggLoadingIndicator;
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index bc85d338..91aaa617 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,26 +61,29 @@ 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 (
<SearchBackground>
+ {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 3fea14bf..3b3fa36e 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -1,6 +1,5 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
import {RouteProp} from '@react-navigation/native';
-import moment from 'moment';
import {StackNavigationProp} from '@react-navigation/stack';
import {
Text,
@@ -21,7 +20,6 @@ import {
TaggBigInput,
TaggInput,
TaggDropDown,
- BirthDatePicker,
TabsGradient,
SocialIcon,
} from '../../components';
@@ -46,6 +44,7 @@ import {
ERROR_UPLOAD_LARGE_PROFILE_PIC,
ERROR_UPLOAD_SMALL_PROFILE_PIC,
} from '../../constants/strings';
+import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
type EditProfileNavigationProp = StackNavigationProp<
ProfileStackParams,
@@ -72,6 +71,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
} = useSelector((state: RootState) => state.user);
const [needsUpdate, setNeedsUpdate] = useState(false);
+ const [loading, setLoading] = useState(false);
const dispatch = useDispatch();
useEffect(() => {
@@ -379,7 +379,10 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
title={'Save'}
buttonStyle={{backgroundColor: 'transparent'}}
titleStyle={{fontWeight: 'bold'}}
- onPress={handleSubmit}
+ onPress={() => {
+ setLoading(true);
+ handleSubmit().then(() => setLoading(false));
+ }}
/>
),
});
@@ -387,6 +390,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
return (
<Background centered gradientType={BackgroundGradientType.Light}>
+ {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
<SafeAreaView>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
@@ -444,9 +448,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
blurOnSubmit={false}
valid={form.isValidBio}
attemptedSubmit={form.attemptedSubmit}
- invalidWarning={
- 'Bio must be less than 150 characters'
- }
+ invalidWarning={'Bio must be less than 150 characters'}
width={280}
value={form.bio}
/>
@@ -477,7 +479,6 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
'Custom field can only contain letters and hyphens'
}
onChangeText={handleCustomGenderUpdate}
- onSubmitEditing={() => handleSubmit()}
placeholder="Enter your gender"
returnKeyType="done"
style={styles.customGenderInput}
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;
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:20:38 +0000