From a6e98c1031a9e1c1bb03dd848f39e5afd8f28cb5 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 26 May 2021 15:58:06 -0400
Subject: Add icon and calculation

---
 src/assets/icons/tag_indicate.png            | Bin 0 -> 101301 bytes
 src/components/moments/MomentPostContent.tsx |  69 +++++++++++++--------------
 2 files changed, 34 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/icons/tag_indicate.png

(limited to 'src')

diff --git a/src/assets/icons/tag_indicate.png b/src/assets/icons/tag_indicate.png
new file mode 100644
index 00000000..7947aef7
Binary files /dev/null and b/src/assets/icons/tag_indicate.png differ
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 6953dca4..97bf2a0b 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,8 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-import Animated, {Easing} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {getCommentsCount, loadMomentTags} from '../../services';
 import {RootState} from '../../store/rootReducer';
@@ -36,17 +34,27 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [elapsedTime, setElapsedTime] = useState('');
   const [comments_count, setCommentsCount] = useState('');
   const [tags, setTags] = useState<MomentTagType[]>([]);
-  const [visible, setVisible] = useState(false);
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const imageRef = useRef(null);
-
-  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
-    new Animated.Value(0),
-  );
+  const [imageDimensions, setImageDimensions] = useState([0, 0]);
 
   useEffect(() => {
+    setTimeout(() => {
+      imageRef.current.measure(
+        (
+          _fx: number,
+          _fy: number,
+          width: number,
+          height: number,
+          _x: number,
+          _y: number,
+        ) => {
+          setImageDimensions([width, height]);
+        },
+      );
+    }, 250);
     const loadTags = async () => {
       const response = await loadMomentTags(momentId);
       if (response) {
@@ -65,36 +73,24 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     fetchCommentsCount();
   }, [dateTime, momentId]);
 
-  useEffect(() => {
-    const fade = async () => {
-      Animated.timing(fadeValue, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.linear,
-      }).start();
-    };
-    fade();
-  }, [fadeValue]);
-
   return (
     <View style={[styles.container, style]}>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          setVisible(!visible);
-          setFadeValue(new Animated.Value(0));
-        }}>
+      <Image
+        ref={imageRef}
+        style={styles.image}
+        source={{uri: pathHash}}
+        resizeMode={'cover'}
+      />
+      {tags.length > 0 && (
         <Image
-          ref={imageRef}
-          style={styles.image}
-          source={{uri: pathHash}}
-          resizeMode={'cover'}
+          source={require('../../assets/icons/tag_indicate.png')}
+          style={[
+            styles.tagIcon,
+            {top: imageDimensions[1] - 30 - SCREEN_HEIGHT * 0.03},
+          ]}
         />
-      </TouchableWithoutFeedback>
-      {visible && (
-        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
-          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
-        </Animated.View>
       )}
+      <MomentTags editing={false} tags={tags} imageRef={imageRef} />
       <View style={styles.footerContainer}>
         <CommentsCount
           commentsCount={comments_count}
@@ -123,9 +119,6 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     marginBottom: '3%',
   },
-  tapTag: {
-    position: 'absolute',
-  },
   footerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -154,5 +147,11 @@ const styles = StyleSheet.create({
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
   },
+  tagIcon: {
+    width: normalize(30),
+    height: normalize(30),
+    position: 'absolute',
+    left: normalize(20),
+  },
 });
 export default MomentPostContent;
-- 
cgit v1.2.3-70-g09d2


From fbfb50acdf374bb920912caff785d49eb384237a Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 26 May 2021 16:06:05 -0400
Subject: Merged with master

---
 src/components/moments/MomentPostContent.tsx | 44 ++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 97bf2a0b..982fc035 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,8 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import Animated, {Easing} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {getCommentsCount, loadMomentTags} from '../../services';
 import {RootState} from '../../store/rootReducer';
@@ -34,10 +36,15 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [elapsedTime, setElapsedTime] = useState('');
   const [comments_count, setCommentsCount] = useState('');
   const [tags, setTags] = useState<MomentTagType[]>([]);
+  const [visible, setVisible] = useState(false);
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const imageRef = useRef(null);
+
+  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
+    new Animated.Value(0),
+  );
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
 
   useEffect(() => {
@@ -73,14 +80,36 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     fetchCommentsCount();
   }, [dateTime, momentId]);
 
