Permalink
Browse files

Update MechsList to be connected

Connected the MechsList and MechsList Row components
MechsList now extracts a list of mech IDs instead of objects
Disconnected Mechs, which is now effectively presentational again
  • Loading branch information...
markerikson committed Jan 2, 2017
1 parent 60c3f29 commit bba6aa9b76fab8e8759aab088eb8ba6a4b2eae32
@@ -1,64 +1,23 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {
Grid,
Segment,
Header,
} from "semantic-ui-react";
import schema from "app/schema";
import MechsList from "../MechsList";
import MechDetails from "../MechDetails";
import {selectMech} from "../mechsActions";
import {selectCurrentMech} from "../mechSelectors";
const mapState = (state) => {
const session = schema.from(state.entities);
const {Mech} = session;
const mechs = Mech.all().withModels.map(mechModel => {
const mech = {
// Copy the data from the plain JS object
...mechModel.ref,
// Provide a default empty object for the relation
mechType : {},
};
if(mechModel.type) {
// Replace the default object with a copy of the relation's data
mech.mechType = {...mechModel.type.ref};
}
return mech;
});
const currentMech = selectCurrentMech(state);
return {mechs, currentMech}
}
const actions = {
selectMech,
};
class Mechs extends Component {
export default class Mechs extends Component {
render() {
const {mechs = [], selectMech, currentMech} = this.props;
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Mechs List</Header>
<MechsList
mechs={mechs}
onMechClicked={selectMech}
currentMech={currentMech}
/>
<MechsList />
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Mech Details</Header>
@@ -71,6 +30,3 @@ class Mechs extends Component {
);
}
}
export default connect(mapState, actions)(Mechs);
@@ -1,22 +1,44 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {Table} from "semantic-ui-react";
import MechsListHeader from "./MechsListHeader";
import MechsListRow from "./MechsListRow";
import schema from "app/schema";
import {selectMech} from "../mechsActions";
import {selectCurrentMech} from "../mechSelectors";
export default class MechsList extends Component {
const mapState = (state) => {
const session = schema.from(state.entities);
const {Mech} = session;
const mechs = Mech.all().withModels.map(mechModel => mechModel.getId());
const currentMech = selectCurrentMech(state);
return {mechs, currentMech}
}
const actions = {
selectMech,
};
export class MechsList extends Component {
render() {
const {mechs = [], onMechClicked, currentMech} = this.props;
const {mechs = [], currentMech, selectMech} = this.props;
const mechRows = mechs.map(mech => (
const mechRows = mechs.map(mechID => (
<MechsListRow
mech={mech}
key={mech.id}
onMechClicked={onMechClicked}
selected={mech.id === currentMech}
mechID={mechID}
key={mechID}
onMechClicked={selectMech}
selected={mechID === currentMech}
/>
));
@@ -31,3 +53,5 @@ export default class MechsList extends Component {
);
}
}
export default connect(mapState, actions)(MechsList);
@@ -1,10 +1,39 @@
import React from "react";
import {connect} from "react-redux";
import {Table} from "semantic-ui-react";
import {getWeightClass} from "../mechSelectors";
const MechsListRow = ({mech, onMechClicked, selected}) => {
import schema from "app/schema";
const mapState = (state, ownProps) => {
const session = schema.from(state.entities);
const {Mech} = session;
let mech;
if(Mech.hasId(ownProps.mechID)) {
const mechModel = Mech.withId(ownProps.mechID);
mech = {
// Copy the data from the plain JS object
...mechModel.ref,
// Provide a default empty object for the relation
mechType : {},
};
if(mechModel.type) {
// Replace the default object with a copy of the relation's data
mech.mechType = {...mechModel.type.ref};
}
}
return {mech};
}
const MechsListRow = ({mech = {}, onMechClicked, selected}) => {
const {
id = null,
type = "",
@@ -40,4 +69,4 @@ const MechsListRow = ({mech, onMechClicked, selected}) => {
}
export default MechsListRow;
export default connect(mapState)(MechsListRow);

0 comments on commit bba6aa9

Please sign in to comment.