58 lines
1.6 KiB
JavaScript
Executable File
58 lines
1.6 KiB
JavaScript
Executable File
import React, { useState, useEffect } from 'react'
|
|
import { connect } from 'react-redux'
|
|
|
|
import { deleteNotification, getUserNotifications } from '../../stores/exchange/duck/operations'
|
|
|
|
import '../../styles/indexExchange.scss'
|
|
|
|
const ExchangeNotifications = ({
|
|
user,
|
|
exchange, deleteNotification, getUserNotifications }) => {
|
|
|
|
useEffect( () => { getUserNotifications(user.id) }, [] )
|
|
|
|
const deleteOldNotification = (notifyID) => {
|
|
let notify = {
|
|
id: notifyID,
|
|
token: user.token
|
|
}
|
|
deleteNotification(notify)
|
|
}
|
|
|
|
return (
|
|
<div className='exchangeNotificationsDiv'>
|
|
<p>{ user.login } exchange notifications:</p>
|
|
<div className='notifyList'>
|
|
{ exchange.userNotifications
|
|
.sort( (a, b) => b.id - a.id )
|
|
.map( (notify, key) => {
|
|
return (
|
|
<div key={ key + 1 }>
|
|
<p>{ key + 1 }. { notify.message }</p>
|
|
<button
|
|
className='deleteButton'
|
|
onClick={ () => deleteOldNotification(notify.id) }>
|
|
x
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
user: state.user,
|
|
exchange: state.exchange
|
|
})
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
getUserNotifications: exchange => dispatch( getUserNotifications(exchange) ),
|
|
deleteNotification: exchange => dispatch( deleteNotification(exchange) )
|
|
})
|
|
|
|
export default connect(mapStateToProps,mapDispatchToProps)(ExchangeNotifications)
|