diff options
| -rw-r--r-- | src/constants/strings.ts | 6 | ||||
| -rw-r--r-- | src/screens/main/NotificationsScreen.tsx | 72 | ||||
| -rw-r--r-- | src/screens/main/notification/EmptyNotificationView.tsx | 13 |
3 files changed, 45 insertions, 46 deletions
diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 3d8cbfe7..5a9be5fc 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -44,17 +44,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; +export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code'; +export const UP_TO_DATE = 'Up-to-Date!'; export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!'; export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'; export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category'; export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; - -//Notifications -export const UP_TO_DATE = 'Up-to-Date!'; -export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
\ No newline at end of file diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 4979c8d8..d9e5a57f 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -97,42 +97,44 @@ const NotificationsScreen: React.FC = () => { // handles sectioning notifications to "date age" // mark notifications as read or unread useEffect(() => { - const sortedNotifications = (notifications ?? []) - .slice() - .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); - let todays = []; - let yesterdays = []; - let thisWeeks = []; - for (const n of sortedNotifications) { - const notificationDate = moment(n.timestamp); - const dateAge = getDateAge(notificationDate); - if (dateAge === 'unknown') { - continue; - } - const unread = lastViewed ? lastViewed.diff(notificationDate) < 0 : false; - const newN = {...n, unread}; - switch (dateAge) { - case 'today': - todays.push(newN); - continue; - case 'yesterday': - yesterdays.push(newN); - continue; - case 'thisWeek': - thisWeeks.push(newN); - continue; - default: + if (notifications?.length > 0) { + const sortedNotifications = (notifications ?? []) + .slice() + .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); + let todays = []; + let yesterdays = []; + let thisWeeks = []; + for (const n of sortedNotifications) { + const notificationDate = moment(n.timestamp); + const dateAge = getDateAge(notificationDate); + if (dateAge === 'unknown') { continue; + } + const unread = lastViewed + ? lastViewed.diff(notificationDate) < 0 + : false; + const newN = {...n, unread}; + switch (dateAge) { + case 'today': + todays.push(newN); + continue; + case 'yesterday': + yesterdays.push(newN); + continue; + case 'thisWeek': + thisWeeks.push(newN); + continue; + default: + continue; + } } + setSectionedNotifications([ + {title: 'Today', data: todays}, + {title: 'Yesterday', data: yesterdays}, + {title: 'This Week', data: thisWeeks}, + ]); } - setSectionedNotifications([ - {title: 'Today', data: todays}, - {title: 'Yesterday', data: yesterdays}, - {title: 'This Week', data: thisWeeks}, - ]); - setNoNotification( - todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, - ); + setNoNotification(notifications && notifications.length === 0); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( @@ -157,13 +159,13 @@ const NotificationsScreen: React.FC = () => { <Text style={styles.headerText}>Notifications</Text> <View style={styles.underline} /> </View> - {noNotification === true && ( + {noNotification && ( <View style={styles.emptyViewContainer}> <EmptyNotificationView /> </View> )} - {noNotification === false && ( + {!noNotification && ( <SectionList contentContainerStyle={styles.container} sections={sectionedNotifications} diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index b76a955b..f43cfb2a 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -3,6 +3,7 @@ import {Image, Text, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; +import {SCREEN_HEIGHT, normalize} from '../../../utils'; const EmptyNotificationView: React.FC = () => { return ( <View style={styles.container}> @@ -27,19 +28,17 @@ const EmptyNotificationView: React.FC = () => { const styles = StyleSheet.create({ container: {alignItems: 'center'}, - topMargin: {marginTop: 43}, + topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, upperTextStyle: { fontWeight: '700', - fontSize: 23, - fontStyle: 'normal', - lineHeight: 40, + fontSize: normalize(23), + lineHeight: normalize(40), }, bottomTextStyle: { color: '#2D3B45', fontWeight: '600', - fontSize: 20, - fontStyle: 'normal', - lineHeight: 40, + fontSize: normalize(20), + lineHeight: normalize(40), }, backgroundLinearView: { borderRadius: 135.5, |