Implement removeMeal on planner

recipes/src/containers/Planner/actions.ts

@@ -1,6 +1,6 @@
 import { DBRecipe } from 'types/recipes';
 import { Moment } from 'moment'
-import { Meal, RecipePlan } from 'types/planner';
+import { Meal, RecipePlan, Weekday } from 'types/planner';
 
 export const ADD_TO_BACKLOG = 'ADD_TO_BACKLOG';
 export const REMOVE_FROM_BACKLOG = 'REMOVE_FROM_BACKLOG';
@@ -25,7 +25,7 @@ const actions = {
     day,
     meal,
   }),
-  removeMeal: (day: Moment, meal: Meal) => ({
+  removeMeal: (day: Weekday, meal: Meal) => ({
     type: REMOVE_MEAL,
     day,
     meal
@@ -51,7 +51,7 @@ export type AssignToDay = {
 
 export type RemoveMeal = {
   type: typeof REMOVE_MEAL,
-  day: Moment,
+  day: Weekday,
   meal: Meal
 }
 

recipes/src/containers/Planner/index.tsx

@@ -10,7 +10,7 @@ import PlannerActions, { Actions } from './actions';
 import moment, { Moment } from 'moment';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 import './styles.scss';
-import { mkWeekData, mkWeekDay } from 'services/time';
+import { mkWeekData, mkWeekDay, getWeekDay } from 'services/time';
 import { DBRecipe } from 'types/recipes';
 import Button from 'components/Button';
 
@@ -25,23 +25,19 @@ interface PlannerContainerState {
   week: [Weekday, string][]
 }
 
-const DisplayMeal = (meal?: RecipePlan) => meal ? (
-  <div className='meal-card'>
-    <h3>{meal.name}</h3>
-    <Button icon='clear' onClick={() => {}}></Button>
-  </div>
-) : null;
-
-const mkScheduleDay = (weekday: Weekday, idx: number, meal: Meal, dayPlan: DayPlan) => (
-  <Droppable droppableId={`${idx}-${weekday}-${meal}`}>
-    {provided => (
-      <div className='day-schedule-content' ref={provided.innerRef}>
-        {provided.placeholder}
-        { DisplayMeal(dayPlan[meal]) }
+const DisplayMeal = (dayPlan: DayPlan, meal: Meal, onRemove: typeof PlannerActions.removeMeal) => {
+  const dish = dayPlan[meal];
+  if (dish !== undefined) {
+    return (
+      <div className='meal-card'>
+        <h3>{dish.name}</h3>
+        <Button icon='clear' onClick={() => onRemove(getWeekDay(dayPlan.date), meal)}></Button>
       </div>
-    )}
-  </Droppable> 
-)
+    )
+  } else {
+    return null;
+  }
+};
 
 class PlannerContainer extends Component<PlannerContainerProps, PlannerContainerState> {
 
@@ -117,10 +113,24 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                               {weekday} {moment(day).format('DD')}
                             </div>
                             <div className='day-schedule--lunch'>
-                              { mkScheduleDay(weekday, dayNumber, 'lunch', this.props.planner[weekday]) }
+                            <Droppable droppableId={`${dayNumber}-${weekday}-lunch`}>
+                              {provided => (
+                                <div className='day-schedule-content' ref={provided.innerRef}>
+                                  {provided.placeholder}
+                                  { DisplayMeal(this.props.planner[weekday], 'lunch', this.props.removeMeal) }
+                                </div>
+                              )}
+                            </Droppable> 
                             </div>
                             <div className='day-schedule--dinner'>
-                              { mkScheduleDay(weekday, dayNumber, 'dinner', this.props.planner[weekday]) }
+                              <Droppable droppableId={`${dayNumber}-${weekday}-dinner`}>
+                                {provided => (
+                                  <div className='day-schedule-content' ref={provided.innerRef}>
+                                    {provided.placeholder}
+                                    { DisplayMeal(this.props.planner[weekday], 'dinner', this.props.removeMeal) }
+                                  </div>
+                                )}
+                              </Droppable> 
                             </div>
                           </div>
                         ))

recipes/src/containers/Planner/reducers.ts

@@ -61,13 +61,12 @@ const PlannerReducer = (
         backlog: state.backlog.filter(recipe => recipe._id !== action.recipe._id)
       }
     case 'REMOVE_MEAL':
-      const day = getWeekDay(action.day) as Weekday;
       return {
         ...state,
         planner: {
           ...state.planner,
-          [day]: {
-            ...state.planner[day],
+          [action.day]: {
+            ...state.planner[action.day],
             [action.meal]: undefined
           }
         }

recipes/src/services/time.ts

@@ -7,7 +7,7 @@ export const mkWeekDay = (day: string | number): Moment => moment().isoWeekday(d
 
 export const getWeekNumber = (): number => moment().isoWeek();
 
-export const getWeekDay = (day: Moment): string => day.format('dddd').toLowerCase();
+export const getWeekDay = (day: Moment): Weekday => day.format('dddd').toLowerCase() as Weekday;
 
 export const mkWeekData = (weekNumber: number): [Weekday, string][] => mkWeek().map(day => (
   [ day, moment().week(weekNumber).isoWeekday(day).format() ]