Done (#163)

3 files changed, 43 insertions, 12 deletions

diff --git a/src/assets/icons/grey-plus-logo.svg b/src/assets/icons/grey-plus-logo.svg
new file mode 100644
index 00000000..3d2e1a36
--- /dev/null
+++ b/src/assets/icons/grey-plus-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"><defs><style>.cls-1{fill:none;stroke:#828282;stroke-miterlimit:10;stroke-width:31.7px;}.cls-2{fill:#828282;}</style></defs><circle class="cls-1" cx="396" cy="396.51" r="210.49"/><rect class="cls-2" x="378.76" y="275.31" width="34.48" height="242.41" rx="15.72"/><rect class="cls-2" x="378.76" y="275.31" width="34.48" height="242.41" rx="15.72" transform="translate(-0.51 792.51) rotate(-90)"/><path class="cls-2" d="M712.18,4H79.81A76.33,76.33,0,0,0,3.49,80.33V712.7A76.32,76.32,0,0,0,79.81,789H712.18a76.33,76.33,0,0,0,76.33-76.32V80.33A76.34,76.34,0,0,0,712.18,4Zm48.57,702.8A51.73,51.73,0,0,1,709,758.53H84A51.73,51.73,0,0,1,32.26,706.8v-625A51.73,51.73,0,0,1,84,30H709a51.73,51.73,0,0,1,51.73,51.73Z"/></svg>
\ No newline at end of file
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 7010a595..0d2c2b62 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -34,7 +34,13 @@ const Moment: React.FC<MomentProps> = ({
 
   const navigateToImagePicker = () => {
     ImagePicker.openPicker({
-      smartAlbums: ['Favorites', 'RecentlyAdded', 'SelfPortraits', 'Screenshots', 'UserLibrary'],
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
       width: 580,
       height: 580,
       cropping: true,
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;