Merge pull request #280 from IvanIFChen/tma679-sp-notificaion-pop-up

[TMA-679] SP Notification Pop-up

2 files changed, 122 insertions, 56 deletions

diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index 5cd3ac3f..75f3009b 100644
--- a/src/components/common/TaggPrompt.tsx
+++ b/src/components/common/TaggPrompt.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
-import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {Image, View} from 'react-native-animatable';
-import {SCREEN_HEIGHT} from '../../utils';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {normalize, SCREEN_HEIGHT} from '../../utils';
 
 type TaggPromptProps = {
   messageHeader: string;
-  messageBody: string;
-  logoType: string;
+  messageBody: string | Element;
+  logoType: 'plus' | 'tagg';
+  hideCloseButton?: boolean;
+  noPadding?: boolean;
   onClose: () => void;
 };
 
@@ -15,27 +17,43 @@ const TaggPrompt: React.FC<TaggPromptProps> = ({
   messageHeader,
   messageBody,
   logoType,
+  hideCloseButton,
+  noPadding,
   onClose,
 }) => {
   /**
    * Generic prompt for Tagg
    */
 
+  const logo = () => {
+    switch (logoType) {
+      case 'plus':
+        return require('../../assets/icons/plus-logo.png');
+      case 'tagg':
+      default:
+        return require('../../assets/images/logo-purple.png');
+    }
+  };
+
   return (
-    <View style={styles.container}>
-      <Image
-        style={styles.icon}
-        source={require('../../assets/icons/plus-logo.png')}
-      />
+    <View
+      style={[
+        styles.container,
+        {paddingTop: noPadding ? 0 : SCREEN_HEIGHT / 10},
+        {paddingBottom: noPadding ? 0 : SCREEN_HEIGHT / 50},
+      ]}>
+      <Image style={styles.icon} source={logo()} />
       <Text style={styles.header}>{messageHeader}</Text>
       <Text style={styles.subtext}>{messageBody}</Text>
-      <TouchableOpacity
-        style={styles.closeButton}
-        onPress={() => {
-          onClose();
-        }}>
-        <CloseIcon height={'50%'} width={'50%'} color="gray" />
-      </TouchableOpacity>
+      {!hideCloseButton && (
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={() => {
+            onClose();
+          }}>
+          <CloseIcon height={'50%'} width={'50%'} color="gray" />
+        </TouchableOpacity>
+      )}
     </View>
   );
 };
@@ -47,8 +65,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'white',
     height: SCREEN_HEIGHT / 4.5,
