Cleanup code, Separate components into parts, Cleanup styles, Use pinchable view

1 files changed, 141 insertions, 158 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 5dba5e69..843e049f 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -12,7 +12,10 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+// @ts-ignore
+import Pinchable from 'react-native-pinchable';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TaggedUsersDrawer} from '.';
@@ -24,8 +27,6 @@ import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
   getTimePosted,
-  HeaderHeight,
-  isIPhoneX,
   navigateToProfile,
   normalize,
   SCREEN_HEIGHT,
@@ -60,7 +61,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const isOwnProfile = user.username === loggedInUsername;
 
   const [tags, setTags] = useState<MomentTagType[]>([]);
-  const [visible, setVisible] = useState(false);
+  const [tagsVisible, setTagsVisible] = useState(false);
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [taggedUsersVisible, setTaggedUsersVisible] = useState(false);
   const [hideText, setHideText] = useState(false);
@@ -198,6 +199,35 @@ const MomentPost: React.FC<MomentPostProps> = ({
     [user.username],
   );
 
+  const momentMedia = isVideo ? (
+    <View ref={imageRef}>
+      <Video
+        ref={videoRef}
+        source={{
+          uri: moment.moment_url,
+        }}
+        volume={1}
+        style={{
+          height: mediaHeight,
+        }}
+        repeat={true}
+        onLoad={(response) => {
+          const {width, height} = response.naturalSize;
+          setAspectRatio(width / height);
+        }}
+        paused={moment.moment_id !== currentVisibleMomentId}
+      />
+    </View>
+  ) : (
+    <Image
+      source={{uri: moment.moment_url}}
+      style={{
+        height: mediaHeight,
+      }}
+      ref={imageRef}
+    />
+  );
+
   return (
     <>
       <StatusBar barStyle={'light-content'} />
@@ -206,157 +236,114 @@ const MomentPost: React.FC<MomentPostProps> = ({
         isOpen={taggedUsersVisible}
         setIsOpen={setTaggedUsersVisible}
       />
-      <View style={styles.mainContainer}>
-        <View style={styles.imageContainer}>
-          {isVideo ? (
-            <View ref={imageRef}>
-              <Video
-                ref={videoRef}
-                source={{
-                  uri: moment.moment_url,
-                }}
-                volume={1}
-                style={[
-                  styles.media,
-                  {
-                    height: mediaHeight,
-                  },
-                ]}
-                repeat={true}
-                resizeMode={'contain'}
-                onLoad={(response) => {
-                  const {width, height} = response.naturalSize;
-                  setAspectRatio(width / height);
-                }}
-                paused={moment.moment_id !== currentVisibleMomentId}
-              />
-            </View>
-          ) : (
-            <Image
-              source={{uri: moment.moment_url}}
-              style={[
-                styles.media,
-                {
-                  height: mediaHeight,
-                },
-              ]}
-              resizeMode={'contain'}
-              ref={imageRef}
-            />
-          )}
-        </View>
-        {visible && (
-          <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
-            <MomentTags
-              editing={false}
-              tags={tags}
-              setTags={() => null}
-              imageRef={imageRef}
-            />
-          </Animated.View>
-        )}
+      <SafeAreaView style={styles.moreInfoButton}>
+        <MomentMoreInfoDrawer
+          isOpen={drawerVisible}
+          setIsOpen={setDrawerVisible}
+          isOwnProfile={isOwnProfile}
+          momentTagId={momentTagId}
+          removeTag={removeTag}
+          dismissScreenAndUpdate={() => {
+            dispatch(loadUserMoments(loggedInUserId));
+            navigation.goBack();
+          }}
+          screenType={screenType}
+          moment={moment}
+          tags={tags}
+        />
+      </SafeAreaView>
+      <View style={styles.background}>
         <TouchableWithoutFeedback
-          disabled={isVideo}
           onPress={() => {
-            setVisible(!visible);
-            setFadeValue(new Animated.Value(0));
-            Keyboard.dismiss();
+            if (keyboardVisible) {
+              Keyboard.dismiss();
+            } else {
+              setTagsVisible(!tagsVisible);
+              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();
-                }}
+          <Pinchable>
+            <View style={styles.mediaContainer}>{momentMedia}</View>
+            {tagsVisible && !isVideo && (
+              <Animated.View
+                style={[styles.tagsContainer, {opacity: fadeValue}]}>
+                <MomentTags
+                  editing={false}
+                  tags={tags}
+                  setTags={() => null}
+                  imageRef={imageRef}
+                />
+              </Animated.View>
+            )}
+          </Pinchable>
+        </TouchableWithoutFeedback>
+        <View style={styles.bottomContainer} pointerEvents={'box-none'}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={-20}>
+            {tags.length > 0 && !keyboardVisible && (
+              <TouchableOpacity
+                style={styles.tagIconContainer}
+                disabled={!isVideo}
+                onPress={() =>
+                  setTaggedUsersVisible((prevState) => !prevState)
+                }>
+                <Image
+                  source={require('../../assets/icons/tag_indicate.png')}
+                  style={styles.tagIcon}
+                />
+              </TouchableOpacity>
+            )}
+            <View style={styles.commentsCountContainer}>
+              <CommentsCount
+                momentId={moment.moment_id}
+                count={commentCount}
                 screenType={screenType}
-                moment={moment}
-                tags={tags}
               />
             </View>
-            <KeyboardAvoidingView
-              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-              keyboardVerticalOffset={-20}>
-              <View style={styles.bottomContainer}>
-                {tags.length > 0 && (
-                  <TouchableOpacity
-                    disabled={!isVideo}
-                    onPress={() =>
-                      setTaggedUsersVisible((prevState) => !prevState)
-                    }>
-                    <Image
-                      source={require('../../assets/icons/tag_indicate.png')}
-                      style={styles.tagIcon}
-                    />
-                  </TouchableOpacity>
-                )}
-                <View style={styles.commentsCountContainer}>
-                  <CommentsCount
-                    momentId={moment.moment_id}
-                    count={commentCount}
-                    screenType={screenType}
-                  />
-                </View>
-                {momentPosterPreview}
-                {!hideText && (
-                  <>
-                    {moment.caption !== '' &&
-                      renderTextWithMentions({
-                        value: moment.caption,
-                        styles: styles.captionText,
-                        partTypes: mentionPartTypes('white', 'caption'),
-                        onPress: (userLocal: UserType) =>
-                          navigateToProfile(
-                            state,
-                            dispatch,
-                            navigation,
-                            screenType,
-                            userLocal,
-                          ),
-                      })}
-                  </>
-                )}
-                <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>
+            {momentPosterPreview}
+            {!hideText &&
+              moment.caption !== '' &&
+              renderTextWithMentions({
+                value: moment.caption,
+                styles: styles.captionText,
+                partTypes: mentionPartTypes('white', 'caption'),
+                onPress: (userLocal: UserType) =>
+                  navigateToProfile(
+                    state,
+                    dispatch,
+                    navigation,
+                    screenType,
+                    userLocal,
+                  ),
+              })}
+            <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>
+          </KeyboardAvoidingView>
+        </View>
       </View>
     </>
   );
 };
 
 const styles = StyleSheet.create({
-  media: {
-    zIndex: 0,
-  },
-  imageContainer: {
+  mediaContainer: {
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
-    flexDirection: 'column',
     justifyContent: 'center',
-    overflow: 'hidden',
   },
   text: {
     marginHorizontal: '5%',
@@ -376,12 +363,16 @@ const styles = StyleSheet.create({
     marginBottom: normalize(5),
     width: SCREEN_WIDTH * 0.79,
   },
-  tagIcon: {
+  tagIconContainer: {
     width: normalize(30),
     height: normalize(30),
     bottom: normalize(20),
     left: '5%',
   },
+  tagIcon: {
+    width: '100%',
+    height: '100%',
+  },
   avatar: {
     width: 48,
     aspectRatio: 1,
@@ -411,37 +402,29 @@ const styles = StyleSheet.create({
     right: '2%',
     bottom: SCREEN_HEIGHT * 0.12,
   },
-  bottomContainer: {
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-  },
-  topContainer: {
-    paddingTop: isIPhoneX() ? HeaderHeight : '6%',
-    alignSelf: 'flex-end',
-    paddingRight: '8%',
+  moreInfoButton: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 5,
+    right: 25,
   },
-  contentContainer: {
+  bottomContainer: {
     position: 'absolute',
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
     flexDirection: 'column',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-end',
     paddingBottom: '24%',
   },
   tagsContainer: {
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    marginBottom: '3%',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
   },
-  mainContainer: {
+  background: {
     backgroundColor: 'black',
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
-    flexDirection: 'column',
-    justifyContent: 'center',
   },
 });