From 1e96f2cdf6b3753b526b41e3d4468bb0032c0483 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Mar 2021 17:44:45 -0500 Subject: updated tagg prompt component to be more generic --- src/components/common/TaggPrompt.tsx | 62 +++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 22 deletions(-) (limited to 'src') 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 = ({ 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 ( - - + + {messageHeader} {messageBody} - { - onClose(); - }}> - - + {!hideCloseButton && ( + { + onClose(); + }}> + + + )} ); }; @@ -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; -- cgit v1.2.3-70-g09d2 From 9ba6dd9a4ac15a92590743f5ee3e32796cc85454 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Mar 2021 17:45:35 -0500 Subject: changed background to white, cleaned up code, show SP notification --- src/screens/main/NotificationsScreen.tsx | 115 ++++++++++++++++++++++--------- 1 file changed, 81 insertions(+), 34 deletions(-) (limited to 'src') 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( 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}) => ( { ); + const SPPromptNotification: ReactElement = showSPNotifyPopUp ? ( + + + A new page where you can discover new profiles. Just press the new{' '} + + + button on the tab bar to check it out! + + } + logoType={'tagg'} + hideCloseButton={true} + noPadding={true} + onClose={() => {}} + /> + ) : ( + + ); + return ( - - - - Notifications - - {noNotification && ( - - + + + + + Notifications - )} - - {!noNotification && ( index.toString()} renderItem={renderNotification} renderSectionHeader={renderSectionHeader} + ListHeaderComponent={SPPromptNotification} refreshControl={ } + ListEmptyComponent={ + + + + } /> - )} - + + ); }; 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', }, }); -- cgit v1.2.3-70-g09d2 From 1132d3399939803ea25f435dd85974432494ebdd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Mar 2021 17:57:20 -0500 Subject: added tabs bar gradient that was missing for a long long time --- src/screens/main/NotificationsScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 7a88c5be..74bcf906 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -19,7 +19,7 @@ import { } from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; -import {TaggPrompt} from '../../components'; +import {TabsGradient, TaggPrompt} from '../../components'; import {Notification} from '../../components/notifications'; import { loadUserNotifications, @@ -212,6 +212,7 @@ const NotificationsScreen: React.FC = () => { } /> + ); }; -- cgit v1.2.3-70-g09d2