Add edit moment functionality to caption screen

3 files changed, 94 insertions, 32 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index c8bca9f4..570c3776 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -30,7 +30,7 @@ interface TagFriendsScreenProps {
   route: TagFriendsScreenRouteProps;
 }
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
-  const {image, selectedTags} = route.params;
+  const {imagePath, selectedTags} = route.params;
   const navigation = useNavigation();
   const imageRef = useRef(null);
   const [tags, setTags] = useState<MomentTagType[]>([]);
@@ -85,7 +85,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               <Image
                 ref={imageRef}
                 style={styles.image}
-                source={{uri: image.path}}
+                source={{uri: imagePath}}
                 resizeMode={'cover'}
               />
             </TouchableWithoutFeedback>
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8bffd82b..949b61fd 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -23,7 +23,7 @@ import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {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 +47,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 +86,32 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     });
   };
 
+  const handleFailed = () => {
+    setLoading(false);
+    setTimeout(() => {
+      Alert.alert(moment ? 'Error editing moment' : ERROR_UPLOAD);
+    }, 500);
+  };
+  const handleSuccess = () => {
+    setLoading(false);
+    navigateToProfile();
+    setTimeout(() => {
+      Alert.alert(moment ? 'Successfully edited moment!' : 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 () => {
-    const handleFailed = () => {
-      setLoading(false);
-      setTimeout(() => {
-        Alert.alert(ERROR_UPLOAD);
-      }, 500);
-    };
-    const handleSuccess = () => {
-      setLoading(false);
-      navigateToProfile();
-      setTimeout(() => {
-        Alert.alert(SUCCESS_PIC_UPLOAD);
-      }, 500);
-    };
     setLoading(true);
-    if (!image.filename) {
+    if (!image?.filename || !title) {
       return;
     }
     const momentResponse = await postMoment(
@@ -115,12 +127,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 +140,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 />}
@@ -148,17 +172,20 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 onPress={() => 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 +199,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,
                 })
               }
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index af602dc7..c66d2786 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -54,6 +54,38 @@ export const postMoment = async (
   return undefined;
 };
 
+export const patchMoment = async (
+  momentId: string,
+  caption: string,
+  tags: {
+    x: number;
+    y: number;
+    z: number;
+    user_id: string;
+  }[],
+) => {
+  try {
+    const request = new FormData();
+    request.append('moment_id', momentId);
+    request.append('captions', JSON.stringify({[momentId]: caption}));
+    request.append('tags', JSON.stringify(tags));
+    const token = await AsyncStorage.getItem('token');
+    let response = await fetch(MOMENTS_ENDPOINT, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        Authorization: 'Token ' + token,
+      },
+      body: request,
+    });
+    let statusCode = response.status;
+    return statusCode === 200 || statusCode === 201;
+  } catch (err) {
+    console.log(err);
+  }
+  return false;
+};
+
 export const loadMoments: (
   userId: string,
   token: string,