From dfcd9e5d47ff5cac2a02a0bbfe4ed37f60625431 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 14 Jul 2021 07:49:09 -0700
Subject: Add view count to type, moment view, endpoints

---
 src/components/moments/MomentPost.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 29b82cec..7b3ce6f8 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -87,6 +87,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
     moment.moment_url.endsWith('gif')
   );
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
+  const [viewCount, setViewCount] = useState<number>(moment.view_count);
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -192,11 +193,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
             screenType={screenType}
             editable={false}
           />
-          <Text style={styles.headerText}>{user.username}</Text>
+          <View style={{paddingHorizontal: '3%'}}>
+            <Text style={styles.headerText}>{user.username}</Text>
+            <Text style={styles.viewCount}>
+              {viewCount <= 9999
+                ? `${viewCount} Views`
+                : `${(viewCount / 1000).toFixed(1)}K Views`}
+            </Text>
+          </View>
         </TouchableOpacity>
       </View>
     ),
-    [user.username],
+    [user.username, viewCount],
   );
 
   const momentMedia = isVideo ? (
@@ -387,7 +395,17 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: 'bold',
     color: 'white',
-    paddingHorizontal: '3%',
+  },
+  viewCount: {
+    height: normalize(12),
+    left: 0,
+    top: '8%',
+    fontSize: 11,
+    fontWeight: '600',
+    lineHeight: 13,
+    letterSpacing: 0.08,
+    textAlign: 'left',
+    color: '#fff',
   },
   header: {
     alignItems: 'center',
-- 
cgit v1.2.3-70-g09d2