From 7932e2238515d3038bf37abbc10352be855eaadf Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 13:06:21 -0800 Subject: notification view changes --- src/assets/images/empty_notifications.png | Bin 0 -> 7787 bytes src/constants/constants.ts | 2 + src/constants/strings.ts | 6 ++- src/screens/main/NotificationsScreen.tsx | 36 +++++++++++----- .../main/notification/EmptyNotificationView.tsx | 46 +++++++++++++++++++++ 5 files changed, 79 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/empty_notifications.png create mode 100644 src/screens/main/notification/EmptyNotificationView.tsx (limited to 'src') diff --git a/src/assets/images/empty_notifications.png b/src/assets/images/empty_notifications.png new file mode 100644 index 00000000..5a5828e4 Binary files /dev/null and b/src/assets/images/empty_notifications.png differ diff --git a/src/constants/constants.ts b/src/constants/constants.ts index f58aa686..611fd748 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -75,6 +75,8 @@ export const AVATAR_GRADIENT = { end: '#215151', }; +export const NOTIFICATION_GRADIENT = ['rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)'] + export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, FACEBOOK: FACEBOOK_FONT_COLOR, diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 9680320a..3d8cbfe7 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -53,4 +53,8 @@ export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n con export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'; export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category'; -export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; \ No newline at end of file +export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; + +//Notifications +export const UP_TO_DATE = 'Up-to-Date!'; +export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; \ No newline at end of file diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 266ba3f9..6fa1a272 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -13,6 +13,7 @@ import { import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {Notification} from '../../components/notifications'; +import EmptyNotificationView from './notification/EmptyNotificationView'; import { loadUserNotifications, updateNewNotificationReceived, @@ -29,6 +30,7 @@ const NotificationsScreen: React.FC = () => { (state: RootState) => state.user, ); const [refreshing, setRefreshing] = useState(false); + const [noActivity, setNoActivity] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState( undefined, @@ -128,6 +130,9 @@ const NotificationsScreen: React.FC = () => { {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, ]); + setNoActivity( + todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, + ); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( @@ -152,16 +157,24 @@ const NotificationsScreen: React.FC = () => { Notifications - index.toString()} - renderItem={renderNotification} - renderSectionHeader={renderSectionHeader} - refreshControl={ - - } - /> + {noActivity === true && ( + + + + )} + + {noActivity === false && ( + index.toString()} + renderItem={renderNotification} + renderSectionHeader={renderSectionHeader} + refreshControl={ + + } + /> + )} ); }; @@ -195,6 +208,9 @@ const styles = StyleSheet.create({ marginBottom: '2%', fontSize: 15, }, + emptyViewContainer: { + marginTop: '22%', + }, }); export default NotificationsScreen; diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx new file mode 100644 index 00000000..194b16d0 --- /dev/null +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; +import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; +const EmptyNotificationView: React.FC = () => { + return ( + + + + + + {UP_TO_DATE} + + + {NO_NEW_NOTIFICATIONS} + + + ); +}; + +const style = StyleSheet.create({ + container: {alignItems: 'center'}, + topMargin: {marginTop: 43}, + upperTextStyle: { + fontWeight: '700', + fontSize: 23, + fontStyle: 'normal', + lineHeight: 40, + }, + bottomTextStyle: { + color: '#2D3B45', + fontWeight: '600', + fontSize: 20, + fontStyle: 'normal', + lineHeight: 40, + }, +}); + +export default EmptyNotificationView; -- cgit v1.2.3-70-g09d2 From 2f507b898fe7f366d0ad714273ebe1cb86587394 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 13:11:37 -0800 Subject: notification view variable changes --- src/screens/main/NotificationsScreen.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 6fa1a272..4979c8d8 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -30,7 +30,7 @@ const NotificationsScreen: React.FC = () => { (state: RootState) => state.user, ); const [refreshing, setRefreshing] = useState(false); - const [noActivity, setNoActivity] = useState(false); + const [noNotification, setNoNotification] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState( undefined, @@ -130,7 +130,7 @@ const NotificationsScreen: React.FC = () => { {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, ]); - setNoActivity( + setNoNotification( todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, ); }, [lastViewed, notifications]); @@ -157,13 +157,13 @@ const NotificationsScreen: React.FC = () => { Notifications - {noActivity === true && ( + {noNotification === true && ( )} - {noActivity === false && ( + {noNotification === false && ( Date: Mon, 15 Feb 2021 13:49:03 -0800 Subject: changes in style variable --- src/constants/constants.ts | 5 ++++- src/screens/main/notification/EmptyNotificationView.tsx | 15 +++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 611fd748..3c43fb6c 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -75,7 +75,10 @@ export const AVATAR_GRADIENT = { end: '#215151', }; -export const NOTIFICATION_GRADIENT = ['rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)'] +export const NOTIFICATION_GRADIENT = [ + 'rgba(247, 248, 248, 1)', + 'rgba(247, 248, 248, 0)', +]; export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index 194b16d0..34649f26 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -5,9 +5,9 @@ import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; const EmptyNotificationView: React.FC = () => { return ( - + @@ -15,17 +15,17 @@ const EmptyNotificationView: React.FC = () => { source={require('../../../assets/images/empty_notifications.png')} /> - - {UP_TO_DATE} + + {UP_TO_DATE} - {NO_NEW_NOTIFICATIONS} + {NO_NEW_NOTIFICATIONS} ); }; -const style = StyleSheet.create({ +const styles = StyleSheet.create({ container: {alignItems: 'center'}, topMargin: {marginTop: 43}, upperTextStyle: { @@ -41,6 +41,9 @@ const style = StyleSheet.create({ fontStyle: 'normal', lineHeight: 40, }, + backgroundLinearView: { + borderRadius: 135.5, + }, }); export default EmptyNotificationView; -- cgit v1.2.3-70-g09d2 From 2eaa9718131dcd9cb498f9b9e3c6b30dbbe3551c Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 13:50:28 -0800 Subject: SignedCommit Changes --- src/screens/main/notification/EmptyNotificationView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index 34649f26..b76a955b 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; +import {Image, Text, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; -- cgit v1.2.3-70-g09d2 From db2ebf4e73a491f2818f4d2575c10515d2a21614 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 15:05:36 -0800 Subject: TMA-551: PR updates --- src/constants/strings.ts | 6 +- src/screens/main/NotificationsScreen.tsx | 72 +++++++++++----------- .../main/notification/EmptyNotificationView.tsx | 13 ++-- 3 files changed, 45 insertions(+), 46 deletions(-) (limited to 'src') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 3d8cbfe7..5a9be5fc 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -44,17 +44,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; +export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code'; +export const UP_TO_DATE = 'Up-to-Date!'; export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!'; export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'; export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category'; export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; - -//Notifications -export const UP_TO_DATE = 'Up-to-Date!'; -export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; \ No newline at end of file diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 4979c8d8..d9e5a57f 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -97,42 +97,44 @@ const NotificationsScreen: React.FC = () => { // handles sectioning notifications to "date age" // mark notifications as read or unread useEffect(() => { - const sortedNotifications = (notifications ?? []) - .slice() - .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); - let todays = []; - let yesterdays = []; - let thisWeeks = []; - for (const n of sortedNotifications) { - const notificationDate = moment(n.timestamp); - const dateAge = getDateAge(notificationDate); - if (dateAge === 'unknown') { - continue; - } - 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: + if (notifications?.length > 0) { + const sortedNotifications = (notifications ?? []) + .slice() + .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); + let todays = []; + let yesterdays = []; + let thisWeeks = []; + for (const n of sortedNotifications) { + const notificationDate = moment(n.timestamp); + const dateAge = getDateAge(notificationDate); + if (dateAge === 'unknown') { continue; + } + 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; + } } + setSectionedNotifications([ + {title: 'Today', data: todays}, + {title: 'Yesterday', data: yesterdays}, + {title: 'This Week', data: thisWeeks}, + ]); } - setSectionedNotifications([ - {title: 'Today', data: todays}, - {title: 'Yesterday', data: yesterdays}, - {title: 'This Week', data: thisWeeks}, - ]); - setNoNotification( - todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, - ); + setNoNotification(notifications && notifications.length === 0); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( @@ -157,13 +159,13 @@ const NotificationsScreen: React.FC = () => { Notifications - {noNotification === true && ( + {noNotification && ( )} - {noNotification === false && ( + {!noNotification && ( { return ( @@ -27,19 +28,17 @@ const EmptyNotificationView: React.FC = () => { const styles = StyleSheet.create({ container: {alignItems: 'center'}, - topMargin: {marginTop: 43}, + topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, upperTextStyle: { fontWeight: '700', - fontSize: 23, - fontStyle: 'normal', - lineHeight: 40, + fontSize: normalize(23), + lineHeight: normalize(40), }, bottomTextStyle: { color: '#2D3B45', fontWeight: '600', - fontSize: 20, - fontStyle: 'normal', - lineHeight: 40, + fontSize: normalize(20), + lineHeight: normalize(40), }, backgroundLinearView: { borderRadius: 135.5, -- cgit v1.2.3-70-g09d2 From a9b60f95f8f863249c79de8e4ae07301f75005de Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 16:30:16 -0800 Subject: TMA-551: PR updates --- src/screens/main/NotificationsScreen.tsx | 68 ++++++++++++++++---------------- 1 file changed, 33 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index d9e5a57f..ca921f75 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -97,44 +97,42 @@ const NotificationsScreen: React.FC = () => { // handles sectioning notifications to "date age" // mark notifications as read or unread useEffect(() => { - if (notifications?.length > 0) { - const sortedNotifications = (notifications ?? []) - .slice() - .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); - let todays = []; - let yesterdays = []; - let thisWeeks = []; - for (const n of sortedNotifications) { - const notificationDate = moment(n.timestamp); - const dateAge = getDateAge(notificationDate); - if (dateAge === 'unknown') { + const sortedNotifications = (notifications ?? []) + .slice() + .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); + let todays = []; + let yesterdays = []; + let thisWeeks = []; + for (const n of sortedNotifications) { + const notificationDate = moment(n.timestamp); + const dateAge = getDateAge(notificationDate); + if (dateAge === 'unknown') { + continue; + } + 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; - } - 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; - } } - setSectionedNotifications([ - {title: 'Today', data: todays}, - {title: 'Yesterday', data: yesterdays}, - {title: 'This Week', data: thisWeeks}, - ]); } - setNoNotification(notifications && notifications.length === 0); + setSectionedNotifications([ + {title: 'Today', data: todays}, + {title: 'Yesterday', data: yesterdays}, + {title: 'This Week', data: thisWeeks}, + ]); + setNoNotification( + todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, + ); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( -- cgit v1.2.3-70-g09d2