From e858873285cb862e365331ce183fb3d2282f239c Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 11 Mar 2021 10:31:59 -0800 Subject: TMA-697 Bug fixes --- src/screens/main/NotificationsScreen.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 74bcf906..1dcae36e 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -240,6 +240,7 @@ const styles = StyleSheet.create({ }, sectionHeaderContainer: { width: '100%', + backgroundColor: 'white', }, sectionHeader: { marginLeft: '8%', -- cgit v1.2.3-70-g09d2 From c55cf9fec6b252b9ef953122950a79b7bf8abe94 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 11 Mar 2021 14:57:37 -0800 Subject: TMA-643-Friend requests added, need to add section of 5 --- src/components/notifications/Notification.tsx | 3 +- src/screens/main/NotificationsScreen.tsx | 45 ++++++++++++++++----------- 2 files changed, 29 insertions(+), 19 deletions(-) (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index f83abcbc..c8a8aa06 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -256,10 +256,11 @@ const styles = StyleSheet.create({ container: { flexDirection: 'row', height: Math.round(SCREEN_HEIGHT / 10), - width: SCREEN_WIDTH * 0.9, + width: SCREEN_WIDTH, flex: 1, alignSelf: 'center', alignItems: 'center', + paddingHorizontal: '8%', }, avatarContainer: { height: 42, diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 1dcae36e..c92abdbd 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -48,7 +48,10 @@ const NotificationsScreen: React.FC = () => { const [showSPNotifyPopUp, setShowSPNotifyPopUp] = useState(false); const {user: loggedInUser} = useSelector((state: RootState) => state.user); const [sectionedNotifications, setSectionedNotifications] = useState< - {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[] + { + title: 'Friend Requests' | 'Today' | 'Yesterday' | 'This Week'; + data: NotificationType[]; + }[] >([]); const dispatch = useDispatch(); @@ -112,6 +115,7 @@ const NotificationsScreen: React.FC = () => { let todays = []; let yesterdays = []; let thisWeeks = []; + let friendRequests = []; for (const n of sortedNotifications) { const notificationDate = moment(n.timestamp); const dateAge = getDateAge(notificationDate); @@ -120,24 +124,33 @@ const NotificationsScreen: React.FC = () => { } 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; + + if (n.notification_type === 'FRD_REQ') { + friendRequests.push(newN); + } else { + switch (dateAge) { + case 'today': + todays.push(newN); + continue; + case 'yesterday': + yesterdays.push(newN); + continue; + case 'thisWeek': + thisWeeks.push(newN); + continue; + default: + continue; + } } } setSectionedNotifications( - todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0 + todays.length === 0 && + yesterdays.length === 0 && + thisWeeks.length === 0 && + friendRequests.length === 0 ? [] : [ + {title: 'Friend Requests', data: friendRequests}, {title: 'Today', data: todays}, {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, @@ -145,10 +158,6 @@ const NotificationsScreen: React.FC = () => { ); }, [lastViewed, notifications, showSPNotifyPopUp]); - useEffect(() => { - console.log(sectionedNotifications); - }, [sectionedNotifications]); - const renderNotification = ({item}: {item: NotificationType}) => ( Date: Mon, 15 Mar 2021 11:32:21 -0700 Subject: TMA 643 Footer added --- src/screens/main/NotificationsScreen.tsx | 50 ++++++++++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index c92abdbd..568c8c73 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -53,6 +53,10 @@ const NotificationsScreen: React.FC = () => { data: NotificationType[]; }[] >([]); + + const [moreFooterEnabled, setMoreFooterEnabled] = useState(false); + const [requestLimit, setrequestLimit] = useState(4); + const dispatch = useDispatch(); const refreshNotifications = () => { @@ -143,6 +147,7 @@ const NotificationsScreen: React.FC = () => { } } } + setSectionedNotifications( todays.length === 0 && yesterdays.length === 0 && @@ -169,10 +174,38 @@ const NotificationsScreen: React.FC = () => { const renderSectionHeader = ({section: {title, data}}) => data.length !== 0 && ( - {title} + + {title} + ); + const renderSectionFooter = ({section: {title, data}}) => { + if (title === 'Friend Request' && data.length < requestLimit) { + return ( + + + {title} + + + ); + } + + return null; + }; + const SPPromptNotification: ReactElement = showSPNotifyPopUp ? ( { index.toString()} + keyExtractor={(_item, index) => index.toString()} renderItem={renderNotification} renderSectionHeader={renderSectionHeader} + renderSectionFooter={renderSectionFooter} ListHeaderComponent={SPPromptNotification} refreshControl={ @@ -251,15 +285,25 @@ const styles = StyleSheet.create({ width: '100%', backgroundColor: 'white', }, - sectionHeader: { + + sectionLocation: { marginLeft: '8%', marginTop: '5%', marginBottom: '2%', + }, + + sectionFont: { fontWeight: '600', fontSize: normalize(12), lineHeight: normalize(14), + }, + + sectionHeader: { color: '#828282', }, + sectionFooter: { + color: '#698DD3', + }, emptyViewContainer: { flex: 1, justifyContent: 'center', -- cgit v1.2.3-70-g09d2 From c8c6a803491dfe697d3af6d753be4c321209fed0 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Mar 2021 13:07:30 -0700 Subject: Added expansion --- src/screens/main/NotificationsScreen.tsx | 63 ++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 11 deletions(-) (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 568c8c73..24be7123 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -17,6 +17,7 @@ import { Text, View, } from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {TabsGradient, TaggPrompt} from '../../components'; @@ -54,8 +55,13 @@ const NotificationsScreen: React.FC = () => { }[] >([]); + const DEFAULT_NOTIFICATIONS_SIZE = 2; + const [moreFooterEnabled, setMoreFooterEnabled] = useState(false); - const [requestLimit, setrequestLimit] = useState(4); + const [requestLimit, setrequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE); + const [allFriendRequests, setFriendRequests] = useState( + [], + ); const dispatch = useDispatch(); @@ -147,7 +153,7 @@ const NotificationsScreen: React.FC = () => { } } } - + setFriendRequests(friendRequests); setSectionedNotifications( todays.length === 0 && yesterdays.length === 0 && @@ -155,13 +161,16 @@ const NotificationsScreen: React.FC = () => { friendRequests.length === 0 ? [] : [ - {title: 'Friend Requests', data: friendRequests}, + { + title: 'Friend Requests', + data: friendRequests.slice(0, requestLimit), + }, {title: 'Today', data: todays}, {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, ], ); - }, [lastViewed, notifications, showSPNotifyPopUp]); + }, [lastViewed, notifications, showSPNotifyPopUp, requestLimit]); const renderNotification = ({item}: {item: NotificationType}) => ( { /> ); - const renderSectionHeader = ({section: {title, data}}) => + const renderSectionHeader = ({ + section: {title, data}, + }: { + section: {title: string; data: NotificationType[]}; + }) => data.length !== 0 && ( { ); - const renderSectionFooter = ({section: {title, data}}) => { - if (title === 'Friend Request' && data.length < requestLimit) { + const renderSectionFooter = ({ + section: {title, data}, + }: { + section: {title: string; data: NotificationType[]}; + }) => { + if (title === 'Friend Requests') { + if (moreFooterEnabled) { + return ( + { + setrequestLimit(DEFAULT_NOTIFICATIONS_SIZE); + setMoreFooterEnabled(false); + }}> + + {'Hide'} + + + ); + } return ( - + { + setrequestLimit(allFriendRequests.length); + setMoreFooterEnabled(true); + }}> - {title} + {`+ ${allFriendRequests.length - requestLimit} More`} - + ); } @@ -248,6 +288,7 @@ const NotificationsScreen: React.FC = () => { refreshControl={ } + extraData={requestLimit} ListEmptyComponent={ -- cgit v1.2.3-70-g09d2 From 6962e44c64d96ccb3bd47a659bfb38c14c765132 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Mar 2021 13:41:33 -0700 Subject: TMA 643 Added Hide Image --- src/assets/images/hide-caret.png | Bin 0 -> 285 bytes src/assets/images/hide-caret@2x.png | Bin 0 -> 441 bytes src/assets/images/hide-caret@3x.png | Bin 0 -> 603 bytes src/screens/main/NotificationsScreen.tsx | 47 ++++++++++++++++++------------- 4 files changed, 27 insertions(+), 20 deletions(-) create mode 100644 src/assets/images/hide-caret.png create mode 100644 src/assets/images/hide-caret@2x.png create mode 100644 src/assets/images/hide-caret@3x.png (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/assets/images/hide-caret.png b/src/assets/images/hide-caret.png new file mode 100644 index 00000000..bb05b53a Binary files /dev/null and b/src/assets/images/hide-caret.png differ diff --git a/src/assets/images/hide-caret@2x.png b/src/assets/images/hide-caret@2x.png new file mode 100644 index 00000000..3f4689d3 Binary files /dev/null and b/src/assets/images/hide-caret@2x.png differ diff --git a/src/assets/images/hide-caret@3x.png b/src/assets/images/hide-caret@3x.png new file mode 100644 index 00000000..a44c36fe Binary files /dev/null and b/src/assets/images/hide-caret@3x.png differ diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 24be7123..675d415d 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -192,7 +192,6 @@ const NotificationsScreen: React.FC = () => { styles.sectionFont, styles.sectionHeader, styles.sectionLocation, - styles.sectionHeader, ]}> {title} @@ -213,34 +212,39 @@ const NotificationsScreen: React.FC = () => { setrequestLimit(DEFAULT_NOTIFICATIONS_SIZE); setMoreFooterEnabled(false); }}> + + + + {'Hide'} + + + + ); + } + + if (allFriendRequests.length > DEFAULT_NOTIFICATIONS_SIZE) { + return ( + { + setrequestLimit(allFriendRequests.length); + setMoreFooterEnabled(true); + }}> - {'Hide'} + {`+ ${allFriendRequests.length - requestLimit} More`} ); } - return ( - { - setrequestLimit(allFriendRequests.length); - setMoreFooterEnabled(true); - }}> - - {`+ ${allFriendRequests.length - requestLimit} More`} - - - ); } return null; @@ -338,7 +342,10 @@ const styles = StyleSheet.create({ fontSize: normalize(12), lineHeight: normalize(14), }, - + hiddenSectionContainer: { + flexDirection: 'row', + }, + hideImageStyles: {alignSelf: 'center', marginRight: 8}, sectionHeader: { color: '#828282', }, -- cgit v1.2.3-70-g09d2 From 664757ff9f48bddccf3accea3c11c367f3d141c8 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Mar 2021 13:56:33 -0700 Subject: TMA 643: FR changes --- src/screens/main/NotificationsScreen.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 675d415d..ed6c246e 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -58,7 +58,7 @@ const NotificationsScreen: React.FC = () => { const DEFAULT_NOTIFICATIONS_SIZE = 2; const [moreFooterEnabled, setMoreFooterEnabled] = useState(false); - const [requestLimit, setrequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE); + const [requestLimit, setRequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE); const [allFriendRequests, setFriendRequests] = useState( [], ); @@ -154,6 +154,7 @@ const NotificationsScreen: React.FC = () => { } } setFriendRequests(friendRequests); + setMoreFooterEnabled(requestLimit === friendRequests.length); setSectionedNotifications( todays.length === 0 && yesterdays.length === 0 && @@ -209,8 +210,7 @@ const NotificationsScreen: React.FC = () => { { - setrequestLimit(DEFAULT_NOTIFICATIONS_SIZE); - setMoreFooterEnabled(false); + setRequestLimit(DEFAULT_NOTIFICATIONS_SIZE); }}> @@ -231,8 +231,7 @@ const NotificationsScreen: React.FC = () => { { - setrequestLimit(allFriendRequests.length); - setMoreFooterEnabled(true); + setRequestLimit(allFriendRequests.length); }}> Date: Tue, 16 Mar 2021 09:50:39 -0700 Subject: PR Bug fixes --- src/screens/main/NotificationsScreen.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'src/screens/main/NotificationsScreen.tsx') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index ed6c246e..501c44fc 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -57,7 +57,7 @@ const NotificationsScreen: React.FC = () => { const DEFAULT_NOTIFICATIONS_SIZE = 2; - const [moreFooterEnabled, setMoreFooterEnabled] = useState(false); + const [footerEnabled, setFooterEnabled] = useState(false); const [requestLimit, setRequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE); const [allFriendRequests, setFriendRequests] = useState( [], @@ -154,7 +154,10 @@ const NotificationsScreen: React.FC = () => { } } setFriendRequests(friendRequests); - setMoreFooterEnabled(requestLimit === friendRequests.length); + setFooterEnabled( + requestLimit === friendRequests.length && + friendRequests.length > DEFAULT_NOTIFICATIONS_SIZE, + ); setSectionedNotifications( todays.length === 0 && yesterdays.length === 0 && @@ -200,12 +203,12 @@ const NotificationsScreen: React.FC = () => { ); const renderSectionFooter = ({ - section: {title, data}, + section: {title}, }: { - section: {title: string; data: NotificationType[]}; + section: {title: string}; }) => { if (title === 'Friend Requests') { - if (moreFooterEnabled) { + if (footerEnabled) { return (