From 753ccae8ac402d0956ea855a5fbcbd60b90280f1 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Mon, 21 Jun 2021 13:48:12 -0700
Subject: Add touch to reveal tags on entire image

---
 src/components/moments/MomentPost.tsx | 195 ++++++++++++++--------------------
 1 file changed, 81 insertions(+), 114 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 10c3b711..73c34d39 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -171,14 +171,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   return (
     <>
       <StatusBar barStyle={'light-content'} />
-      <View
-        style={{
-          backgroundColor: 'black',
-          width: SCREEN_WIDTH,
-          height: SCREEN_HEIGHT,
-          flexDirection: 'column',
-          justifyContent: 'center',
-        }}>
+      <View style={styles.mainContainer}>
         <Image
           source={{uri: moment.moment_url}}
           style={[
@@ -190,117 +183,91 @@ const MomentPost: React.FC<MomentPostProps> = ({
           resizeMode={'cover'}
           ref={imageRef}
         />
-        <View
-          style={{
-            position: 'absolute',
-            width: SCREEN_WIDTH,
-            height: SCREEN_HEIGHT,
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            paddingBottom: '24%',
-          }}>
-          <View
-            style={{
-              paddingTop: HeaderHeight,
-              alignSelf: 'flex-end',
-              paddingRight: '8%',
-            }}>
-            <MomentMoreInfoDrawer
-              isOpen={drawerVisible}
-              setIsOpen={setDrawerVisible}
-              isOwnProfile={isOwnProfile}
-              momentTagId={momentTagId}
-              removeTag={removeTag}
-              dismissScreenAndUpdate={() => {
-                dispatch(loadUserMoments(loggedInUserId));
-                navigation.goBack();
-              }}
-              screenType={screenType}
-              moment={moment}
+        {visible && (
+          <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
+            <MomentTags
+              editing={false}
               tags={tags}
+              setTags={() => null}
+              imageRef={imageRef}
             />
-          </View>
-          {visible && (
-            <Animated.View
-              style={[
-                {
-                  opacity: fadeValue,
-                  height: isFullScreen
-                    ? SCREEN_HEIGHT
-                    : SCREEN_WIDTH / aspectRatio,
-                  width: SCREEN_WIDTH,
-                  marginBottom: '3%',
-                },
-              ]}>
-              <MomentTags
-                editing={false}
+          </Animated.View>
+        )}
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setVisible(!visible);
+            setFadeValue(new Animated.Value(0));
+          }}>
+          <View style={styles.contentContainer}>
+            <View style={styles.topContainer}>
+              <MomentMoreInfoDrawer
+                isOpen={drawerVisible}
+                setIsOpen={setDrawerVisible}
+                isOwnProfile={isOwnProfile}
+                momentTagId={momentTagId}
+                removeTag={removeTag}
+                dismissScreenAndUpdate={() => {
+                  dispatch(loadUserMoments(loggedInUserId));
+                  navigation.goBack();
+                }}
+                screenType={screenType}
+                moment={moment}
                 tags={tags}
-                setTags={() => null}
-                imageRef={imageRef}
               />
-            </Animated.View>
-          )}
-          <KeyboardAvoidingView
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            keyboardVerticalOffset={-20}>
-            <View
-              style={{
-                flexDirection: 'column',
-                justifyContent: 'flex-end',
-              }}>
-              <TagsIcon />
-              <View
-                style={{
-                  position: 'absolute',
-                  right: '2%',
-                  bottom: SCREEN_HEIGHT * 0.12,
-                }}>
-                <CommentsCount moment={moment} screenType={screenType} />
-              </View>
-              <MomentPosterPreview />
-              {!hideText && (
-                <>
-                  {moment.caption !== '' &&
-                    renderTextWithMentions({
-                      value: moment.caption,
-                      styles: styles.captionText,
-                      partTypes: mentionPartTypes('white'),
-                      onPress: (user: UserType) =>
-                        navigateToProfile(
-                          state,
-                          dispatch,
-                          navigation,
-                          screenType,
-                          user,
-                        ),
-                    })}
-                </>
-              )}
-              <View>
-                <AddComment
-                  placeholderText={'Add a comment here!'}
-                  momentId={moment.moment_id}
-                  callback={(message) => {
-                    setCommentPreview({
-                      commenter: getLoggedInUserAsProfilePreview(state),
-                      comment: message,
-                    });
-                    setCommentCount(commentCount + 1);
-                  }}
-                  onFocus={() => {
-                    setHideText(true);
-                    setVerticalOffset(SCREEN_HEIGHT * 0.05);
-                  }}
-                  isKeyboardAvoiding={false}
-                  theme={'dark'}
-                />
-                <Text style={styles.text}>
-                  {getTimePosted(moment.date_created)}
-                </Text>
-              </View>
             </View>
-          </KeyboardAvoidingView>
-        </View>
+            <KeyboardAvoidingView
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+              keyboardVerticalOffset={-20}>
+              <View style={styles.bottomContainer}>
+                {tags.length > 0 && (
+                  <Image
+                    source={require('../../assets/icons/tag_indicate.png')}
+                    style={styles.tagIcon}
+                  />
+                )}
+                <View style={styles.commentsCountContainer}>
+                  <CommentsCount moment={moment} screenType={screenType} />
+                </View>
+                <MomentPosterPreview />
+                {!hideText && (
+                  <>
+                    {moment.caption !== '' &&
+                      renderTextWithMentions({
+                        value: moment.caption,
+                        styles: styles.captionText,
+                        partTypes: mentionPartTypes('white'),
+                        onPress: (user: UserType) =>
+                          navigateToProfile(
+                            state,
+                            dispatch,
+                            navigation,
+                            screenType,
+                            user,
+                          ),
+                      })}
+                  </>
+                )}
+                <View>
+                  <AddComment
+                    placeholderText={'Add a comment here!'}
+                    momentId={moment.moment_id}
+                    callback={() => {
+                      setCommentCount(commentCount + 1);
+                    }}
+                    onFocus={() => {
+                      setHideText(true);
+                    }}
+                    isKeyboardAvoiding={false}
+                    theme={'dark'}
+                  />
+                  <Text style={styles.text}>
+                    {getTimePosted(moment.date_created)}
+                  </Text>
+                </View>
+              </View>
+            </KeyboardAvoidingView>
+          </View>
+        </TouchableWithoutFeedback>
       </View>
     </>
   );
-- 
cgit v1.2.3-70-g09d2