1 files changed, 71 insertions, 8 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 8d368747..d52696a7 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,8 +1,11 @@
-import React, {useState} from 'react';
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
-import {Text} from 'react-native-animatable';
+import AsyncStorage from '@react-native-community/async-storage';
+import React, {useCallback, useEffect, useState} from 'react';
+import {Alert, LayoutChangeEvent, StyleSheet, View} from 'react-native';
+<!-- import {Text} from 'react-native-animatable'; -->
 import Animated from 'react-native-reanimated';
-import {defaultMoments} from '../../constants';
+import {AuthContext} from '../../routes/authentication';
+import {MomentType, UserType} from 'src/types';
+import {defaultMoments, MOMENTS_ENDPOINT} from '../../constants';
 import {SCREEN_HEIGHT} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
 import Moment from './Moment';
@@ -14,12 +17,70 @@ interface ContentProps {
   y: Animated.Value<number>;
   isProfileView: boolean;
 }
+
 const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
+  const {newMomentsAvailable, updateMoments} = React.useContext(AuthContext);
+
+  const [imagesList, setImagesList] = useState<MomentType[]>([]);
+  const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
+    new Map(),
+  );
   const onLayout = (e: LayoutChangeEvent) => {
     const {height} = e.nativeEvent.layout;
     setProfileBodyHeight(height);
   };
+
+  const {userId, username} = user;
+
+  const createImagesMap = useCallback(() => {
+    var map = new Map();
+    imagesList.forEach(function (imageObject) {
+      var moment_category = imageObject.moment_category;
+      if (map.has(moment_category)) {
+        map.get(moment_category).push(imageObject);
+      } else {
+        map.set(moment_category, [imageObject]);
+      }
+    });
+
+    setImagesMap(map);
+    console.log(map);
+  }, [imagesList]);
+
+  useEffect(() => {
+    if (!userId) {
+      return;
+    }
+
+    const retrieveMoments = async () => {
+      try {
+        const token = await AsyncStorage.getItem('token');
+        const response = await fetch(MOMENTS_ENDPOINT + `${userId}/`, {
+          method: 'GET',
+          headers: {
+            Authorization: 'Token ' + token,
+          },
+        });
+        const status = response.status;
+        if (status === 200) {
+          const data = await response.json();
+          setImagesList(data);
+          updateMoments(!newMomentsAvailable);
+        } else {
+          Alert.alert('Could not load moments!');
+        }
+      } catch (err) {
+        Alert.alert('Could not load moments!');
+      }
+    };
+
+    if (newMomentsAvailable) {
+      retrieveMoments();
+      createImagesMap();
+    }
+  }, [userId, createImagesMap, updateMoments, newMomentsAvailable]);
+
   return (
     <Animated.ScrollView
       style={styles.container}
@@ -30,14 +91,16 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
       <ProfileCutout>
         <ProfileHeader {...{isProfileView}} />
       </ProfileCutout>
+      <ProfileBody {...{onLayout}} />
+      <TaggsBar {...{y, profileBodyHeight}} />
       <ProfileBody {...{onLayout, isProfileView}} />
       <TaggsBar {...{y, profileBodyHeight, isProfileView}} />
       {!isProfileView ? (
         <View style={styles.momentsContainer}>
-          {defaultMoments.map((title, index) => (
-            <Moment key={index} title={title} images={[]} />
-          ))}
-        </View>
+        {defaultMoments.map((title, index) => (
+          <Moment key={index} title={title} images={imagesMap.get(title)} />
+        ))}
+      </View>
       ) : (
         <React.Fragment />
       )}