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
.
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:
Create a free account to access the full course.
By signing up, you agree to Educative's Terms of Service and Privacy Policy