+  useEffect(() => {
+    const fade = async () => {
+      Animated.timing(fadeValue, {
+        toValue: 1,
+        duration: 250,
+        easing: Easing.linear,
+      }).start();
+    };
+    fade();
+  }, [fadeValue]);
+
   return (
     <View style={[styles.container, style]}>
-      <Image
-        ref={imageRef}
-        style={styles.image}
-        source={{uri: pathHash}}
-        resizeMode={'cover'}
-      />
+      <TouchableWithoutFeedback
+        onPress={() => {
+          setVisible(!visible);
+          setFadeValue(new Animated.Value(0));
+        }}>
+        <Image
+          ref={imageRef}
+          style={styles.image}
+          source={{uri: pathHash}}
+          resizeMode={'cover'}
+        />
+      </TouchableWithoutFeedback>
+      {visible && (
+        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
+          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+        </Animated.View>
+      )}
       {tags.length > 0 && (
         <Image
           source={require('../../assets/icons/tag_indicate.png')}
@@ -147,6 +176,9 @@ const styles = StyleSheet.create({
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
   },
+  tapTag: {
+    position: 'absolute',
+  },
   tagIcon: {
     width: normalize(30),
     height: normalize(30),
-- 
cgit v1.2.3-70-g09d2


From 97d6d20d963638fab00aca690088de5c401f38f2 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 26 May 2021 17:08:50 -0700
Subject: Remove momentTag, Include icon in touchable area

---
 src/components/moments/MomentPostContent.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 982fc035..55b0738e 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -110,16 +110,21 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           <MomentTags editing={false} tags={tags} imageRef={imageRef} />
         </Animated.View>
       )}
-      {tags.length > 0 && (
-        <Image
-          source={require('../../assets/icons/tag_indicate.png')}
-          style={[
-            styles.tagIcon,
-            {top: imageDimensions[1] - 30 - SCREEN_HEIGHT * 0.03},
-          ]}
-        />
+        {tags.length > 0 && (
+          <Image
+            source={require('../../assets/icons/tag_indicate.png')}
+            style={[
+              styles.tagIcon,
+              {top: imageDimensions[1] - 30 - SCREEN_HEIGHT * 0.03},
+            ]}
+          />
+        )}
+      </TouchableWithoutFeedback>
+      {visible && (
+        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
+          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+        </Animated.View>
       )}
-      <MomentTags editing={false} tags={tags} imageRef={imageRef} />
       <View style={styles.footerContainer}>
         <CommentsCount
           commentsCount={comments_count}
-- 
cgit v1.2.3-70-g09d2


From f30d4c948699f347272067582553be1586f8f952 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 26 May 2021 17:19:48 -0700
Subject: Remove imageRef usage to place tag icon

---
 src/components/moments/MomentPostContent.tsx | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 55b0738e..ad29900e 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -45,23 +45,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
-  const [imageDimensions, setImageDimensions] = useState([0, 0]);
 
   useEffect(() => {
-    setTimeout(() => {
-      imageRef.current.measure(
-        (
-          _fx: number,
-          _fy: number,
-          width: number,
-          height: number,
-          _x: number,
-          _y: number,
-        ) => {
-          setImageDimensions([width, height]);
-        },
-      );
-    }, 250);
     const loadTags = async () => {
       const response = await loadMomentTags(momentId);
       if (response) {
@@ -104,19 +89,10 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           source={{uri: pathHash}}
           resizeMode={'cover'}
         />
-      </TouchableWithoutFeedback>
-      {visible && (
-        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
-          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
-        </Animated.View>
-      )}
         {tags.length > 0 && (
           <Image
             source={require('../../assets/icons/tag_indicate.png')}
-            style={[
-              styles.tagIcon,
-              {top: imageDimensions[1] - 30 - SCREEN_HEIGHT * 0.03},
-            ]}
+            style={[styles.tagIcon]}
           />
         )}
       </TouchableWithoutFeedback>
@@ -188,6 +164,7 @@ const styles = StyleSheet.create({
     width: normalize(30),
     height: normalize(30),
     position: 'absolute',
+    bottom: '7%',
     left: normalize(20),
   },
 });
-- 
cgit v1.2.3-70-g09d2