Editing Pilot Entries

Now that we have our generic entity update reducer in place, we can implement the ability to edit Pilot entries. We already set up the “start/stop editing” toggle last time, so we just need to hook up the event handlers and dispatch the right actions.

Hooking Up Pilot Inputs

We’ll start with the Pilot’s name field:

Commit efe8854: Hook up editing of pilot name field

features/pilots/PilotDetails.jsx

+import {updateEntity} from "features/entities/entityActions";
+import {getValueFromEvent} from "common/utils/clientUtils";

const actions = {
    startEditingPilot,
    stopEditingPilot,
+   updateEntity,
}

export class PilotDetails  extends Component {
+   onNameChanged = (e) => {
+       const newValues = getValueFromEvent(e);
+       const {id} = this.props.pilot;
+
+       this.props.updateEntity("Pilot", id, newValues);
+   }

// Omit most rendering code

                <Form.Field
                    name="name"
                    label="Name"
                    width={16}
                    placeholder="Name"
                    value={name}
                    disabled={!canStopEditing}
+                   onChange={this.onNameChanged}
                    control="input"
                />

We import the updateEntity action creator we just wrote, and add it to the actions that will be bound up to auto-dispatch when called. We then add an onNameChanged handler, extract the new values from the change event, and dispatch updateEntity() by passing in the type of item ("Pilot") and the pilot’s ID.

Let’s try this out by editing one of the pilots. If we select the pilot named “Miklos Delius”, click “Start Editing”, and type “test” at the end of his name, we should see some actions dispatched: