Permalink
Browse files

Implement selection handling for pilots

Highlight selected pilot list row
Show selected pilot attributes in the PilotDetails form
Update selected pilot on list row click
  • Loading branch information...
markerikson committed Dec 8, 2016
1 parent c42c5bd commit 19c3c3a12ad99a01acf8bf6a62076caff8277a81
@@ -75,4 +75,4 @@ const PilotDetails = ({pilot={}}) =>{
);
}
export default PilotDetails;
export default PilotDetails;
@@ -13,6 +13,8 @@ import schema from "app/schema";
import PilotsList from "../PilotsList";
import PilotDetails from "../PilotDetails";
import {selectPilot} from "../pilotsActions";
import {selectCurrentPilot} from "../pilotsSelectors";
const mapState = (state) => {
@@ -56,30 +58,39 @@ const mapState = (state) => {
return pilot;
});
const currentPilot = selectCurrentPilot(state);
// Now that we have an array of all pilot objects, return it as a prop
return {pilots};
return {pilots, currentPilot};
}
export class Pilots extends Component {
// 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 {
render() {
const {pilots = []} = this.props;
const {pilots = [], selectPilot, currentPilot} = this.props;
// Use the first pilot as the "current" one for display, if available.
const currentPilot = pilots[0] || {};
const currentPilotEntry = pilots.find(pilot => pilot.id === currentPilot) || {}
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Pilot List</Header>
<PilotsList pilots={pilots} />
<PilotsList
pilots={pilots}
onPilotClicked={selectPilot}
currentPilot={currentPilot}
/>
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Pilot Details</Header>
<Segment >
<PilotDetails pilot={currentPilot} />
<PilotDetails pilot={currentPilotEntry} />
</Segment>
</Grid.Column>
</Grid>
@@ -88,4 +99,4 @@ export class Pilots extends Component {
}
}
export default connect(mapState)(Pilots);
export default connect(mapState, actions)(Pilots);
@@ -7,12 +7,17 @@ import PilotsListRow from "./PilotsListRow";
export default class PilotsList extends Component {
render() {
const {pilots} = this.props;
const {pilots, onPilotClicked, currentPilot} = this.props;
const pilotRows = pilots.map(pilot => (
<PilotsListRow pilot={pilot} key={pilot.name}/>
<PilotsListRow
pilot={pilot}
key={pilot.name}
onPilotClicked={onPilotClicked}
selected={pilot.id === currentPilot}
/>
));
return (
<Table celled>
<PilotsListHeader />
@@ -1,8 +1,10 @@
import React from "react";
import {Table} from "semantic-ui-react";
import _ from "lodash";
const PilotsListRow = ({pilot={}}) => {
const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
const {
id = null,
name = "",
rank = "",
age = "",
@@ -12,7 +14,7 @@ const PilotsListRow = ({pilot={}}) => {
} = pilot;
return (
<Table.Row>
<Table.Row onClick={() => onPilotClicked(id)} active={selected}>
<Table.Cell>
{name}
</Table.Cell>
@@ -32,4 +34,4 @@ const PilotsListRow = ({pilot={}}) => {
);
}
export default PilotsListRow;
export default PilotsListRow;

0 comments on commit 19c3c3a

Please sign in to comment.