Fix bump up view count issue

2 files changed, 40 insertions, 7 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 7b3ce6f8..6cb812e7 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();
@@ -196,15 +198,15 @@ const MomentPost: React.FC<MomentPostProps> = ({
           <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`}
+              {moment.view_count <= 9999
+                ? `${moment.view_count} Views`
+                : `${(moment.view_count / 1000).toFixed(1)}K Views`}
             </Text>
           </View>
         </TouchableOpacity>
       </View>
     ),
-    [user.username, viewCount],
+    [user.username, moment.view_count],
   );
 
   const momentMedia = isVideo ? (
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'}