Permalink
Browse files

Add "Start/Stop Editing" buttons to PilotDetails

  • Loading branch information...
markerikson committed Jan 7, 2017
1 parent 09fda20 commit ab6f27eeda5dbc209ceffc51518c05fdc1cef1a5
Showing with 47 additions and 11 deletions.
  1. +47 −11 src/features/pilots/PilotDetails/PilotDetails.jsx
@@ -1,10 +1,15 @@
import React from "react";
import {connect} from "react-redux";
import {Form, Dropdown} from "semantic-ui-react";
import {Form, Dropdown, Grid, Button} from "semantic-ui-react";
import schema from "app/schema";
import {selectCurrentPilot} from "../pilotsSelectors";
import {selectCurrentPilot, selectIsEditingPilot} from "../pilotsSelectors";
import {
startEditingPilot,
stopEditingPilot,
} from "../pilotsActions";
const RANKS = [
@@ -32,11 +37,21 @@ const mapState = (state) => {
if(Pilot.hasId(currentPilot)) {
pilot = Pilot.withId(currentPilot).ref;
}
return {pilot}
const pilotIsSelected = Boolean(currentPilot);
const isEditingPilot = selectIsEditingPilot(state);
return {pilot, pilotIsSelected, isEditingPilot}
}
const actions = {
startEditingPilot,
stopEditingPilot,
}
const PilotDetails = ({pilot={}}) =>{
const PilotDetails = ({pilot={}, pilotIsSelected = false, isEditingPilot = false, ...actions }) =>{
const {
name = "",
rank = "",
@@ -46,14 +61,17 @@ const PilotDetails = ({pilot={}}) =>{
mechType = "",
} = pilot;
const canStartEditing = pilotIsSelected && !isEditingPilot;
const canStopEditing = pilotIsSelected && isEditingPilot;
return (
<Form size="large">
<Form.Field name="name" width={16}>
<label>Name</label>
<input
placeholder="Name"
value={name}
disabled={true}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="rank" width={16}>
@@ -63,29 +81,29 @@ const PilotDetails = ({pilot={}}) =>{
selection
options={RANKS}
value={rank}
disabled={true}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="age" width={6}>
<label>Age</label>
<input
placeholder="Age"
value={age}
disabled={true}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="gunnery" width={6}>
<label>Gunnery</label>
<input
value={gunnery}
disabled={true}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="piloting" width={6}>
<label>Piloting</label>
<input
value={piloting}
disabled={true}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="mech" width={16}>
@@ -98,8 +116,26 @@ const PilotDetails = ({pilot={}}) =>{
disabled={true}
/>
</Form.Field>
<Grid.Row width={16}>
<Button
primary
disabled={!canStartEditing}
type="button"
onClick={actions.startEditingPilot}
>
Start Editing
</Button>
<Button
secondary
disabled={!canStopEditing}
type="button"
onClick={actions.stopEditingPilot}
>
Stop Editing
</Button>
</Grid.Row>
</Form>
);
}
export default connect(mapState)(PilotDetails);
export default connect(mapState, actions)(PilotDetails);

0 comments on commit ab6f27e

Please sign in to comment.