3 files changed, 80 insertions, 26 deletions

diff --git a/src/constants/api.ts b/src/constants/api.ts
index d52fc203..f02ee407 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -32,6 +32,7 @@ export const SEARCH_ENDPOINT_MESSAGES: string = API_URL + 'search/messages/';
 export const SEARCH_ENDPOINT_SUGGESTED: string = API_URL + 'search/suggested/';
 export const MOMENTS_ENDPOINT: string = API_URL + 'moments/';
 export const MOMENT_TAGS_ENDPOINT: string = API_URL + 'moments/tags/';
+export const MOMENTTAG_ENDPOINT: string = API_URL + 'moment-tag/';
 export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/';
 export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
 export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 2093a1f9..2fe30645 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} from '../../services';
+import {postMoment, postMomentTags} from '../../services';
 import {
   loadUserMoments,
   updateProfileCompletionStage,
@@ -85,27 +85,51 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   };
 
   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) {
       return;
     }
-    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);
-        }
-      },
+    const momentResponse = await postMoment(
+      image.filename,
+      image.path,
+      caption,
+      title,
+      userId,
+    );
+    if (!momentResponse) {
+      handleFailed();
+      return;
+    }
+    const momentTagResponse = await postMomentTags(
+      momentResponse.moment_id,
+      taggedUsers.map((u, index) => ({
+        x: index * 50 - 150,
+        y: index * 50 - 150,
+        user_id: u.id,
+      })),
+    );
+    if (!momentTagResponse) {
+      handleFailed();
+      return;
+    }
+    dispatch(loadUserMoments(userId));
+    dispatch(
+      updateProfileCompletionStage(momentResponse.profile_completion_stage),
     );
+    handleSuccess();
   };
 
   return (
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index a26a1abb..46b55066 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -2,24 +2,19 @@ import AsyncStorage from '@react-native-community/async-storage';
 import RNFetchBlob from 'rn-fetch-blob';
 import {
   MOMENTS_ENDPOINT,
+  MOMENTTAG_ENDPOINT,
   MOMENT_TAGS_ENDPOINT,
   MOMENT_THUMBNAIL_ENDPOINT,
 } from '../constants';
 import {MomentTagType, MomentType} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
-export const postMoment: (
+export const postMoment = async (
   fileName: string,
   uri: string,
   caption: string,
   category: string,
   userId: string,
-) => Promise<number | undefined> = async (
-  fileName,
-  uri,
-  caption,
-  category,
-  userId,
 ) => {
   try {
     const request = new FormData();
@@ -45,9 +40,13 @@ export const postMoment: (
       body: request,
     });
     let statusCode = response.status;
-    let data = await response.json();
+    let data: {
+      moments: any;
+      moment_id: string;
+      profile_completion_stage: number;
+    } = await response.json();
     if (statusCode === 200 && checkImageUploadStatus(data.moments)) {
-      return data.profile_completion_stage;
+      return data;
     }
   } catch (err) {
     console.log(err);
@@ -142,3 +141,33 @@ export const loadMomentTags = async (moment_id: string) => {
     return [];
   }
 };
+
+export const postMomentTags = async (
+  moment_id: string,
+  tags: {
+    x: number;
+    y: number;
+    user_id: string;
+  }[],
+) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const form = new FormData();
+    form.append('moment_id', moment_id);
+    form.append('tags', JSON.stringify(tags));
+    const response = await fetch(
+      MOMENTTAG_ENDPOINT + `?moment_id=${moment_id}`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: 'Token ' + token,
+        },
+        body: form,
+      },
+    );
+    return response.status === 201 || response.status === 200;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+};