From 494677881ac50438af19009b5996cb8548026d61 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 21 May 2021 19:33:48 -0400
Subject: Add MomentTagType, Add logic to fetch tags for each moment

---
 src/components/moments/MomentPostContent.tsx | 22 +++++++++++++++-----
 src/screens/profile/IndividualMoment.tsx     | 18 -----------------
 src/services/MomentService.ts                | 30 ++++++++++++++++++++++++++--
 src/types/types.ts                           |  8 ++++++++
 4 files changed, 53 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 193bf40c..9a174e73 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,10 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
 import {useDispatch, useStore} from 'react-redux';
-import {getCommentsCount} from '../../services';
+import {getCommentsCount, loadMomentTags} from '../../services';
+import {userMomentsFetched} from '../../store/reducers';
 import {RootState} from '../../store/rootReducer';
-import {ScreenType, UserType} from '../../types';
+import {MomentTagType, ScreenType, UserType} from '../../types';
 import {
   getTimePosted,
   navigateToProfile,
@@ -30,12 +31,23 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   dateTime,
   style,
 }) => {
-  const [elapsedTime, setElapsedTime] = React.useState<string>();
-  const [comments_count, setCommentsCount] = React.useState('');
+  const [elapsedTime, setElapsedTime] = useState('');
+  const [comments_count, setCommentsCount] = useState('');
+  const [tags, setTags] = useState<MomentTagType[]>([]);
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    const loadTags = async () => {
+      const response = await loadMomentTags(momentId);
+      if (response) {
+        setTags(response);
+      }
+    };
+    loadTags();
+  }, []);
+
   useEffect(() => {
     const fetchCommentsCount = async () => {
       const count = await getCommentsCount(momentId, false);
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 0c50a642..4baca5b2 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -57,24 +57,6 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
 
-  const loadMomentTags = async () => {
-    try {
-      const token = await AsyncStorage.getItem('token');
-      const response = await fetch(MOMENT_TAGS_ENDPOINT + `/${moment_id}/`, {
-        method: 'GET',
-        headers: {
-          Authorization: 'Token ' + token,
-        },
-      });
-      const status = response.status;
-      if (status === 201) {
-        //create TaggDraggables with
-      }
-    } catch (error) {
-      Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
-    }
-  };
-
   const renderMomentPost = ({item}: {item: MomentType}) => (
     <View style={styles.postContainer}>
       <MomentPostHeader
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index 2354d18e..a26a1abb 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -1,7 +1,11 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import RNFetchBlob from 'rn-fetch-blob';
-import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
-import {MomentType} from '../types';
+import {
+  MOMENTS_ENDPOINT,
+  MOMENT_TAGS_ENDPOINT,
+  MOMENT_THUMBNAIL_ENDPOINT,
+} from '../constants';
+import {MomentTagType, MomentType} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
 export const postMoment: (
@@ -116,3 +120,25 @@ export const loadMomentThumbnail = async (momentId: string) => {
     return undefined;
   }
 };
+
+export const loadMomentTags = async (moment_id: string) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const response = await fetch(
+      MOMENT_TAGS_ENDPOINT + `?moment_id=${moment_id}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: 'Token ' + token,
+        },
+      },
+    );
+    if (response.status === 200) {
+      const tags: MomentTagType[] = await response.json();
+      return tags;
+    }
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index e1935d26..1b4b7ecf 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -117,6 +117,14 @@ export interface MomentType {
   moment_url: string;
   thumbnail_url: string;
 }
+
+export interface MomentTagType {
+  id: string;
+  user: ProfilePreviewType;
+  x: number;
+  y: number;
+}
+
 export interface CommentBaseType {
   comment_id: string;
   comment: string;
-- 
cgit v1.2.3-70-g09d2