From 1c03e73ca473184603fbf653ddfa3aa2e2eccdef Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 19 Jan 2021 10:28:27 -0500
Subject: redesigned tagg loading indicator, added indicator to image upload

---
 src/screens/profile/CaptionScreen.tsx | 43 ++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 18 deletions(-)

(limited to 'src/screens/profile/CaptionScreen.tsx')

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"
-- 
cgit v1.2.3-70-g09d2


From abbf0e15b860a503941223b21f38791409906d83 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 19 Jan 2021 11:05:44 -0500
Subject: added loading for edit profile

---
 src/screens/profile/CaptionScreen.tsx |  2 +-
 src/screens/profile/EditProfile.tsx   | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

(limited to 'src/screens/profile/CaptionScreen.tsx')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 3d422e8a..91aaa617 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -83,12 +83,12 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
 
   return (
     <SearchBackground>
+      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           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/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}
-- 
cgit v1.2.3-70-g09d2

