Skip to content

Commit 9c0f3da

Browse files
luizrrodriguesluizrrodrigues
committed
Backend Integration + Fixes + Broadcast type
1 parent c3000df commit 9c0f3da

File tree

5 files changed

+66
-53
lines changed

5 files changed

+66
-53
lines changed

‎dist/dev/index.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/prod/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/LoginNav/index.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import _ from 'lodash'
1010

1111
const LoginNav = ({
1212
loggedIn,
13-
notificationButtonState,
1413
notifications,
1514
accountMenu,
1615
switchText,
@@ -19,6 +18,7 @@ const LoginNav = ({
1918
showNotification,
2019
profile,
2120
authURLs,
21+
auth,
2222
markNotificationAsRead,
2323
markAllNotificationAsRead,
2424
markAllNotificationAsSeen,
@@ -40,6 +40,14 @@ const LoginNav = ({
4040
setOpenAccountMenu(x => !x)
4141
}
4242

43+
// process seenNotifications
44+
const seenNotifications = _.filter((notifications || []), t => !t.isSeen && !t.isRead)
45+
.map(opt => opt.id)
46+
.join('-')
47+
48+
// process unReadNotifications
49+
const unReadNotifications = _.filter((notifications || []), t => t.isRead === false).length > 0
50+
4351
const renderLoginPanel = () => {
4452
if (showNotification) {
4553
return ([
@@ -51,7 +59,7 @@ const LoginNav = ({
5159
/>,
5260
<UserInfo
5361
profile={profile}
54-
newNotifications={(notifications && _.countBy(notifications || [], n => !n.isSeen).true > 0) && 'new'}
62+
newNotifications={!!seenNotifications}
5563
onClick={handleClickUserInfo}
5664
open={openAccountMenu}
5765
key='user-info'
@@ -62,7 +70,7 @@ const LoginNav = ({
6270
return (
6371
<UserInfo
6472
profile={profile}
65-
newNotifications={(notifications && _.countBy(notifications || [], n => !n.isSeen).true > 0) && 'new'}
73+
newNotifications={!!seenNotifications}
6674
onClick={handleClickUserInfo}
6775
open={openAccountMenu}
6876
key='user-info'
@@ -88,9 +96,12 @@ const LoginNav = ({
8896
open={openNotifications}
8997
notifications={notifications}
9098
onClose={() => {
99+
seenNotifications &&
100+
markAllNotificationAsSeen(seenNotifications, auth.tokenV3)
91101
setOpenNotifications(false)
92-
markAllNotificationAsSeen()
93102
}}
103+
auth={auth}
104+
unReadNotifications={unReadNotifications}
94105
markNotificationAsRead={markNotificationAsRead}
95106
markAllNotificationAsRead={markAllNotificationAsRead}
96107
dismissChallengeNotifications={dismissChallengeNotifications}
@@ -100,7 +111,7 @@ const LoginNav = ({
100111
open={openAccountMenu}
101112
menu={accountMenu}
102113
switchText={switchText}
103-
numNotifications={_.filter((notifications || []), n => n.isSeen === false).length}
114+
numNotifications={_.filter((notifications || []), n => !n.isSeen && !n.isRead).length}
104115
onClickNotifications={handleClickNotifications}
105116
onSwitch={onSwitch}
106117
onClose={() => {
@@ -114,13 +125,13 @@ const LoginNav = ({
114125

115126
LoginNav.propTypes = {
116127
loggedIn: PropTypes.bool,
117-
notificationButtonState: PropTypes.string,
118128
notifications: PropTypes.array,
119129
accountMenu: PropTypes.array,
120130
onSwitch: PropTypes.func,
121131
onMenuOpen: PropTypes.func,
122132
showNotification: PropTypes.bool,
123133
profile: PropTypes.shape(),
134+
auth: PropTypes.shape(),
124135
switchText: PropTypes.shape(),
125136
authURLs: PropTypes.shape(),
126137
markNotificationAsRead: PropTypes.func.isRequired,

‎src/components/NotificationsPopup/NotificationList.js

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,20 @@ import BackArrow from '../../assets/images/left-arrow.svg'
88
import GearIcon from '../../assets/images/icon-settings-gear.svg'
99
import TickIcon from '../../assets/images/icon-checkmark.svg'
1010
import NotificationIcon from '../../assets/images/icon-bell.svg'
11+
12+
// TODO: We change this later based on API event mapping
1113
const eventTypes = {
1214
PROJECT: {
13-
ACTIVE: 'connect.notification.project.active',
14-
COMPLETED: 'connect.notification.project.completed'
15+
ACTIVE: [
16+
'challenge.notification.events',
17+
'submission.notification.create'
18+
],
19+
BROADCAST: 'admin.notifications.broadcast',
20+
COMPLETED: 'challenge.notification.completed'
1521
}
1622
}
17-
const Item = ({ item, onDismiss, markNotificationAsRead }) =>
23+
24+
const Item = ({ item, auth, onDismiss, markNotificationAsRead }) =>
1825
<div className={styles['noti-item']}>
1926
<div className={styles.left}>
2027
<p className={styles['txt']}>{item.contents}</p>
@@ -24,12 +31,15 @@ const Item = ({ item, onDismiss, markNotificationAsRead }) =>
2431
{
2532
!item.isRead &&
2633
(<div className={cn([styles.point, item.isSeen && styles['point-grey'], !item.isSeen && styles['point-red']])}
27-
onClick={() => { markNotificationAsRead(item) }} />)}
34+
onClick={() => {
35+
markNotificationAsRead(item, auth.tokenV3)
36+
}} />)}
2837
</div>
2938
</div>
3039

3140
Item.propTypes = {
32-
item: PropTypes.object,
41+
item: PropTypes.object.isRequired,
42+
auth: PropTypes.shape().isRequired,
3343
onDismiss: PropTypes.func,
3444
markNotificationAsRead: PropTypes.func.isRequired
3545
}
@@ -39,45 +49,25 @@ export default class NotificationList extends React.Component {
3949
super(props)
4050
this.state = {
4151
completedSection: [],
42-
nonCompletedSection: []
52+
nonCompletedSection: [],
53+
unreadCount: 0
4354
}
4455
}
4556

46-
componentDidMount () {
47-
const { notifications } = this.props
48-
this.setState({
49-
completedSection: _.uniq(
50-
(notifications || [
51-
52-
])).filter(t => t.isComplete)
53-
})
54-
this.setState({
55-
nonCompletedSection: _.uniq(
56-
(notifications || [
57-
58-
])).filter(t => !t.isComplete)
59-
})
60-
}
61-
6257
challenges (list) {
6358
list = list || []
64-
const challengeTitles = _.uniq(
65-
list.map(noti => noti.sourceName).filter(x => x)
66-
)
67-
var group = challengeTitles.map(title =>
59+
const challengeTitles = _.uniq(list.map(noti => noti.sourceName).filter(x => x))
60+
return challengeTitles.map(title =>
6861
({
6962
challengeTitle: title, items: list.filter(t => t.sourceName === title)
7063
}))
71-
72-
return group
7364
}
7465

7566
render () {
76-
const { onClose, onSettings, onDismiss, notifications, markNotificationAsRead,
77-
markAllNotificationAsRead, dismissChallengeNotifications } = this.props
78-
let completedSection = _.filter((notifications || []), t => t.eventType === eventTypes.PROJECT.COMPLETED)
79-
let nonCompletedSection = _.filter((notifications || []), t => t.eventType !== eventTypes.PROJECT.COMPLETED)
80-
const unreadCount = _.filter((notifications || []), t => t.isRead === false).length
67+
const { onClose, onSettings, notifications, onDismiss, unReadNotifications,
68+
markNotificationAsRead, markAllNotificationAsRead,
69+
dismissChallengeNotifications, auth } = this.props
70+
8171
return (
8272
<>
8373
<div className={styles['noti-header']}>
@@ -101,8 +91,10 @@ export default class NotificationList extends React.Component {
10191
<div className={styles.rights}>
10292
<span
10393
role='button'
104-
className={cn(styles['white-link'], unreadCount <= 0 && styles['disabled'])}
105-
onClick={unreadCount > 0 ? () => markAllNotificationAsRead() : null}
94+
className={cn(styles['white-link'], !unReadNotifications && styles['disabled'])}
95+
onClick={() => {
96+
unReadNotifications && markAllNotificationAsRead(auth.tokenV3)
97+
}}
10698
>
10799
Mark All as Read
108100
</span>
@@ -117,9 +109,11 @@ export default class NotificationList extends React.Component {
117109
</div>
118110
<div className={styles['rights-mobile']}>
119111
<div
120-
className={cn(styles['btn-tick'], unreadCount <= 0 && styles['disabled'])}
112+
className={cn(styles['btn-tick'], !unReadNotifications && styles['disabled'])}
121113
role='button'
122-
onClick={unreadCount > 0 ? markAllNotificationAsRead : null}
114+
onClick={() => {
115+
unReadNotifications && markAllNotificationAsRead(auth.tokenV3)
116+
}}
123117
>
124118
<TickIcon />
125119
</div>
@@ -134,7 +128,7 @@ export default class NotificationList extends React.Component {
134128
<div className={styles['noti-body']}>
135129
<Fragment key='nonComplete'>
136130
{
137-
this.challenges(nonCompletedSection).map((challenge, challengeIdx) =>
131+
this.challenges(_.uniq((notifications || [])).filter(t => !eventTypes.PROJECT.COMPLETED.includes(t.eventType))).map((challenge, challengeIdx) =>
138132
(
139133
<Fragment key={`nonComplete-${challengeIdx}`}>
140134
<div key={`noti-${challengeIdx}`} className={styles['challenge-title']}>
@@ -143,6 +137,7 @@ export default class NotificationList extends React.Component {
143137
{challenge.items.map((item, itemIdx) =>
144138
(<Item
145139
item={item}
140+
auth={auth}
146141
markNotificationAsRead={markNotificationAsRead}
147142
key={`noti-${challengeIdx}-${itemIdx}`}
148143
onDismiss={() => onDismiss([item])}
@@ -154,14 +149,14 @@ export default class NotificationList extends React.Component {
154149
<div className={styles['completed-header']}>Completed Challenges</div>
155150
<Fragment key='completed'>
156151
{
157-
this.challenges(completedSection).map((challenge, challengeIdx) =>
152+
this.challenges(_.uniq((notifications || [])).filter(t => eventTypes.PROJECT.COMPLETED.includes(t.eventType))).map((challenge, challengeIdx) =>
158153
(
159154
<div key={`noti-completed-${challengeIdx}`} className={cn([styles['challenge-title'], styles['completed-challenge']])}>
160155
<span>{challenge.challengeTitle}</span>
161156
<div className={styles['dismiss-challenge']} onClick={c => {
162157
const challegeId = challenge && challenge.items && challenge.items.length && challenge.items[0].sourceId
163158
if (challegeId) {
164-
dismissChallengeNotifications(challegeId)
159+
dismissChallengeNotifications(challegeId, auth.tokenV3)
165160
}
166161
}}>&times;</div>
167162
</div>
@@ -179,12 +174,14 @@ export default class NotificationList extends React.Component {
179174

180175
NotificationList.defaultProps = {
181176
notifications: [],
177+
auth: null,
182178
onDismiss: () => null,
183179
markAllNotificationAsRead: () => null,
184180
markNotificationAsRead: () => null
185181
}
186182

187183
NotificationList.propTypes = {
184+
auth: PropTypes.shape(),
188185
/**
189186
* Array of Notifications, each with properties:
190187
*
@@ -212,7 +209,7 @@ NotificationList.propTypes = {
212209
onSettings: PropTypes.func,
213210

214211
onClose: PropTypes.func,
215-
212+
unReadNotifications: PropTypes.bool,
216213
markNotificationAsRead: PropTypes.func.isRequired,
217214
markAllNotificationAsRead: PropTypes.func.isRequired,
218215
dismissChallengeNotifications: PropTypes.func.isRequired

‎src/components/NotificationsPopup/index.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,17 @@ import styles from './styles.module.scss'
55
import EmptyNotifications from './EmptyNotifications'
66
import NotificationList from './NotificationList'
77

8-
const NotificationsPopup = ({ open, onClose, emptyTitle,
9-
emptyText, notifications, markNotificationAsRead, markAllNotificationAsRead, dismissChallengeNotifications }) =>
8+
const NotificationsPopup = ({ open, onClose, emptyTitle, markNotificationAsRead,
9+
emptyText, notifications, unReadNotifications,
10+
markAllNotificationAsRead, dismissChallengeNotifications, auth }) =>
1011
(
1112
<div className={cn(styles['notifications-panel'], open && styles.open)}>
1213
<div className={styles.backdrop} onClick={onClose} />
1314
{notifications && notifications.length > 0 ? (
1415
<NotificationList notifications={notifications}
1516
markNotificationAsRead={markNotificationAsRead}
17+
auth={auth}
18+
unReadNotifications={unReadNotifications}
1619
markAllNotificationAsRead={markAllNotificationAsRead}
1720
dismissChallengeNotifications={dismissChallengeNotifications}
1821
onClose={onClose} />
@@ -35,6 +38,7 @@ NotificationsPopup.propTypes = {
3538
onClose: PropTypes.func,
3639
emptyTitle: PropTypes.node,
3740
emptyText: PropTypes.node,
41+
auth: PropTypes.shape(),
3842

3943
/**
4044
* Array of Notifications, each with properties:
@@ -45,6 +49,7 @@ NotificationsPopup.propTypes = {
4549
* - timestamp {number}
4650
*/
4751
notifications: PropTypes.array,
52+
unReadNotifications: PropTypes.bool,
4853
markNotificationAsRead: PropTypes.func.isRequired,
4954
markAllNotificationAsRead: PropTypes.func.isRequired,
5055
dismissChallengeNotifications: PropTypes.func.isRequired

0 commit comments

Comments
 (0)