Change Meal type to Enum instead of literal strings

ktchn/src/planner/model.ts

@@ -2,7 +2,10 @@ import { ObjectID } from 'mongodb';
 import { RecipeDB } from '../recipes/model';
 import { Moment, weekdays } from 'moment';
 
-export type Meal = 'lunch' | 'dinner';
+export enum Meal {
+  Lunch = 1,
+  Dinner
+}
 
 export type Weekday =
   'monday' |

ktchn/src/planner/routes.ts

@@ -15,7 +15,6 @@ class PlannerRoutes {
   }
 
   private init() {
-    this.router.get('/all/');
     this.router.get('/week/:from/:to', chainP([validateRange(this.PlannerDB), getPlannerByRange(this.PlannerDB)]))
     this.router.post('/week', chainP([validatePlanner(this.PlannerDB), saveWeekPlanner(this.PlannerDB)]));
     this.router.post('/day', chainP([savePlan(this.PlannerDB)]));

recipes/src/containers/Planner/index.tsx

@@ -3,13 +3,12 @@ import { RouteComponentProps } from 'react-router';
 import Navbar from 'components/Navbar';
 import { AppState } from 'store/configureStore';
 import { connect } from 'react-redux';
-import { PlannerState, Weekday, Meal, DayPlan, PlannerMode, RecipePlan, WeekPlan } from 'types/planner';
+import { PlannerState, Weekday, Meal, PlannerMode, RecipePlan, WeekPlan } from 'types/planner';
 import Card from 'components/Card';
-import PlannerActions, { fetchPlannerActionCreator, PlannerActions as PlannerActionsTypes, savePlannerActionCreator } from './actions';
+import PlannerActions, { fetchPlannerActionCreator, savePlannerActionCreator } from './actions';
 import moment, { Moment } from 'moment';
 import { DragDropContext, Droppable, Draggable, DropResult, OnDragEndResponder } from 'react-beautiful-dnd';
 import './styles.scss';
-import { getWeekDay } from 'services/time';
 import Button from 'components/Button';
 import { ThunkDispatch } from 'redux-thunk';
 import { bindActionCreators } from 'redux';
@@ -46,7 +45,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
     const recipe = this.findRecipe(result.draggableId);
     if (result.destination && recipe) {
       const [idx, day, meal] = result.destination.droppableId.split('-');
-      this.props.assignToDay(recipe, day as Weekday, meal as Meal);
+      this.props.assignToDay(recipe, day as Weekday, parseInt(meal) as Meal);
       this.props.removeFromBacklog(recipe);
       this.props.editPlanner();
     }
@@ -94,18 +93,6 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
   }
 }
 
