Added expansion

1 files changed, 52 insertions, 11 deletions

diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 568c8c73..24be7123 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -17,6 +17,7 @@ import {
   Text,
   View,
 } from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {TabsGradient, TaggPrompt} from '../../components';
@@ -54,8 +55,13 @@ const NotificationsScreen: React.FC = () => {
     }[]
   >([]);
 
+  const DEFAULT_NOTIFICATIONS_SIZE = 2;
+
   const [moreFooterEnabled, setMoreFooterEnabled] = useState(false);
-  const [requestLimit, setrequestLimit] = useState(4);
+  const [requestLimit, setrequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE);
+  const [allFriendRequests, setFriendRequests] = useState<NotificationType[]>(
+    [],
+  );
 
   const dispatch = useDispatch();
 
@@ -147,7 +153,7 @@ const NotificationsScreen: React.FC = () => {
         }
       }
     }
-
+    setFriendRequests(friendRequests);
     setSectionedNotifications(
       todays.length === 0 &&
         yesterdays.length === 0 &&
@@ -155,13 +161,16 @@ const NotificationsScreen: React.FC = () => {
         friendRequests.length === 0
         ? []
         : [
-            {title: 'Friend Requests', data: friendRequests},
+            {
+              title: 'Friend Requests',
+              data: friendRequests.slice(0, requestLimit),
+            },
             {title: 'Today', data: todays},
             {title: 'Yesterday', data: yesterdays},
             {title: 'This Week', data: thisWeeks},
           ],
     );
-  }, [lastViewed, notifications, showSPNotifyPopUp]);
+  }, [lastViewed, notifications, showSPNotifyPopUp, requestLimit]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
     <Notification
@@ -171,7 +180,11 @@ const NotificationsScreen: React.FC = () => {
     />
   );
 
-  const renderSectionHeader = ({section: {title, data}}) =>
+  const renderSectionHeader = ({
+    section: {title, data},
+  }: {
+    section: {title: string; data: NotificationType[]};
+  }) =>
     data.length !== 0 && (
       <View style={styles.sectionHeaderContainer}>
         <Text
@@ -186,20 +199,47 @@ const NotificationsScreen: React.FC = () => {
       </View>
     );
 
-  const renderSectionFooter = ({section: {title, data}}) => {
-    if (title === 'Friend Request' && data.length < requestLimit) {
+  const renderSectionFooter = ({
+    section: {title, data},
+  }: {
+    section: {title: string; data: NotificationType[]};
+  }) => {
+    if (title === 'Friend Requests') {
+      if (moreFooterEnabled) {
+        return (
+          <TouchableOpacity
+            style={styles.sectionHeaderContainer}
+            onPress={() => {
+              setrequestLimit(DEFAULT_NOTIFICATIONS_SIZE);
+              setMoreFooterEnabled(false);
+            }}>
+            <Text
+              style={[
+                styles.sectionFont,
+                styles.sectionFooter,
+                styles.sectionLocation,
+              ]}>
+              {'Hide'}
+            </Text>
+          </TouchableOpacity>
+        );
+      }
       return (
-        <View style={styles.sectionHeaderContainer}>
+        <TouchableOpacity
+          style={styles.sectionHeaderContainer}
+          onPress={() => {
+            setrequestLimit(allFriendRequests.length);
+            setMoreFooterEnabled(true);
+          }}>
           <Text
             style={[
               styles.sectionFont,
               styles.sectionFooter,
               styles.sectionLocation,
-              styles.sectionHeader,
             ]}>
-            {title}
+            {`+ ${allFriendRequests.length - requestLimit} More`}
           </Text>
-        </View>
+        </TouchableOpacity>
       );
     }
 
@@ -248,6 +288,7 @@ const NotificationsScreen: React.FC = () => {
           refreshControl={
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           }
+          extraData={requestLimit}
           ListEmptyComponent={
             <View style={styles.emptyViewContainer}>
               <EmptyNotificationView />