4 files changed, 135 insertions, 10 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
new file mode 100644
index 00000000..7149a5b4
--- /dev/null
+++ b/src/components/moments/MomentPost.tsx
@@ -0,0 +1,122 @@
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {useSelector} from 'react-redux';
+import {MomentPostContent, MomentPostHeader} from '.';
+import {deleteMomentTag, loadMomentTags} from '../../services';
+import {RootState} from '../../store/rootReducer';
+import {MomentTagType, MomentType, ScreenType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+
+interface MomentPostProps {
+  item: MomentType;
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+
+const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9;
+
+const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => {
+  const {userId: loggedInUserId, username: loggedInUsername} = useSelector(
+    (state: RootState) => state.user.user,
+  );
+
+  const {
+    user: {username},
+  } = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
+  const [tags, setTags] = useState<MomentTagType[]>([]);
+  const [momentTagId, setMomentTagId] = useState<string>('');
+
+  const isOwnProfile = username === loggedInUsername;
+
+  const loadTags = async () => {
+    const response = await loadMomentTags(item.moment_id);
+    setTags(response ? response : []);
+  };
+
+  /*
+   * Load tags on initial render to pass tags data to moment header and content
+   */
+  useEffect(() => {
+    loadTags();
+  }, []);
+
+  /*
+   * Check if loggedInUser has been tagged in the picture and set the id
+   */
+  useEffect(() => {
+    const getMomentTagId = () => {
+      const ownTag: MomentTagType[] = tags.filter(
+        (tag) => tag.user.id === loggedInUserId,
+      );
+      if (ownTag?.length > 0) {
+        setMomentTagId(ownTag[0].id);
+      } else {
+        setMomentTagId('');
+      }
+    };
+    getMomentTagId();
+  }, [tags]);
+
+  /*
+   * Remove tag and update the current tags
+   */
+  const removeTag = async () => {
+    const success = await deleteMomentTag(momentTagId);
+    if (success) {
+      const filteredTags = tags.filter((tag) => tag.user.id !== loggedInUserId);
+      setTags(filteredTags);
+    }
+  };
+
+  return (
+    <View style={styles.postContainer}>
+      <MomentPostHeader
+        userXId={userXId}
+        screenType={screenType}
+        username={isOwnProfile ? loggedInUsername : username}
+        momentId={item.moment_id}
+        style={styles.postHeader}
+        momentTagId={momentTagId}
+        removeTag={removeTag}
+      />
+      <MomentPostContent
+        style={styles.postContent}
+        momentId={item.moment_id}
+        caption={item.caption}
+        pathHash={item.moment_url}
+        dateTime={item.date_created}
+        screenType={screenType}
+        momentTags={tags}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    paddingTop: StatusBarHeight,
+    flex: 1,
+    paddingBottom: 0,
+  },
+  content: {
+    flex: 9,
+  },
+  header: {
+    flex: 1,
+  },
+  postContainer: {
+    height: ITEM_HEIGHT,
+    width: SCREEN_WIDTH,
+    flex: 1,
+  },
+  postHeader: {
+    flex: 1,
+  },
+  postContent: {flex: 9},
+});
+
+export default MomentPost;
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 56d317d7..f485396f 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {Easing} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
-import {getCommentsCount, loadMomentTags} from '../../services';
+import {getCommentsCount} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType, ScreenType, UserType} from '../../types';
 import {
@@ -24,6 +24,7 @@ interface MomentPostContentProps extends ViewProps {
   caption: string;
   pathHash: string;
   dateTime: string;
+  momentTags: MomentTagType[];
 }
 const MomentPostContent: React.FC<MomentPostContentProps> = ({
   screenType,
@@ -32,10 +33,11 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   pathHash,
   dateTime,
   style,
+  momentTags,
 }) => {
   const [elapsedTime, setElapsedTime] = useState('');
   const [comments_count, setCommentsCount] = useState('');
-  const [tags, setTags] = useState<MomentTagType[]>([]);
+  const [tags, setTags] = useState<MomentTagType[]>(momentTags);
   const [visible, setVisible] = useState(false);
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
@@ -49,14 +51,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   );
 
   useEffect(() => {
-    const loadTags = async () => {
-      const response = await loadMomentTags(momentId);
-      if (response) {
-        setTags(response);
-      }
-    };
-    loadTags();
-  }, []);
+    setTags(momentTags);
+  }, [momentTags]);
 
   useEffect(() => {
     const fetchCommentsCount = async () => {
diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
index 3c3ee4c3..dc6a3cd9 100644
--- a/src/components/moments/MomentPostHeader.tsx
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -20,6 +20,8 @@ interface MomentPostHeaderProps extends ViewProps {
   screenType: ScreenType;
   username: string;
   momentId: string;
+  momentTagId: string;
+  removeTag: () => Promise<void>;
 }
 
 const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
@@ -28,6 +30,8 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
   username,
   momentId,
   style,
+  momentTagId,
+  removeTag,
 }) => {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const dispatch = useDispatch();
@@ -66,6 +70,8 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
         setIsOpen={setDrawerVisible}
         momentId={momentId}
         isOwnProfile={isOwnProfile}
+        momentTagId={momentTagId}
+        removeTag={removeTag}
         dismissScreenAndUpdate={() => {
           dispatch(loadUserMoments(loggedInUserId));
           navigation.pop();
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index 6af29bc5..c1419cfd 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -4,3 +4,4 @@ export {default as MomentPostHeader} from './MomentPostHeader';
 export {default as MomentPostContent} from './MomentPostContent';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
+export {default as MomentPost} from './MomentPost';