Style error and done state

3 files changed, 59 insertions, 12 deletions

diff --git a/src/assets/images/green-check.png b/src/assets/images/green-check.png
new file mode 100644
index 00000000..c8680c53
--- /dev/null
+++ b/src/assets/images/green-check.png
diff --git a/src/assets/images/white-x.png b/src/assets/images/white-x.png
new file mode 100644
index 00000000..17f0c50a
--- /dev/null
+++ b/src/assets/images/white-x.png
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index afda16e2..0c93ea95 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {Image, StyleSheet, Text} from 'react-native';
 import {View} from 'react-native-animatable';
 import {
   cancelAnimation,
@@ -7,7 +7,6 @@ import {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {checkMomentUploadFinished} from '../../services';
 import {loadUserMoments} from '../../store/actions';
@@ -111,11 +110,16 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
     }, [momentUploadProgressBar?.status]);
 
     useEffect(() => {
-      if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) {
+      if (
+        momentUploadProgressBar?.status === MomentUploadStatusType.Done ||
+        momentUploadProgressBar?.status === MomentUploadStatusType.Error
+      ) {
         progress.value = 0;
         // clear this component after a duration
         setTimeout(() => {
-          dispatch(loadUserMoments(loggedInUserId));
+          if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) {
+            dispatch(loadUserMoments(loggedInUserId));
+          }
           dispatch({
             type: setMomentUploadProgressBar.type,
             payload: {
@@ -131,8 +135,14 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
     }
 
     return (
-      <View style={styles.background}>
-        <SafeAreaView style={styles.container}>
+      <View
+        style={[
+          styles.background,
+          momentUploadProgressBar?.status === MomentUploadStatusType.Error
+            ? styles.redBackground
+            : {},
+        ]}>
+        <View style={styles.container}>
           {showLoading && (
             <>
               <Text style={styles.text}>Uploading Moment...</Text>
@@ -140,12 +150,28 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
             </>
           )}
           {momentUploadProgressBar.status === MomentUploadStatusType.Done && (
-            <Text style={styles.text}>Done</Text>
+            <View style={styles.row}>
+              <Image
+                source={require('../../assets/images/green-check.png')}
+                style={styles.x}
+              />
+              <Text style={styles.text}>
+                Beautiful, the Moment was uploaded successfully!
+              </Text>
+            </View>
           )}
           {momentUploadProgressBar.status === MomentUploadStatusType.Error && (
-            <Text style={styles.text}>Error</Text>
+            <View style={styles.row}>
+              <Image
+                source={require('../../assets/images/white-x.png')}
+                style={styles.x}
+              />
+              <Text style={styles.whiteText}>
+                Unable to upload Moment. Please retry
+              </Text>
+            </View>
           )}
-        </SafeAreaView>
+        </View>
       </View>
     );
   };
@@ -154,24 +180,45 @@ const styles = StyleSheet.create({
   background: {
     position: 'absolute',
     zIndex: 999,
-    height: StatusBarHeight + 100,
+    height: StatusBarHeight + normalize(84),
     backgroundColor: 'white',
     width: '100%',
     alignItems: 'center',
   },
   container: {
-    justifyContent: 'space-evenly',
-    height: '100%',
+    justifyContent: 'center',
+    marginTop: StatusBarHeight,
+    height: normalize(84),
   },
   text: {
     fontSize: normalize(14),
     fontWeight: 'bold',
     lineHeight: 17,
     marginVertical: 12,
+    width: '80%',
   },
   bar: {
     width: SCREEN_WIDTH * 0.9,
   },
+  redBackground: {
+    backgroundColor: '#EA574C',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  whiteText: {
+    color: 'white',
+    fontSize: normalize(14),
+    fontWeight: 'bold',
+    lineHeight: 17,
+    marginVertical: 12,
+  },
+  x: {
+    width: normalize(26),
+    height: normalize(26),
+    marginRight: 10,
+  },
 });
 
 export default MomentUploadProgressBar;