Merge pull request #450 from shravyaramesh/tma885-remove-tag-drawer

[TMA-885] Remove tag bottom drawer

1 files changed, 122 insertions, 0 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;