-    paddingTop: SCREEN_HEIGHT / 10,
-    paddingBottom: SCREEN_HEIGHT / 50,
   },
   closeButton: {
     position: 'relative',
@@ -58,22 +74,24 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   icon: {
-    width: 40,
-    height: 40,
+    width: normalize(40),
+    height: normalize(40),
   },
   header: {
     color: 'black',
-    fontSize: 16,
+    fontSize: normalize(16),
     fontWeight: '600',
     textAlign: 'center',
     marginTop: '2%',
   },
   subtext: {
     color: 'gray',
-    fontSize: 12,
+    fontSize: normalize(12),
     fontWeight: '500',
+    lineHeight: normalize(20),
     textAlign: 'center',
     marginTop: '2%',
+    width: '95%',
   },
 });
 export default TaggPrompt;
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index aa53c4a9..74bcf906 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -1,8 +1,15 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect} from '@react-navigation/native';
 import moment from 'moment';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {
+  Fragment,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
+  Image,
   RefreshControl,
   SectionList,
   StatusBar,
@@ -12,26 +19,22 @@ import {
 } from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
+import {TabsGradient, TaggPrompt} from '../../components';
 import {Notification} from '../../components/notifications';
-import EmptyNotificationView from './notification/EmptyNotificationView';
 import {
   loadUserNotifications,
   updateNewNotificationReceived,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
-import {getDateAge, SCREEN_HEIGHT} from '../../utils';
-import {normalize} from '../../utils';
+import {getDateAge, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import EmptyNotificationView from './notification/EmptyNotificationView';
 
 const NotificationsScreen: React.FC = () => {
-  const {moments: loggedInUserMoments} = useSelector(
-    (state: RootState) => state.moments,
-  );
   const {newNotificationReceived} = useSelector(
     (state: RootState) => state.user,
   );
   const [refreshing, setRefreshing] = useState(false);
-  const [noNotification, setNoNotification] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
     undefined,
@@ -39,13 +42,14 @@ const NotificationsScreen: React.FC = () => {
   const {notifications} = useSelector(
     (state: RootState) => state.notifications,
   );
-
+  const {suggested_people_linked} = useSelector(
+    (state: RootState) => state.user.profile,
+  );
+  const [showSPNotifyPopUp, setShowSPNotifyPopUp] = useState(false);
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-
   const [sectionedNotifications, setSectionedNotifications] = useState<
     {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[]
   >([]);
-
   const dispatch = useDispatch();
 
   const refreshNotifications = () => {
@@ -62,6 +66,10 @@ const NotificationsScreen: React.FC = () => {
     refreshNotifications();
   }, [refreshNotifications]);
 
+  useEffect(() => {
+    setShowSPNotifyPopUp(suggested_people_linked !== 2);
+  }, [suggested_people_linked]);
+
   useFocusEffect(
     useCallback(() => {
       const resetNewNotificationFlag = () => {
@@ -126,15 +134,20 @@ const NotificationsScreen: React.FC = () => {
           continue;
       }
     }
-    setSectionedNotifications([
-      {title: 'Today', data: todays},
-      {title: 'Yesterday', data: yesterdays},
-      {title: 'This Week', data: thisWeeks},
-    ]);
-    setNoNotification(
-      todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0,
+    setSectionedNotifications(
+      todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0
+        ? []
+        : [
+            {title: 'Today', data: todays},
+            {title: 'Yesterday', data: yesterdays},
+            {title: 'This Week', data: thisWeeks},
+          ],
     );
-  }, [lastViewed, notifications]);
+  }, [lastViewed, notifications, showSPNotifyPopUp]);
+
+  useEffect(() => {
+    console.log(sectionedNotifications);
+  }, [sectionedNotifications]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
     <Notification
@@ -151,35 +164,65 @@ const NotificationsScreen: React.FC = () => {
       </View>
     );
 
+  const SPPromptNotification: ReactElement = showSPNotifyPopUp ? (
+    <TaggPrompt
+      messageHeader={'New Suggested People Page!'}
+      messageBody={
+        <>
+          <Text>
+            A new page where you can discover new profiles. Just press the new{' '}
+          </Text>
+          <Image
+            style={styles.icon}
+            source={require('../../assets/navigationIcons/home.png')}
+          />
+          <Text> button on the tab bar to check it out!</Text>
+        </>
+      }
+      logoType={'tagg'}
+      hideCloseButton={true}
+      noPadding={true}
+      onClose={() => {}}
+    />
+  ) : (
+    <Fragment />
+  );
+
   return (
-    <SafeAreaView>
-      <StatusBar barStyle="dark-content" />
-      <View style={styles.header}>
-        <Text style={styles.headerText}>Notifications</Text>
-      </View>
-      {noNotification && (
-        <View style={styles.emptyViewContainer}>
-          <EmptyNotificationView />
+    <View style={styles.background}>
+      <SafeAreaView>
+        <StatusBar barStyle="dark-content" />
+        <View style={styles.header}>
+          <Text style={styles.headerText}>Notifications</Text>
         </View>
-      )}
-
-      {!noNotification && (
         <SectionList
           contentContainerStyle={styles.container}
           sections={sectionedNotifications}
           keyExtractor={(item, index) => index.toString()}
           renderItem={renderNotification}
           renderSectionHeader={renderSectionHeader}
+          ListHeaderComponent={SPPromptNotification}
           refreshControl={
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           }
+          ListEmptyComponent={
+            <View style={styles.emptyViewContainer}>
+              <EmptyNotificationView />
+            </View>
+          }
         />
-      )}
-    </SafeAreaView>
+      </SafeAreaView>
+      <TabsGradient />
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'white',
+  },
   header: {
     marginLeft: '8%',
     marginTop: '5%',
@@ -197,7 +240,6 @@ const styles = StyleSheet.create({
   },
   sectionHeaderContainer: {
     width: '100%',
-    backgroundColor: '#f3f2f2',
   },
   sectionHeader: {
     marginLeft: '8%',
@@ -209,7 +251,13 @@ const styles = StyleSheet.create({
     color: '#828282',
   },
   emptyViewContainer: {
-    marginTop: '22%',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    tintColor: 'grey',
   },
 });