Add view count to type, moment view, endpoints

3 files changed, 41 insertions, 3 deletions

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',
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 6dab1153..1efc9ab7 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -34,6 +34,7 @@ export const MOMENTS_ENDPOINT: string = API_URL + 'moments/';
 export const MOMENT_TAGS_ENDPOINT: string = API_URL + 'moments/tags/';
 export const MOMENTTAG_ENDPOINT: string = API_URL + 'moment-tag/';
 export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/';
+export const MOMENT_VIEW_COUNT_API: string = API_URL + 'moment-view-count/';
 export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
 export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
 export const COMMENT_REACTIONS_ENDPOINT: string = API_URL + 'reaction-comment/';
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index 25d44041..378eca54 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -5,6 +5,7 @@ import {
   MOMENTTAG_ENDPOINT,
   MOMENT_TAGS_ENDPOINT,
   MOMENT_THUMBNAIL_ENDPOINT,
+  MOMENT_VIEW_COUNT_API,
   PRESIGNED_URL_ENDPOINT,
   TAGG_CUSTOMER_SUPPORT,
 } from '../constants';
@@ -320,3 +321,21 @@ export const handleVideoUpload = async (
   }
   return false;
 };
+
+/*
+ * Records a view on a moment
+ */
+export const increaseMomentViewCount = async (moment_id: string) => {
+  const token = await AsyncStorage.getItem('token');
+
+  const response = await fetch(MOMENT_VIEW_COUNT_API + `${moment_id}/`, {
+    method: 'PATCH',
+    headers: {
+      Authorization: 'Token ' + token,
+    },
+  });
+  if (response.status === 200) {
+    return true;
+  }
+  return false;
+};