Merge pull request #191 from IvanIFChen/tma493-new-loading-indicator

[TMA-493] New Loading Indicator

1 files changed, 25 insertions, 18 deletions

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