changed background to white, cleaned up code, show SP notification

1 files changed, 81 insertions, 34 deletions

diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index aa53c4a9..7a88c5be 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 {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,64 @@ 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>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'white',
+  },
   header: {
     marginLeft: '8%',
     marginTop: '5%',
@@ -197,7 +239,6 @@ const styles = StyleSheet.create({
   },
   sectionHeaderContainer: {
     width: '100%',
-    backgroundColor: '#f3f2f2',
   },
   sectionHeader: {
     marginLeft: '8%',
@@ -209,7 +250,13 @@ const styles = StyleSheet.create({
     color: '#828282',
   },
   emptyViewContainer: {
-    marginTop: '22%',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    tintColor: 'grey',
   },
 });