Add Cancel Button on Planner. Change Planner Mode type to Enum instead of string literal

recipes/src/containers/Planner/actions.ts

@@ -20,6 +20,8 @@ export const PENDING_SAVE_PLANNER = 'PENDING_SAVE_PLANNER';
 export const CONFIRM_SAVE_PLANNER = 'CONFIRM_SAVE_PLANNER';
 export const REJECT_SAVE_PLANNER = 'REJECT_SAVE_PLANNER';
 
+export const CANCEL_SAVE_PLANNER = 'CANCEL_SAVE_PLANNER';
+
 export interface AddToBacklogAction extends Action<'ADD_TO_BACKLOG'> {
   recipe: {
     _id: string,
@@ -158,6 +160,16 @@ export const savePlannerActionCreator: ActionCreator<
   }
 }
 
+export interface CancelSavePlannerAction extends Action<'CANCEL_SAVE_PLANNER'> {
+  oldPlanner: WeekPlan,
+  oldBacklog: RecipePlan[]
+}
+
+export const cancelSavePlanner = (oldPlanner: WeekPlan, oldBacklog: RecipePlan[]): CancelSavePlannerAction => ({
+  type: CANCEL_SAVE_PLANNER,
+  oldPlanner,
+  oldBacklog
+})
 
 export type PlannerActions =
   AddToBacklogAction |
@@ -170,7 +182,8 @@ export type PlannerActions =
   EditPlannerAction |
   PendingSavePlannerAction |
   ConfirmSavePlannerAction |
-  RejectSavePlannerAction;
+  RejectSavePlannerAction |
+  CancelSavePlannerAction;
 
 export default {
   addToBacklog,
@@ -178,5 +191,6 @@ export default {
   assignToDay,
   removeMeal,
   changePlannerMode,
-  editPlanner  
+  editPlanner,
+  cancelSavePlanner
 }

recipes/src/containers/Planner/index.tsx

@@ -21,7 +21,7 @@ interface PlannerContainerProps extends RouteComponentProps, PlannerState, Actio
 }
 
 interface PlannerContainerState {
-  week: [Weekday, string][]
+  week: [Weekday, string][],
 }
 
 class PlannerContainer extends Component<PlannerContainerProps, PlannerContainerState> {
@@ -29,16 +29,26 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
   constructor(props: PlannerContainerProps) {
     super(props);
     this.state = {
-      week: Object.keys(props.planner).map((weekday) => ([ weekday as Weekday, moment(props.planner[weekday as Weekday].date).format()]))
+      week: Object.keys(props.planner).map((weekday) => ([ weekday as Weekday, moment(props.planner[weekday as Weekday].date).format()])),
     }
   }
 
+  _prevState = {
+    planner: { ...this.props.planner },
+    backlog: { ...this.props.backlog } 
+  }
+
   componentDidMount() {
     this.props.fetch(this.props.from, this.props.to);
   }
 
-  componentDidUpdate() {
-    const { isFetching } = this.props;
+  componentDidUpdate(prevProps: PlannerContainerProps) {
+    if (prevProps.mode === PlannerMode.View && this.props.mode === PlannerMode.Edit) {
+      this._prevState = { 
+        planner: {...this.props.planner},
+        backlog: [...this.props.backlog]
+      };
+    }
   }
 
   assignRecipe = (result: DropResult) => {
@@ -60,6 +70,8 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
 
   changeMode = (mode: PlannerMode) => this.props.changePlannerMode(mode);
 
+  cancel = () => this.props.cancelSavePlanner(this._prevState.planner, this._prevState.backlog)
+
   render () {
     return (
       <div className='cbk-planner'>
@@ -67,15 +79,20 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
           title='Planner'
         >
           {
-            this.props.mode === 'view' ? (
-              <Button outlined raised onClick={() => this.changeMode('edit')}>Edit</Button>
+            this.props.mode === PlannerMode.View ? (
+              <Button outlined raised onClick={() => this.changeMode(PlannerMode.Edit)}>Edit</Button>
               ) : (
-              <Button outlined raised onClick={() => {
-                if (this.props.edit) {
-                  this.props.save(this.props.planner, this.props.from, this.props.to)
-                }
-                this.changeMode('view')
-              }}>Save</Button>
+                <div>
+                  <Button outlined raised onClick={() => {
+                    this.props.save(this.props.planner, this.props.from, this.props.to)
+                    this.changeMode(PlannerMode.View)
+                  }}>Save</Button>
+                  <Button outlined raised onClick={() => {
+                    this.cancel();
+                    this.changeMode(PlannerMode.View)
+                  }}> Cancel </Button>
+
+                </div>
             )
           }
         </Navbar>
@@ -105,7 +122,7 @@ const DisplayPlanner: React.SFC<{
   <section className='cbk-planner__body'>
     <DragDropContext onDragEnd={onDragEnd}>
       {
-        mode === 'edit' ? (
+        mode === PlannerMode.Edit ? (
           <div className='cbk-planner__body__backlog'>
             <Droppable droppableId='recipeList'>
               {(provided) => (
@@ -166,7 +183,7 @@ const DisplayPlanner: React.SFC<{
                                     <div className='meal-card'>
                                       <div className="meal-card--actions">
                                         {
-                                          recipe && mode === 'edit' ? (
+                                          recipe && mode === PlannerMode.Edit ? (
                                             <Button icon='clear' onClick={() => removeMeal(weekday, meal)} small></Button>      
                                           ) : null
                                         }

recipes/src/containers/Planner/reducers.ts

@@ -1,11 +1,11 @@
 import { PlannerActions } from './actions';
-import { PlannerState, DBPlanner, WeekPlan, Weekday } from 'types/planner';
+import { PlannerState, DBPlanner, WeekPlan, Weekday, PlannerMode } from 'types/planner';
 import { getWeekNumber, mkWeekDay } from 'services/time';
 import { Reducer } from 'redux';
 import { merge } from 'ramda';
 
 const initialState: PlannerState = {
-  mode: 'view',
+  mode: PlannerMode.View,
   isFetching: false,
   saving: false,
   edit: false,
@@ -122,6 +122,14 @@ const PlannerReducer: Reducer<PlannerState, PlannerActions> = (
         saving: false,
         error: action.error.message
       }
+    case 'CANCEL_SAVE_PLANNER':
+      return {
+        ...state,
+        edit: false,
+        mode: PlannerMode.View,
+        planner: action.oldPlanner,
+        backlog: action.oldBacklog
+      }
     default:
       return state
   }

recipes/src/types/planner.ts

@@ -29,7 +29,10 @@ export type WeekPlan = {
   [day in Weekday]: DayPlan;
 };
 
-export type PlannerMode = 'edit' | 'view';
+export enum PlannerMode {
+  View = 'VIEW',
+  Edit = 'EDIT'
+}
 
 export interface PlannerState {
   mode: PlannerMode,