Merge pull request #299 from ankit-thanekar007/tma-697-UI-bug

[TMA-697 + TMA-643] : UI Bug + Friend Request Section Added

5 files changed, 129 insertions, 24 deletions

diff --git a/src/assets/images/hide-caret.png b/src/assets/images/hide-caret.png
new file mode 100644
index 00000000..bb05b53a
--- /dev/null
+++ b/src/assets/images/hide-caret.png
diff --git a/src/assets/images/hide-caret@2x.png b/src/assets/images/hide-caret@2x.png
new file mode 100644
index 00000000..3f4689d3
--- /dev/null
+++ b/src/assets/images/hide-caret@2x.png
diff --git a/src/assets/images/hide-caret@3x.png b/src/assets/images/hide-caret@3x.png
new file mode 100644
index 00000000..a44c36fe
--- /dev/null
+++ b/src/assets/images/hide-caret@3x.png
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 74bcf906..501c44fc 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';
@@ -48,8 +49,20 @@ 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 DEFAULT_NOTIFICATIONS_SIZE = 2;
+
+  const [footerEnabled, setFooterEnabled] = useState(false);
+  const [requestLimit, setRequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE);
+  const [allFriendRequests, setFriendRequests] = useState<NotificationType[]>(
+    [],
+  );
+
   const dispatch = useDispatch();
 
   const refreshNotifications = () => {
@@ -112,6 +125,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,34 +134,47 @@ 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;
+        }
       }
     }
+    setFriendRequests(friendRequests);
+    setFooterEnabled(
+      requestLimit === friendRequests.length &&
+        friendRequests.length > DEFAULT_NOTIFICATIONS_SIZE,
+    );
     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.slice(0, requestLimit),
+            },
             {title: 'Today', data: todays},
             {title: 'Yesterday', data: yesterdays},
             {title: 'This Week', data: thisWeeks},
           ],
     );
-  }, [lastViewed, notifications, showSPNotifyPopUp]);
-
-  useEffect(() => {
-    console.log(sectionedNotifications);
-  }, [sectionedNotifications]);
+  }, [lastViewed, notifications, showSPNotifyPopUp, requestLimit]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
     <Notification
@@ -157,13 +184,74 @@ 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 style={styles.sectionHeader}>{title}</Text>
+        <Text
+          style={[
+            styles.sectionFont,
+            styles.sectionHeader,
+            styles.sectionLocation,
+          ]}>
+          {title}
+        </Text>
       </View>
     );
 
+  const renderSectionFooter = ({
+    section: {title},
+  }: {
+    section: {title: string};
+  }) => {
+    if (title === 'Friend Requests') {
+      if (footerEnabled) {
+        return (
+          <TouchableOpacity
+            style={styles.sectionHeaderContainer}
+            onPress={() => {
+              setRequestLimit(DEFAULT_NOTIFICATIONS_SIZE);
+            }}>
+            <View
+              style={[styles.sectionLocation, styles.hiddenSectionContainer]}>
+              <Image
+                style={styles.hideImageStyles}
+                source={require('../../assets/images/hide-caret.png')}
+              />
+              <Text style={[styles.sectionFont, styles.sectionFooter]}>
+                {'Hide'}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      }
+
+      if (allFriendRequests.length > DEFAULT_NOTIFICATIONS_SIZE) {
+        return (
+          <TouchableOpacity
+            style={styles.sectionHeaderContainer}
+            onPress={() => {
+              setRequestLimit(allFriendRequests.length);
+            }}>
+            <Text
+              style={[
+                styles.sectionFont,
+                styles.sectionFooter,
+                styles.sectionLocation,
+              ]}>
+              {`+ ${allFriendRequests.length - requestLimit} More`}
+            </Text>
+          </TouchableOpacity>
+        );
+      }
+    }
+
+    return null;
+  };
+
   const SPPromptNotification: ReactElement = showSPNotifyPopUp ? (
     <TaggPrompt
       messageHeader={'New Suggested People Page!'}
@@ -198,13 +286,15 @@ const NotificationsScreen: React.FC = () => {
         <SectionList
           contentContainerStyle={styles.container}
           sections={sectionedNotifications}
-          keyExtractor={(item, index) => index.toString()}
+          keyExtractor={(_item, index) => index.toString()}
           renderItem={renderNotification}
           renderSectionHeader={renderSectionHeader}
+          renderSectionFooter={renderSectionFooter}
           ListHeaderComponent={SPPromptNotification}
           refreshControl={
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           }
+          extraData={requestLimit}
           ListEmptyComponent={
             <View style={styles.emptyViewContainer}>
               <EmptyNotificationView />
@@ -240,16 +330,30 @@ const styles = StyleSheet.create({
   },
   sectionHeaderContainer: {
     width: '100%',
+    backgroundColor: 'white',
   },
-  sectionHeader: {
+
+  sectionLocation: {
     marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
+  },
+
+  sectionFont: {
     fontWeight: '600',
     fontSize: normalize(12),
     lineHeight: normalize(14),
+  },
+  hiddenSectionContainer: {
+    flexDirection: 'row',
+  },
+  hideImageStyles: {alignSelf: 'center', marginRight: 8},
+  sectionHeader: {
     color: '#828282',
   },
+  sectionFooter: {
+    color: '#698DD3',
+  },
   emptyViewContainer: {
     flex: 1,
     justifyContent: 'center',