ReactJs : listenAndPromise is not a function - reactjs

Question

My project file structure
App.jsx
import React, { Component } from 'react';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router, Route ,browserHistory} from 'react-router';
import Header from './components/header';
import PreLoginHeader from './components/pre_login_header';
import BrandManagerForm from './components/brand_manager_form';
import Home from './pages/home';
import Internships from './pages/internships';
import PostNewInternship from './pages/post_new_internship';
import Applications from './pages/applications';
import Support from './pages/support';
require('./util/config-reflux')();
class App extends Component {
componentDidMount(){
}
render() {
const history = new createBrowserHistory();
return (
<div style={{height:'100%',width:'100%'}}>
{
this.checkLoggedIn() ? <Header history={history} /> : <PreLoginHeader />
}
<Router history={history}>
<Route path='/' component={Home} />
<Route path='/internships' component={Internships} />
<Route path='/register' component={BrandManagerForm} />
<Route path='/register/complete' component={BrandManagerForm} />
<Route path='/post-new-internship' component={PostNewInternship} />
<Route path='/applications' component={Applications} />
<Route path='/messages' component={Internships} />
<Route path='/messages/:id' component={Support} />
<Route path='/messages/:id/edit' component={PostNewInternship} />
{/* IT'S THE SAME VIEW AS Internships.NOT TO BE CONFUSED WITH NAME*/}
</Router>
</div>
)
}
checkLoggedIn = () => {
if (localStorage.getItem('loggedIn'))
return true
return false
}
}
export default App;
config-reflux.jsx
var Reflux = require('reflux');
var RefluxPromise = require('reflux-promise');
module.exports = function() {
// Uses the user agent's Promise implementation
Reflux.use(RefluxPromise(window.Promise)); // eslint-disable-line new-cap
};
Support.jsx
/* eslint-disable */
import React,{Component} from 'react'
import '../assets/styles/support.css'
import request from 'request'
import Breadcrumb from 'react-breadcrumb'
import moment from 'moment'
import Loader from '../components/loader'
import supportAction from '../actions/supportAction'
class Support extends Component {
constructor(props){
super(props)
this.base_url = process.env.REACT_APP_API_URL;
this.state = {
message : '',
messages:[]
}
}
componentDidMount(){
if (!this.checkLoggedIn()){
window.location = '/'
}
const that = this;
var buffer_id = this.props.params.id;
this.setState({buffer_id:buffer_id},function(){
this.fetchData()
})
var data = null
request.get({
url:`${this.base_url}/internshipbuffer/${buffer_id}`,
headers:{
'Authorization':`Bearer ${localStorage.getItem('auth-token')}`
}
},function(err,resp,body){
data = JSON.parse(body)
data.benefits = data.benefits.split('\n')
that.setState({data:data})
})
}
updateData = (result) => {
console.log(result)
}
fetchData = () => {
var params = {
'internshipbuffer':this.state.buffer_id
}
supportAction.getMessage(params).then(this.updateData)
}
getMessage = (next) => {
const that = this;
var url = `${this.base_url}/internshipbuffer/getChat?internshipbuffer=${this.state.buffer_id}`;
if (next){
url = `${this.base_url}/internshipbuffer/getChat?internshipbuffer=${this.state.buffer_id}&sort={"createdAt":-1}`
}
request.get({
url:url,
headers : {
"Authorization":`Bearer ${localStorage.getItem('auth-token')}`
}
},function(err,resp,body){
var body = JSON.parse(body)
console.log(body);
if (body){
var messages = that.state.messages
if (next){
messages = messages.concat(body.data.reverse())
}
else{
messages = body.data.reverse()
}
that.setState({messages:messages,messages_next:body.next})
}
})
}
render(){
return (
<div className="support-main">
{this.state.data ? this.renderContent() : this.renderLoading()}
</div>
)
}
checkLoggedIn = () => {
if (localStorage.getItem('loggedIn') ){
return true ;
}
return false;
}
renderLoading = () => {
return (
<Loader />
)
}
renderContent = () => {
const that = this;
var data = this.state.data;
return (
<div className="support-main-container">
<Breadcrumb
path={
[
{
path: '/messages',
label: 'Messages '
},
{
path: `/pending/${this.props.params.id}`,
label: ` ${data.title}`
}
]
}
separatorChar={' > '}
/>
<div className="card">
<div className="img-container">
<img alt={null} src={data.asseturl} id="support-brand-logo" width="50"/>
</div>
<ul className="card-brand-info-container">
<li className="bold">{localStorage.getItem('brand_name')}</li>
<li>Brand manager : {localStorage.getItem('brandmanager_name')}</li>
</ul>
<button onClick={this.editInternshipAction} className='support-edit-btn'>EDIT</button>
<div className="support-main-info">
<div> <span className="bold">Title</span> : {data.title}</div>
<div><span className="bold"> Description</span> : {data.description}</div>
<div><span className="bold"> Positions</span> : {data.positions}</div>
<div><span className="bold">Intenship Period</span> : {data.period} </div>
<div>
<span className="bold"> Benefits </span>:
<ul className="benefits-list">
{data.benefits[0]}
</ul>
</div>
<div>
<span className="bold"> Skills & Requirements</span> :
<ul className="skills-list">
{data.requirements}
</ul>
</div>
<div>
<span className="bold"> City : </span>
<ul className="city-list">
{
data.citiesvalid.map(function(item,i){
if (i !== (data.citiesvalid.length)-1)
return <li key={i} >{item},</li>
else
return <li key={i} >{item}</li>
})
}
</ul>
</div>
</div>
</div>
<div className="messages-container">
{
this.state.messages ?
this.state.messages.map(function(obj,i){
var messenger;
obj.brandmanager ? messenger = localStorage.getItem('brand_name') : messenger = 'Support'
return (that.renderMessage(obj.message,messenger,i,obj.createdAt))
}) : null
}
</div>
<div className="message-input-container">
<input className="prefix-messenger" placeholder={`${localStorage.getItem('brand_name')} :`} />
<input className="main-message" value={this.state.message} onChange={this.setMessage} />
</div>
<button onClick={this.sendMessage} className="messages-send-btn"><i style={{marginRight:'5px'}} className="fa fa-paper-plane" aria-hidden="true"></i>Send</button>
</div>
)
}
editInternshipAction = () => {
this.props.router.push(this.props.location.pathname+'/edit')
}
renderMessage = (message,messenger,i,message_date) => {
var data = this.state.data;
return (
<div key={i} className="support-message-box">
<hr />
<div className="img-container-message">
<img alt={null} src={data.asseturl} id="support-brand-logo" width="50"/>
</div>
<div className="main">
<div>
<span style={{color:'#c67763'}} className={`bold ${messenger}`}>{messenger}</span>
<span> ({moment(new Date(message_date)).format('LT')}) : {message} </span>
</div>
</div>
</div>
)
}
sendMessage = () => {
const that = this;
if (this.state.message){
request.put({
url:`${this.base_url}/internshipbuffer/putChat?internshipbuffer=${this.props.params.id}&message=${this.state.message}`,
headers:{
"Authorization":`Bearer ${localStorage.getItem('auth-token')}`
}
},function(err,resp,body){
that.setState({message:''})
that.getMessage();
})
}
else{
this.setState({message_error:'error',error_message:'Required'})
}
that.scrollToBottom(document.getElementsByClassName('messages-container')[0])
}
scrollToBottom = (element) => {
console.log(element.scrollHeight)
element.scrollTop = element.scrollHeight;
}
setMessage = (e) => {
this.setState({message:e.target.value})
if (e.target.value === ''){
this.setState({message_error:'error',error_message:'Required'})
}
else{
this.setState({message_error:'',error_message:''})
}
}
}
export default Support
supportAction.jsx
import Reflux from 'reflux'
import supportResource from '../resources/supportResource'
var actions = Reflux.createActions({
'getMessage': {
children: ['completed', 'failed']
}
});
console.log(actions)
actions.getMessage.listenAndPromise(supportResource.getMessage);
export default actions;
I have used reflux-promise module in my react app.
I have defined an action to fetch resource which fetches the data from the server.
I have used listenAndPromise in my action .
I have configured my app to use promise in config-reflux.jsx file.
Then too its showing listenAndPromise is not a function.
Any help ? Thanks !!

Answer 1

I think the order of what you import is wrong. Try to import the config before using this function.
import './util/config-reflux'; // <-- make sure you import it before any component or action using it
import Support from './pages/support';
config-reflux.jsx:
var Reflux = require('reflux');
var RefluxPromise = require('reflux-promise');
// Uses the user agent's Promise implementation
Reflux.use(RefluxPromise(window.Promise)); // eslint-disable-line new-cap