Permalink
Browse files

Update PilotsList to be connected

Connected the PilotsList and PilotsListRow components
PilotsList now extracts a list of pilot IDs instead of objects
Disconnected Pilots, which is now effectively presentational again
  • Loading branch information...
markerikson committed Jan 2, 2017
1 parent 7663759 commit dc2c6ab954488317ce035c4284ba293f8ecd3aee
@@ -1,89 +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 PilotsList from "../PilotsList";
import PilotDetails from "../PilotDetails";
import {selectPilot} from "../pilotsActions";
import {selectCurrentPilot} from "../pilotsSelectors";
const mapState = (state) => {
// Create a Redux-ORM Session from our "entities" slice, which
// contains the "tables" for each model type
const session = schema.from(state.entities);
// Retrieve the model class that we need. Each Session
// specifically "binds" model classes to itself, so that
// updates to model instances are applied to that session.
// These "bound classes" are available as fields in the sesssion.
const {Pilot} = session;
// Query the session for all Pilot instances.
// The QuerySet that is returned from all() can be used to
// retrieve instances of the Pilot class, or retrieve the
// plain JS objects that are actually in the store.
// The withModels modifier will let us map over Model instances
// for each entry, rather than the plain JS objects.
const pilots = Pilot.all().withModels.map(pilotModel => {
// Access the underlying plain JS object using the "ref" field,
// and make a shallow copy of it
const pilot = {
...pilotModel.ref
};
// We want to look up pilotModel.mech.mechType. Just in case the
// relational fields are null, we'll do a couple safety checks as we go.
// Look up the associated Mech instance using the foreign-key
// field that we defined in the Pilot Model class
const {mech} = pilotModel;
// If there actually is an associated mech, include the
// mech type's ID as a field in the data passed to the component
if(mech && mech.type) {
pilot.mechType = mech.type.id;
}
return pilot;
});
const currentPilot = selectCurrentPilot(state);
// Now that we have an array of all pilot objects, return it as a prop
return {pilots, currentPilot};
}
// Make an object full of action creators that can be passed to connect
// and bound up, instead of writing a separate mapDispatch function
const actions = {
selectPilot,
};
export class Pilots extends Component {
export default class Pilots extends Component {
render() {
const {pilots = [], selectPilot, currentPilot} = this.props;
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Pilot List</Header>
<PilotsList
pilots={pilots}
onPilotClicked={selectPilot}
currentPilot={currentPilot}
/>
<PilotsList />
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Pilot Details</Header>
@@ -96,5 +30,3 @@ export class Pilots extends Component {
);
}
}
export default connect(mapState, actions)(Pilots);
@@ -1,20 +1,61 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {Table} from "semantic-ui-react";
import PilotsListHeader from "./PilotsListHeader";
import PilotsListRow from "./PilotsListRow";
import schema from "app/schema";
export default class PilotsList extends Component {
import {selectPilot} from "../pilotsActions";
import {selectCurrentPilot} from "../pilotsSelectors";
const mapState = (state) => {
// Create a Redux-ORM Session from our "entities" slice, which
// contains the "tables" for each model type
const session = schema.from(state.entities);
// Retrieve the model class that we need. Each Session
// specifically "binds" model classes to itself, so that
// updates to model instances are applied to that session.
// These "bound classes" are available as fields in the sesssion.
const {Pilot} = session;
// Query the session for all Pilot instances.
// The QuerySet that is returned from all() can be used to
// retrieve instances of the Pilot class, or retrieve the
// plain JS objects that are actually in the store.
// The withModels modifier will let us map over Model instances
// for each entry, rather than the plain JS objects.
// Extract a list of IDs for each Pilot entry
const pilots = Pilot.all().withModels.map(pilotModel => pilotModel.getId());
const currentPilot = selectCurrentPilot(state);
// Return the list of pilot IDs and the current pilot ID as props
return {pilots, currentPilot};
}
// Make an object full of action creators that can be passed to connect
// and bound up, instead of writing a separate mapDispatch function
const actions = {
selectPilot,
};
export class PilotsList extends Component {
render() {
const {pilots, onPilotClicked, currentPilot} = this.props;
const {pilots = [], selectPilot, currentPilot} = this.props;
const pilotRows = pilots.map(pilot => (
const pilotRows = pilots.map(pilotID => (
<PilotsListRow
pilot={pilot}
key={pilot.name}
onPilotClicked={onPilotClicked}
selected={pilot.id === currentPilot}
pilotID={pilotID}
key={pilotID}
onPilotClicked={selectPilot}
selected={pilotID === currentPilot}
/>
));
@@ -29,3 +70,4 @@ export default class PilotsList extends Component {
}
}
export default connect(mapState, actions)(PilotsList);
@@ -1,7 +1,42 @@
import React from "react";
import {connect} from "react-redux";
import {Table} from "semantic-ui-react";
import _ from "lodash";
import schema from "app/schema";
const mapState = (state, ownProps) => {
const session = schema.from(state.entities);
const {Pilot} = session;
let pilot;
if(Pilot.hasId(ownProps.pilotID)) {
const pilotModel = Pilot.withId(ownProps.pilotID);
// Access the underlying plain JS object using the "ref" field,
// and make a shallow copy of it
pilot = {
...pilotModel.ref
};
// We want to look up pilotModel.mech.mechType. Just in case the
// relational fields are null, we'll do a couple safety checks as we go.
// Look up the associated Mech instance using the foreign-key
// field that we defined in the Pilot Model class
const {mech} = pilotModel;
// If there actually is an associated mech, include the
// mech type's ID as a field in the data passed to the component
if(mech && mech.type) {
pilot.mechType = mech.type.id;
}
}
return {pilot};
}
const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
const {
id = null,
@@ -34,4 +69,4 @@ const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
);
}
export default PilotsListRow;
export default connect(mapState)(PilotsListRow);

0 comments on commit dc2c6ab

Please sign in to comment.