2 files changed, 29 insertions, 19 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f83abcbc..c8a8aa06 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -256,10 +256,11 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     height: Math.round(SCREEN_HEIGHT / 10),
-    width: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH,
     flex: 1,
     alignSelf: 'center',
     alignItems: 'center',
+    paddingHorizontal: '8%',
   },
   avatarContainer: {
     height: 42,
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 1dcae36e..c92abdbd 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -48,7 +48,10 @@ const NotificationsScreen: React.FC = () => {
   const [showSPNotifyPopUp, setShowSPNotifyPopUp] = useState(false);
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
   const [sectionedNotifications, setSectionedNotifications] = useState<
-    {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[]
+    {
+      title: 'Friend Requests' | 'Today' | 'Yesterday' | 'This Week';
+      data: NotificationType[];
+    }[]
   >([]);
   const dispatch = useDispatch();
 
@@ -112,6 +115,7 @@ const NotificationsScreen: React.FC = () => {
     let todays = [];
     let yesterdays = [];
     let thisWeeks = [];
+    let friendRequests = [];
     for (const n of sortedNotifications) {
       const notificationDate = moment(n.timestamp);
       const dateAge = getDateAge(notificationDate);
@@ -120,24 +124,33 @@ const NotificationsScreen: React.FC = () => {
       }
       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;
+
+      if (n.notification_type === 'FRD_REQ') {
+        friendRequests.push(newN);
+      } else {
+        switch (dateAge) {
+          case 'today':
+            todays.push(newN);
+            continue;
+          case 'yesterday':
+            yesterdays.push(newN);
+            continue;
+          case 'thisWeek':
+            thisWeeks.push(newN);
+            continue;
+          default:
+            continue;
+        }
       }
     }
     setSectionedNotifications(
-      todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0
+      todays.length === 0 &&
+        yesterdays.length === 0 &&
+        thisWeeks.length === 0 &&
+        friendRequests.length === 0
         ? []
         : [
+            {title: 'Friend Requests', data: friendRequests},
             {title: 'Today', data: todays},
             {title: 'Yesterday', data: yesterdays},
             {title: 'This Week', data: thisWeeks},
@@ -145,10 +158,6 @@ const NotificationsScreen: React.FC = () => {
     );
   }, [lastViewed, notifications, showSPNotifyPopUp]);
 
-  useEffect(() => {
-    console.log(sectionedNotifications);
-  }, [sectionedNotifications]);
-
   const renderNotification = ({item}: {item: NotificationType}) => (
     <Notification
       item={item}