Merge branch 'master' into tma904-moment-comment-revamp

# Conflicts:
#	src/components/moments/MomentPost.tsx
#	src/components/moments/MomentPostContent.tsx
#	src/services/MomentService.ts

1 files changed, 69 insertions, 28 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8bffd82b..9e1b4674 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -21,9 +21,13 @@ import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
-import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
+import {
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+  ERROR_UPLOAD,
+  SUCCESS_PIC_UPLOAD,
+} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
-import {postMoment, postMomentTags} from '../../services';
+import {patchMoment, postMoment, postMomentTags} from '../../services';
 import {
   loadUserMoments,
   updateProfileCompletionStage,
@@ -47,14 +51,16 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType, selectedTags} = route.params;
+  const {title, image, screenType, selectedTags, moment} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
-  const [caption, setCaption] = useState('');
+  const [caption, setCaption] = useState(moment ? moment.caption : '');
   const [loading, setLoading] = useState(false);
-  const [tags, setTags] = useState<MomentTagType[]>([]);
+  const [tags, setTags] = useState<MomentTagType[]>(
+    selectedTags ? selectedTags : [],
+  );
   const [taggedList, setTaggedList] = useState<string>('');
 
   useEffect(() => {
@@ -84,22 +90,37 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     });
   };
 
-  const handleShare = async () => {
-    const handleFailed = () => {
-      setLoading(false);
-      setTimeout(() => {
-        Alert.alert(ERROR_UPLOAD);
-      }, 500);
-    };
-    const handleSuccess = () => {
+  const handleFailed = () => {
+    setLoading(false);
+    setTimeout(() => {
+      Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD);
+    }, 500);
+  };
+  const handleSuccess = () => {
+    setLoading(false);
+    if (moment) {
       setLoading(false);
+      navigation.goBack();
+    } else {
       navigateToProfile();
       setTimeout(() => {
         Alert.alert(SUCCESS_PIC_UPLOAD);
       }, 500);
-    };
+    }
+  };
+
+  const formattedTags = () => {
+    return tags.map((tag) => ({
+      x: Math.floor(tag.x),
+      y: Math.floor(tag.y),
+      z: Math.floor(tag.z),
+      user_id: tag.user.id,
+    }));
+  };
+
+  const handleShare = async () => {
     setLoading(true);
-    if (!image.filename) {
+    if (!image?.filename || !title) {
       return;
     }
     const momentResponse = await postMoment(
@@ -115,12 +136,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
     const momentTagResponse = await postMomentTags(
       momentResponse.moment_id,
-      tags.map((tag) => ({
-        x: Math.floor(tag.x),
-        y: Math.floor(tag.y),
-        z: Math.floor(tag.z),
-        user_id: tag.user.id,
-      })),
+      formattedTags(),
     );
     if (!momentTagResponse) {
       handleFailed();
@@ -133,6 +149,23 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     handleSuccess();
   };
 
+  const handleDone = async () => {
+    setLoading(true);
+    if (moment?.moment_id) {
+      const success = await patchMoment(
+        moment.moment_id,
+        caption,
+        formattedTags(),
+      );
+      if (success) {
+        dispatch(loadUserMoments(userId));
+        handleSuccess();
+      } else {
+        handleFailed();
+      }
+    }
+  };
+
   return (
     <SearchBackground>
       {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
@@ -145,20 +178,25 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               <Button
                 title="Cancel"
                 buttonStyle={styles.button}
-                onPress={() => navigateToProfile()}
+                onPress={() =>
+                  moment ? navigation.goBack() : navigateToProfile()
+                }
               />
               <Button
-                title="Share"
+                title={moment ? 'Done' : 'Share'}
                 titleStyle={styles.shareButtonTitle}
                 buttonStyle={styles.button}
-                onPress={handleShare}
+                onPress={moment ? handleDone : handleShare}
               />
             </View>
-            <CaptionScreenHeader style={styles.header} {...{title: title}} />
+            <CaptionScreenHeader
+              style={styles.header}
+              {...{title: moment ? moment.moment_category : title}}
+            />
             {/* this is the image we want to center our tags' initial location within */}
             <Image
               style={styles.image}
-              source={{uri: image.path}}
+              source={{uri: moment ? moment.moment_url : image?.path}}
               resizeMode={'cover'}
             />
             <MentionInput
@@ -172,8 +210,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <TouchableOpacity
               onPress={() =>
                 navigation.navigate('TagFriendsScreen', {
-                  image: image,
-                  screenType: screenType,
+                  imagePath: moment
+                    ? moment.moment_url
+                    : image
+                    ? image.path
+                    : '',
                   selectedTags: tags,
                 })
               }