I been trying to debug a annoying problem for too many hours now. I'm currently using a component called legit scheduler. The scheduler takes in a variable called event that I can define in a Flux store locally and displays just fine. But when define the same exact data in a Mongo database and hook it up to the same store the scheduler stops displaying the events.
I'm using React-Render and might be the way I'm using that is causing the problem. Or there might be something wrong with the data that comes from MonogDB. Or the fault could be in the scheduler as it is still very young.
The file that renders this data actually has two components that are consuming the data. One of them (OperationList) renders the information from database just fine but the scheduler does not. Here is what is see when I comment out the piece of code that fetches from database
operationStore.onChange(function(items){
// events = items;
})
And then when I uncomment that code inside the onChange the store data gets replaced by what is inside the database.js as expected. But this is what is see when that occurs.
and I get the following warning when the onChange function triggers
app.js:52469 Warning: [react-router] You cannot change <Router routes>; it will be ignored
Why is the scheduler having problems with stuff from the database and my OperationList works just fine?
Here are the files of interest.
components/Scheduler.jsx
var React = require('react');
var Scheduler = require('legit-scheduler/lib/scheduler');
var RangeDate = require('legit-scheduler/lib/range_date');
var Grid = require('react-bootstrap/lib/Grid')
var Row = require('react-bootstrap/lib/Row')
var Col = require('react-bootstrap/lib/Col')
var operationStore = require('./../stores/OperationStore.jsx');
var OperationList = require('./OperationList.jsx');
var resources = ['one', 'two', 'three', 'four', 'five'],
day = new Date(),
today = new RangeDate(day.setHours(8)),
events = operationStore.getItems();
module.exports = React.createClass({
render() {
return (
<Grid>
<Row className="show-grid">
<Col xs={10} md={10}>
<Col xs={2} md={2}><OperationList items={events}/></Col>
<Scheduler
from={today}
rowHeight={50}
to={today.advance('hours',10)}
resources={resources}
events={events}
width={1000}
/>
</Col>
</Row>
</Grid>
)
}
})
operationStore.onChange(function(items){
// events = items;
})
stores/OperationStore.jsx
var RangeDate = require('legit-scheduler/lib/range_date');
function operationStore(){
var day = new Date()
var today = new RangeDate(day.setHours(8))
var operations = [{
operationName: "Store",
patientName: "Adrian Garcia",
typeOfSurgery: "Open Heart",
id: 'foobar22',
title: 'From the Store',
startDate: today.advance('hours', 1).toRef(),
duration: 5,
resource: 'two'
},{
_v:0,
_id:"sdfsdffsdf",
operationName: "Stores",
patientName: "Adrian Garcia",
typeOfSurgery: "Open Heart",
id: 'foobar22',
title: 'From the 2Store',
startDate: today.advance('hours', 1).toRef(),
duration: 5,
resource: 'three'
}];
var listeners = [];
var updateOperations = function(helper){
helper.get("api/operations")
.then(function(data){
operations = data;
triggerListeners(listeners);
});
}
updateOperations(helper);
function getItems(){
return operations;
};
var onChange = function(listener){
listeners.push(listener);
return listeners;
}
...
var triggerListeners = function(listeners) {
listeners.forEach(function(listener) {
listener(operations);
})
}
return {
getItems: getItems,
onChange: onChange,
addOperationItem: addOperationItem,
deleteOperationItem: deleteOperationItem,
triggerListeners: triggerListeners,
dispatchRegister: dispatchRegister,
registerEvent: registerEvent,
updateOperations: updateOperations
}
}
module .exports = new operationStore();
server/database.js
var mongoose = require('mongoose');
var Operation = require('./models/Operation.js');
var RangeDate = require('legit-scheduler/lib/range_date');
mongoose.connect('mongodb:connection', function(){
mongoose.connection.db.dropDatabase();
var day = new Date()
var today = new RangeDate(day.setHours(8))
var operations = [{
operationName: "From the Database",
patientName: "Adrian Garcia",
typeOfSurgery: "Open Heart",
id: 'foobar',
title: 'From the Database',
startDate: today.advance('hours', 1).toRef(),
duration: 5,
resource: 'one'
}];
operations.forEach(function(operation){
new Operation(operation).save();
})
})
Update
operationStore.onChange(function(items){
console.log(events)
events = items;
console.log(events)
})
first log...
Array[2]
0
:
Object
duration
:
5
id
:
"bar"
operationName
:
"Store"
patientName
:
"Adrian Garcia"
resource
:
"two"
startDate
:
"April 4, 2016, 09:20:30"
title
:
"From the Store"
typeOfSurgery
:
"Open Heart"
__proto__
:
Object
1
:
Object
duration
:
5
id
:
"foo"
operationName
:
"Store"
patientName
:
"Adrian Garcia"
resource
:
"three"
startDate
:
"April 4, 2016, 09:20:30"
title
:
"Also from Store"
typeOfSurgery
:
"Open Heart"
__proto__
:
Object
Second log...
Array[1]
0
:
Object
__v
:
0
_id
:
"5702b065f23b1dbc15d0280c"
duration
:
5
id
:
"foobar"
operationName
:
"From the Database"
patientName
:
"Adrian Garcia"
resource
:
"one"
startDate
:
"April 4, 2016, 09:20:21"
title
:
"From the Database"
typeOfSurgery
:
"Open Heart"
The second log comes with two extra variables, __v and _id. The are generated by mongo but I dont think they are causing the problem. Operating List would have experience the same result.
So switching to the most updated src folder fixed the problem. There was no fundamental difference that I know of between the two version so i dont now what the problem was. And I dont know if this question has any value for the community, but im posting this here for closure