137 lines
2.6 KiB
JavaScript
137 lines
2.6 KiB
JavaScript
const ReactRouter = require('react-router');
|
|
const ReactRedux = require('react-redux');
|
|
const React = require('react');
|
|
const find = require('lodash.find');
|
|
|
|
const Loader = require('../components/loader');
|
|
const Printers = require('../components/printers');
|
|
const Changes = require('../components/changes');
|
|
const Change = require('../components/change');
|
|
|
|
const actions = require('../state/actions');
|
|
|
|
const {
|
|
fetchChanges,
|
|
lockPrinter,
|
|
print,
|
|
transitionTo
|
|
} = actions;
|
|
|
|
const {
|
|
Match
|
|
} = ReactRouter;
|
|
|
|
const {
|
|
connect
|
|
} = ReactRedux;
|
|
|
|
const Print = ({
|
|
pathname,
|
|
printers = [],
|
|
changes = [],
|
|
lockPrinter,
|
|
fetchChanges,
|
|
onPrint,
|
|
loaded,
|
|
loading,
|
|
locked,
|
|
router
|
|
}) => {
|
|
const allChanges = () => {
|
|
return (
|
|
<div>
|
|
<p>Changes</p>
|
|
<Loader
|
|
loaded={loaded}
|
|
loading={loading}
|
|
fetch={fetchChanges}
|
|
>
|
|
<Changes
|
|
pathname={pathname}
|
|
changes={changes}
|
|
/>
|
|
</Loader>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const singleChange = ({
|
|
params
|
|
}) => {
|
|
const change = find(changes, (change) => {
|
|
return change.id === params.id;
|
|
});
|
|
|
|
if (!change) {
|
|
return (
|
|
<p>Change not found</p>
|
|
);
|
|
}
|
|
|
|
const _onPrint = (id) => {
|
|
return () => {
|
|
return onPrint(id);
|
|
};
|
|
};
|
|
|
|
// TODO: don't load all changes
|
|
return (
|
|
<div>
|
|
<p>Change</p>
|
|
<Loader
|
|
loaded={loaded}
|
|
loading={loading}
|
|
fetch={fetchChanges}
|
|
>
|
|
<Change {...change} />
|
|
</Loader>
|
|
<button onClick={_onPrint(params.id)}>Print</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<p>Printers</p>
|
|
<Printers
|
|
printers={printers}
|
|
onClick={lockPrinter}
|
|
locked={locked}
|
|
/>
|
|
</div>
|
|
|
|
<Match pattern={`${pathname}/:id`} render={singleChange} />
|
|
<Match exactly pattern={pathname} render={allChanges} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
loaded: state.ui.changes.loaded,
|
|
loading: state.ui.changes.loading,
|
|
changes: state.data.changes,
|
|
printers: state.data.printers,
|
|
locked: state.ui.printers.locked
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
lockPrinter: (id) => {
|
|
return dispatch(lockPrinter(id));
|
|
},
|
|
fetchChanges: () => {
|
|
return dispatch(fetchChanges());
|
|
},
|
|
onPrint: (id) => {
|
|
return dispatch(print(id)).then(() => {
|
|
return dispatch(transitionTo('/print'));
|
|
});
|
|
}
|
|
};
|
|
};
|
|
|
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(Print);
|