diff options
| -rw-r--r-- | src/screens/main/NotificationsScreen.tsx | 115 |
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', }, }); |