Permalink
Browse files

Update MechDetails to be connected

Connected MechDetails directly to the store
Marked inputs as disabled until editing is added
  • Loading branch information...
markerikson committed Jan 2, 2017
1 parent dc2c6ab commit 60c3f291a97bc1088f2bf60ebf9e769e4f90bc10
Showing with 39 additions and 5 deletions.
  1. +38 −2 src/features/mechs/MechDetails/MechDetails.jsx
  2. +1 −3 src/features/mechs/Mechs/Mechs.jsx
@@ -1,7 +1,38 @@
import React from "react";
import {connect} from "react-redux";
import {Form} from "semantic-ui-react";
import {getWeightClass} from "../mechSelectors";
import schema from "app/schema";
import {getWeightClass, selectCurrentMech} from "../mechSelectors";
const mapState = (state) => {
let mech;
const currentMech = selectCurrentMech(state);
const session = schema.from(state.entities);
const {Mech} = session;
if(Mech.hasId(currentMech)) {
const mechModel = Mech.withId(currentMech);
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 MechDetails = ({mech={}}) => {
const {
@@ -25,36 +56,41 @@ const MechDetails = ({mech={}}) => {
<input
placeholder="ID"
value={id}
disabled={true}
/>
</Form.Field>
<Form.Field name="name" width={16} >
<label>Name</label>
<input
placeholder="Name"
value={name}
disabled={true}
/>
</Form.Field>
<Form.Field name="model" width={6} >
<label>Model</label>
<input
placeholder="Model"
value={type}
disabled={true}
/>
</Form.Field>
<Form.Field name="weight" width={6} >
<label>Weight</label>
<input
value={weight}
disabled={true}
/>
</Form.Field>
<Form.Field name="class" width={6} >
<label>Class</label>
<input
value={weightClass}
disabled={true}
/>
</Form.Field>
</Form>
);
}
export default MechDetails;
export default connect(mapState)(MechDetails);
@@ -49,8 +49,6 @@ class Mechs extends Component {
render() {
const {mechs = [], selectMech, currentMech} = this.props;
const currentMechEntry = mechs.find(mech => mech.id === currentMech) || {};
return (
<Segment>
<Grid>
@@ -65,7 +63,7 @@ class Mechs extends Component {
<Grid.Column width={6}>
<Header as="h3">Mech Details</Header>
<Segment >
<MechDetails mech={currentMechEntry}/>
<MechDetails />
</Segment>
</Grid.Column>
</Grid>

0 comments on commit 60c3f29

Please sign in to comment.