Merge pull request #507 from shravyaramesh/tma985-moment-view-count

[TMA-985] Moment view count

6 files changed, 80 insertions, 8 deletions

diff --git a/src/RootNavigation.ts b/src/RootNavigation.ts
index 9baa7828..bd2ba20d 100644
--- a/src/RootNavigation.ts
+++ b/src/RootNavigation.ts
@@ -6,8 +6,6 @@ export const navigationRef: React.RefObject<NavigationContainerRef> =
 
 export function navigate(name: string) {
   if (navigationRef.current) {
-    // Perform navigation if the app has mounted
-    //console.log('Reached root navigation');
     navigationRef.current.navigate(name);
   } else {
     // TODO: Decide what to do if the app hasn't mounted
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 29b82cec..0504052b 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -42,12 +42,14 @@ interface MomentPostProps {
   moment: MomentPostType;
   userXId: string | undefined;
   screenType: ScreenType;
+  updateMomentViewCount: () => void;
 }
 
 const MomentPost: React.FC<MomentPostProps> = ({
   moment,
   userXId,
   screenType,
+  updateMomentViewCount,
 }) => {
   const navigation = useNavigation();
   const dispatch = useDispatch();
@@ -192,11 +194,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
             screenType={screenType}
             editable={false}
           />
-          <Text style={styles.headerText}>{user.username}</Text>
+          <View style={styles.profilePreviewContainer}>
+            <Text style={styles.headerText}>{user.username}</Text>
+            <Text style={styles.viewCount}>
+              {moment.view_count <= 9999
+                ? `${moment.view_count} Views`
+                : `${(moment.view_count / 1000).toFixed(1)}K Views`}
+            </Text>
+          </View>
         </TouchableOpacity>
       </View>
     ),
-    [user.username],
+    [user.username, moment.view_count],
   );
 
   const momentMedia = isVideo ? (
@@ -216,6 +225,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
           setAspectRatio(width / height);
         }}
         paused={moment.moment_id !== currentVisibleMomentId}
+        onEnd={updateMomentViewCount}
       />
     </View>
   ) : (
@@ -387,7 +397,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',
@@ -430,6 +450,7 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
   },
+  profilePreviewContainer: {paddingHorizontal: '3%'},
 });
 
 export default MomentPost;
diff --git a/src/constants/api.ts b/src/constants/api.ts
index b4548634..1de6871c 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/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 1b0c7c2b..0cfbce28 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -5,6 +5,7 @@ import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
 import {MainStackParams} from '../../routes';
+import {increaseMomentViewCount} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
 import {SCREEN_HEIGHT} from '../../utils';
@@ -38,9 +39,16 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
     userXId ? state.userX[screenType][userXId] : state.moments,
   );
   const scrollRef = useRef<FlatList<MomentPostType>>(null);
-  const momentData = moments.filter(
-    (m) => m.moment_category === moment_category,
-  );
+  const [momentData, setMomentData] = useState<MomentPostType[]>([]);
+
+  useEffect(() => {
+    const extractedMoments = moments.filter(
+      (m) => m.moment_category === moment_category,
+    );
+    setMomentData(extractedMoments);
+    console.log('momentData: ', momentData);
+  }, [moments]);
+
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
@@ -75,6 +83,28 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
     };
   }, []);
 
+  const updateMomentViewCount = () => {
+    if (currentVisibleMomentId) {
+      increaseMomentViewCount(currentVisibleMomentId)
+        .then((updatedViewCount) => {
+          const updatedMomentData = momentData.map((x) => {
+            return x.moment_id === currentVisibleMomentId
+              ? {...x, view_count: updatedViewCount}
+              : x;
+          });
+          setMomentData(updatedMomentData);
+        })
+        .catch(() => console.log('Error updating view count!'));
+    }
+  };
+
+  /*
+   *  Increments view count when user swipes up or down on Flatlist
+   */
+  useEffect(() => {
+    updateMomentViewCount();
+  }, [currentVisibleMomentId]);
+
   return (
     <MomentContext.Provider
       value={{
@@ -90,6 +120,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
             moment={item}
             userXId={userXId}
             screenType={screenType}
+            updateMomentViewCount={updateMomentViewCount}
           />
         )}
         keyboardShouldPersistTaps={'handled'}
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index b67cd169..3a677ccc 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -6,6 +6,7 @@ import {
   MOMENTTAG_ENDPOINT,
   MOMENT_TAGS_ENDPOINT,
   MOMENT_THUMBNAIL_ENDPOINT,
+  MOMENT_VIEW_COUNT_API,
   PRESIGNED_URL_ENDPOINT,
   TAGG_CUSTOMER_SUPPORT,
 } from '../constants';
@@ -322,6 +323,25 @@ 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) {
+    const {view_count} = await response.json();
+    return view_count;
+  }
+  return;
+};
+
 export const checkMomentDoneProcessing = async (momentId: string) => {
   try {
     const token = await AsyncStorage.getItem('token');
diff --git a/src/types/types.ts b/src/types/types.ts
index 685e3784..0f0957fc 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -130,6 +130,7 @@ export interface MomentType {
   moment_category: string;
   moment_url: string;
   thumbnail_url: string;
+  view_count: number;
 }
 
 export interface MomentPostType extends MomentType {