Add component for individual moment

2 files changed, 118 insertions, 0 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
new file mode 100644
index 00000000..804d089f
--- /dev/null
+++ b/src/components/moments/MomentPost.tsx
@@ -0,0 +1,117 @@
+import React, {useEffect, useState} from 'react';
+import {Alert, 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(() => {
+    tags.forEach((tag) => {
+      if (tag.user.id === loggedInUserId) {
+        setMomentTagId(tag.id);
+      }
+    });
+  }, [tags]);
+
+  /*
+   * Remove tag and update the current tags
+   */
+  const removeTag = async () => {
+    const success = await deleteMomentTag(momentTagId);
+    Alert.alert(success ? 'Success' : 'Failed');
+    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/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';