Permalink
Browse files

Implement selection handling for mechs

Highlight selected mech list row
Show selected mech attributes in the MechDetails form
Update selected mech on list row click
  • Loading branch information...
markerikson committed Dec 8, 2016
1 parent 54794ac commit b461cb3276339f33bd5358e9c8ae046a6549a1f7
@@ -57,4 +57,4 @@ const MechDetails = ({mech={}}) => {
);
}
export default MechDetails;
export default MechDetails;
@@ -12,6 +12,9 @@ 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);
@@ -32,27 +35,37 @@ const mapState = (state) => {
return mech;
});
const currentMech = selectCurrentMech(state);
return {mechs}
return {mechs, currentMech}
}
const actions = {
selectMech,
};
class Mechs extends Component {
render() {
const {mechs = []} = this.props;
const {mechs = [], selectMech, currentMech} = this.props;
const currentMech = mechs[0] || {};
const currentMechEntry = mechs.find(mech => mech.id === currentMech) || {};
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Mechs List</Header>
<MechsList mechs={mechs}/>
<MechsList
mechs={mechs}
onMechClicked={selectMech}
currentMech={currentMech}
/>
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Mech Details</Header>
<Segment >
<MechDetails mech={currentMech} />
<MechDetails mech={currentMechEntry}/>
</Segment>
</Grid.Column>
</Grid>
@@ -62,4 +75,4 @@ class Mechs extends Component {
}
export default connect(mapState)(Mechs);
export default connect(mapState, actions)(Mechs);
@@ -9,10 +9,15 @@ import MechsListRow from "./MechsListRow";
export default class MechsList extends Component {
render() {
const {mechs = []} = this.props;
const {mechs = [], onMechClicked, currentMech} = this.props;
const mechRows = mechs.map(mech => (
<MechsListRow mech={mech} key={mech.id} />
<MechsListRow
mech={mech}
key={mech.id}
onMechClicked={onMechClicked}
selected={mech.id === currentMech}
/>
));
return (
@@ -25,4 +30,4 @@ export default class MechsList extends Component {
</Table>
);
}
}
}
@@ -4,9 +4,9 @@ import {Table} from "semantic-ui-react";
import {getWeightClass} from "../mechSelectors";
const MechsListRow = ({mech={}}) => {
const MechsListRow = ({mech, onMechClicked, selected}) => {
const {
id = "",
id = null,
type = "",
mechType = {},
} = mech;
@@ -19,7 +19,7 @@ const MechsListRow = ({mech={}}) => {
const weightClass = getWeightClass(weight);
return (
<Table.Row>
<Table.Row onClick={() => onMechClicked(id)} active={selected}>
<Table.Cell>
{id}
</Table.Cell>

0 comments on commit b461cb3

Please sign in to comment.