TMA-551: PR updates

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,