Add tagged users drawer component

1 files changed, 18 insertions, 4 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e789a9bf..5dba5e69 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -15,6 +15,7 @@ import {
 import Animated, {EasingNode} from 'react-native-reanimated';
 import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
+import {TaggedUsersDrawer} from '.';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
@@ -61,6 +62,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [visible, setVisible] = useState(false);
   const [drawerVisible, setDrawerVisible] = useState(false);
+  const [taggedUsersVisible, setTaggedUsersVisible] = useState(false);
   const [hideText, setHideText] = useState(false);
 
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
@@ -199,6 +201,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
   return (
     <>
       <StatusBar barStyle={'light-content'} />
+      <TaggedUsersDrawer
+        users={tags.map((tag) => tag.user)}
+        isOpen={taggedUsersVisible}
+        setIsOpen={setTaggedUsersVisible}
+      />
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
           {isVideo ? (
@@ -249,6 +256,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
           </Animated.View>
         )}
         <TouchableWithoutFeedback
+          disabled={isVideo}
           onPress={() => {
             setVisible(!visible);
             setFadeValue(new Animated.Value(0));
@@ -276,10 +284,16 @@ const MomentPost: React.FC<MomentPostProps> = ({
               keyboardVerticalOffset={-20}>
               <View style={styles.bottomContainer}>
                 {tags.length > 0 && (
-                  <Image
-                    source={require('../../assets/icons/tag_indicate.png')}
-                    style={styles.tagIcon}
-                  />
+                  <TouchableOpacity
+                    disabled={!isVideo}
+                    onPress={() =>
+                      setTaggedUsersVisible((prevState) => !prevState)
+                    }>
+                    <Image
+                      source={require('../../assets/icons/tag_indicate.png')}
+                      style={styles.tagIcon}
+                    />
+                  </TouchableOpacity>
                 )}
                 <View style={styles.commentsCountContainer}>
                   <CommentsCount