diff options
| -rw-r--r-- | src/assets/icons/grey-plus-logo.svg | 1 | ||||
| -rw-r--r-- | src/components/moments/Moment.tsx | 8 | ||||
| -rw-r--r-- | src/components/profile/Content.tsx | 46 |
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; |
