Created
February 26, 2017 10:14
-
-
Save slavic18/c7d25fa7ef1aeefc1184496f9dfd60a2 to your computer and use it in GitHub Desktop.
Events list React component with socket
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component} from 'react'; | |
import store from 'store'; | |
import {socketConnect} from 'socket.io-react'; | |
import {connect} from 'react-redux'; | |
import errHandler from '../../errHandler'; | |
// import socket events constants | |
import {storeConstants} from '../../storeConstants'; | |
/** | |
* Class for EventList component. | |
* @extends React.Component | |
*/ | |
class EventsList extends Component { | |
/** | |
* constructor | |
* @param {object} props | |
*/ | |
constructor(props) { | |
super(props); | |
this._getEvents = this._getEvents.bind(this); | |
this._newClientEvent = this._newClientEvent.bind(this); | |
} | |
/** | |
* is invoked immediately before mounting occurs. | |
*/ | |
componentWillMount() { | |
this.props.socket.on(storeConstants.getEvents, this._getEvents); | |
this.props.socket.on(storeConstants.newClientEvent, this._newClientEvent); | |
} | |
/** | |
* handle get events socket event | |
* @param {object} data | |
*/ | |
_getEvents(data) { | |
try { | |
if (data == null || typeof data !== 'object') { | |
throw new Error('Invalid data format'); | |
} | |
// get events in past. | |
let currentDateTimestamp = new Date().getTime(); | |
data = data.filter((item) => { | |
return item.date < currentDateTimestamp | |
}); | |
this.props.dispatch({ | |
type: 'GET_EVENTS', | |
data, | |
}); | |
} catch (e) { | |
console.log('Error ' + e.message); | |
errHandler(e); | |
return false; | |
} | |
} | |
/** | |
* handle new client event socket event | |
* @param {object} data | |
*/ | |
_newClientEvent(data) { | |
this.props.dispatch({ | |
type: 'NEW_CLIENT_EVENT', | |
data, | |
}); | |
} | |
/** | |
* render | |
* @return {ReactElement} markup | |
*/ | |
render() { | |
return ( | |
<div className="clients_events_left_col"> | |
<div className="clients_events_list_wrap"> | |
<ul className="clients_events_list"> | |
{this.props.events.map((event, index) => { | |
return ( | |
<li className="clients_events_list_item" key={index} | |
current={this.props.currentEvent === event._id }> | |
{event.name} | |
</li> | |
); | |
}, this)} | |
</ul> | |
</div> | |
</div> | |
) | |
} | |
} | |
/** | |
* @param {object} state | |
* @returns {{events: Array, currentEvent: *}} | |
*/ | |
function mapStateToProps(state) { | |
return { | |
events: state.chat.events || [], | |
currentEvent: state.chat.currentEvent || store.get(storeConstants.CURRENT_ROOM) | |
} | |
} | |
export default socketConnect(connect(mapStateToProps)(EventsList)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment