redesigned tagg loading indicator, added indicator to image upload

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;
 };