Done (#163)

1 files changed, 35 insertions, 11 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 60f18cc2..3a304938 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -50,6 +50,7 @@ import {
 import {Cover} from '.';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useNavigation} from '@react-navigation/native';
+import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -295,17 +296,28 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       />
       <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
       <View style={styles.momentsContainer}>
-        {userMomentCategories.map((title, index) => (
-          <Moment
-            key={index}
-            title={title}
-            images={imagesMap.get(title)}
-            userXId={userXId}
-            screenType={screenType}
-            handleMomentCategoryDelete={handleCategoryDeletion}
-            shouldAllowDeletion={userMomentCategories.length > 2}
-          />
-        ))}
+        {userXId && moments.length === 0 && (
+          <View style={styles.plusIconContainer}>
+            <GreyPlusLogo width={90} height={90} />
+            <Text style={styles.noMomentsText}>{`Looks like ${
+              profile.name.split(' ')[0]
+            } has not posted any moments yet`}</Text>
+          </View>
+        )}
+        {userMomentCategories.map(
+          (title, index) =>
+            (!userXId || imagesMap.get(title)) && (
+              <Moment
+                key={index}
+                title={title}
+                images={imagesMap.get(title)}
+                userXId={userXId}
+                screenType={screenType}
+                handleMomentCategoryDelete={handleCategoryDeletion}
+                shouldAllowDeletion={userMomentCategories.length > 2}
+              />
+            ),
+        )}
         {!userXId && userMomentCategories.length < 6 && (
           <TouchableOpacity
             onPress={() =>
@@ -350,6 +362,18 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: 'white',
   },
+  plusIconContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: '10%',
+  },
+  noMomentsText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'gray',
+    marginVertical: '8%',
+  },
 });
 
 export default Content;