-const DisplayMealWithActions: React.SFC<{
-  recipe?: RecipePlan,
-  children?: React.ReactElement
-}> = ({ recipe, children }) => recipe ? (
-  <div className='meal-card'>
-    <div className="meal-card--actions">
-      { children }
-    </div>
-    <h5>{ recipe.name }</h5>
-  </div>
-) : null; 
-
 const DisplayPlanner: React.SFC<{
   week: [Weekday, string][],
   onDragEnd: OnDragEndResponder,
@@ -155,8 +142,8 @@ const DisplayPlanner: React.SFC<{
         <div className='container'>
           <div className='day-schedule day-schedule--meals'>
             <div className='day-schedule--date'></div>
-            <div className='day-schedule--lunch'> <h5>lunch</h5></div>
-            <div className='day-schedule--dinner'> <h5>dinner</h5> </div>                                      
+            <div className='day-schedule--meal'> <h5>lunch</h5></div>
+            <div className='day-schedule--meal'> <h5>dinner</h5> </div>                                      
           </div>
           {
             week.map(([weekday, day], dayNumber) => (
@@ -164,38 +151,38 @@ const DisplayPlanner: React.SFC<{
                 <div className='day-schedule--date'>
                   <h5>{weekday} {moment(day).format('DD')}</h5>
                 </div>
-                <div className='day-schedule--lunch'>
-                <Droppable droppableId={`${dayNumber}-${weekday}-lunch`}>
-                  {provided => (
-                    <div className='day-schedule-content' ref={provided.innerRef}>
-                      {provided.placeholder}
-                      <DisplayMealWithActions recipe={planner[weekday]['lunch']}>
-                        {
-                          planner[weekday]['lunch'] && mode === 'edit' ? (
-                            <Button icon='clear' onClick={() => removeMeal(weekday, 'lunch')} small></Button>
-                          ) : undefined
-                        }
-                      </DisplayMealWithActions>
-                    </div>
-                  )}
-                </Droppable> 
-                </div>
-                <div className='day-schedule--dinner'>
-                  <Droppable droppableId={`${dayNumber}-${weekday}-dinner`}>
-                    {provided => (
-                      <div className='day-schedule-content' ref={provided.innerRef}>
-                        {provided.placeholder}
-                        <DisplayMealWithActions recipe={planner[weekday]['dinner']}>
+                {
+                  [Meal.Lunch, Meal.Dinner].map((meal, key) => {
+                    const recipe = planner[weekday][meal];
+                    return (
+                      <div className='day-schedule--meal' key={key}>
+                        <Droppable droppableId={`${dayNumber}-${weekday}-${meal}`}>
                           {
-                            planner[weekday]['dinner'] && mode === 'edit' ? (
-                              <Button icon='clear' onClick={() => removeMeal(weekday, 'dinner')} small></Button>
-                            ) : undefined
+                            provided => (
+                              <div className='day-schedule-content' ref={provided.innerRef}>
+                                { provided.placeholder }
+                                {
+                                  recipe ? (
+                                    <div className='meal-card'>
+                                      <div className="meal-card--actions">
+                                        {
+                                          recipe && mode === 'edit' ? (
+                                            <Button icon='clear' onClick={() => removeMeal(weekday, meal)} small></Button>      
+                                          ) : null
+                                        }
+                                      </div>
+                                      <h5>{ recipe.name }</h5>
+                                    </div>
+                                  ) : null
+                                }
+                              </div>
+                            )
                           }
-                        </DisplayMealWithActions>
+                        </Droppable>
                       </div>
-                    )}
-                  </Droppable> 
-                </div>
+                    )
+                  })
+                }
               </div>
             ))
           }

recipes/src/containers/Planner/reducers.ts

@@ -1,5 +1,5 @@
 import { PlannerActions } from './actions';
-import { PlannerState, DBPlanner, WeekPlan, Weekday, RecipePlan } from 'types/planner';
+import { PlannerState, DBPlanner, WeekPlan, Weekday } from 'types/planner';
 import { getWeekNumber, mkWeekDay } from 'services/time';
 import { Reducer } from 'redux';
 import { merge, uniqBy } from 'ramda';

recipes/src/containers/Planner/services.ts

@@ -1,6 +1,6 @@
 import { shortDate } from 'services/time';
 import axios, { AxiosPromise } from 'axios';
-import { DBPlanner, DBDayPlan, WeekPlan, Weekday, Meal, DayPlan } from 'types/planner';
+import { DBPlanner, DBDayPlan, WeekPlan, Weekday, DayPlan, Meal } from 'types/planner';
 import moment, { Moment } from 'moment';
 
 //@ts-ignore
@@ -21,8 +21,8 @@ const toDBPlan = (weekplan: WeekPlan) => {
   return planner.reduce((acc, day)=> {
     return [
       ...acc,
-      ...mkPlan(day, 'lunch'),
-      ...mkPlan(day, 'dinner')
+      ...mkPlan(day, Meal.Lunch),
+      ...mkPlan(day, Meal.Dinner)
     ]
   }, [] as Array<DBDayPlan>)
 }

recipes/src/containers/Planner/styles.scss

@@ -55,8 +55,7 @@
             line-height: 2rem;
           }
 
-          &--lunch,
-          &--dinner {
+          &--meal {
             height: 5rem;
             justify-content: center;
             align-items: center;

recipes/src/types/planner.ts

@@ -9,6 +9,11 @@ export type Weekday =
   'saturday' |
   'sunday';
 
+export enum Meal {
+  Lunch = 0,
+  Dinner,
+}
+
 export type RecipePlan = {
   _id: string,
   name: string,
@@ -16,16 +21,14 @@ export type RecipePlan = {
 
 export type DayPlan = {
   date: Moment,
-  lunch?: RecipePlan,
-  dinner?: RecipePlan,
+  [Meal.Lunch]?: RecipePlan,
+  [Meal.Dinner]?: RecipePlan,
 };
 
 export type WeekPlan = {
   [day in Weekday]: DayPlan;
 };
 
-export type Meal = 'lunch' | 'dinner';
-
 export type PlannerMode = 'edit' | 'view';
 
 export interface PlannerState {