Resetting and Canceling Form Edits

Our last couple tasks will be to add the ability to reset our form contents back to the original values, and to add the ability to cancel a form edit entirely.

Resetting Entity Edits

Happily, this is another feature we can implement very easily, by reusing existing code. All we have to do is delete the relevant item out of the editingEntities slice, and immediately copy the original item back over to editingEntities.

Commit c19cd77: Add logic to reset a currently edited item

features/editing/editingReducer.js

import {
    EDIT_ITEM_EXISTING,
    EDIT_ITEM_UPDATE,
    EDIT_ITEM_APPLY,
    EDIT_ITEM_STOP,
+   EDIT_ITEM_RESET,
} from "./editingConstants";


+export function editItemReset(state, payload) {
+   const stateWithoutItem = editItemStop(state, payload);
+   const stateWithCurrentItem = editItemExisting(stateWithoutItem, payload);
+
+   return stateWithCurrentItem;
+}

const editingFeatureReducer = createReducer({}, {
    [EDIT_ITEM_EXISTING] : editItemExisting,
    [EDIT_ITEM_UPDATE] : editItemUpdate,
    [EDIT_ITEM_APPLY] : editItemApply,
    [EDIT_ITEM_STOP] : editItemStop,
+   [EDIT_ITEM_RESET] : editItemReset,
});

Adding “Reset” and “Cancel” Buttons

The other neat thing is that we don’t even need to create a “cancel” action. We can do that by simply calling the same “stop editing” actions, and skip applying the item edits.

We’ll add a couple more buttons to our <PilotDetails> component, tweak the button layout a bit, and that’ll be all:

Commit de269ed: Add the ability to reset and cancel editing a pilot

features/pilots/pilotsActions.js

export function selectPilot(pilotID) {
    return (dispatch, getState) => {
        const state = getState();
        const isEditing = selectIsEditingPilot(state);

        if(isEditing) {
-            dispatch(stopEditingPilot());
+            dispatch(cancelEditingPilot());
        }

        dispatch({
            type : PILOT_SELECT,
            payload : {currentPilot : pilotID},
        });
    }
}


+export function cancelEditingPilot() {
+   return (dispatch, getState) => {
+       const currentPilot = selectCurrentPilot(getState());
+
+       dispatch({type : PILOT_EDIT_STOP});
+       dispatch(stopEditingItem("Pilot", currentPilot));
+   }
+}

features/pilots/PilotDetails.jsx

import {
    startEditingPilot,
    stopEditingPilot,
+   cancelEditingPilot,
} from "../pilotsActions";

+import {
+   resetEditedItem,
+} from "features/editing/editingActions";


const actions = {
    startEditingPilot,
    stopEditingPilot,
    editItemAttributes,
+   resetEditedItem,
+   cancelEditingPilot,
}


export class PilotDetails  extends Component {

+   onResetClicked = () => {
+       const {id} = this.props.pilot;
+       this.props.resetEditedItem("Pilot", id);
+   }

// Omit rendering code

+               <Grid.Row width={16}>
+                   <Button
+                       disabled={!canStopEditing}
+                       type="button"
+                       onClick={this.onResetClicked}
+                   >
+                       Reset Values
+                   </Button>
+                   <Button
+                       negative
+                       disabled={!canStopEditing}
+                       type="button"
+                       onClick={this.props.cancelEditingPilot}
+                   >
+                       Cancel Edits
+                   </Button>
+               </Grid.Row>

We can now start editing an item; save the item and stop editing; reset the draft item to its original values; and cancel an edit without actually saving the changes. Yay!

Let’s take one last look at the current UI appearance: