Add custom recipe on planner support (view only)

ktchn/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "ts-node --inspect-brk=9229 src/server.ts",
-    "dev": "node node_modules/nodemon/bin/nodemon.js ts-node --inspect-brk=9229 src/server.ts",
+    "start": "ts-node src/server.ts",
+    "dev": "node node_modules/nodemon/bin/nodemon.js ts-node src/server.ts",
     "build": "cd node_modules/recipe-ingredient-parser && npm run build && cd ../../ && ./node_modules/.bin/webpack --mode production",
     "build:live": "nodemon --watch 'src/**/*.ts' --exec ts-node src/server.ts"
   },

recipes/src/containers/Planner/actions.ts

@@ -45,11 +45,11 @@ const removeFromBacklog = (recipe: RecipePlan): RemoveFromBacklogAction => ({
 });
 
 export interface AssignToDayAction extends Action<'ASSIGN_TO_DAY'> {
-  recipe: RecipePlan,
+  recipe: RecipePlan | string,
   day: Weekday,
   meal: Meal
 }
-const assignToDay = (recipe: RecipePlan, day: Weekday, meal: Meal): AssignToDayAction => ({
+const assignToDay = (recipe: RecipePlan | string, day: Weekday, meal: Meal): AssignToDayAction => ({
   type: ASSIGN_TO_DAY,
   recipe,
   day,

recipes/src/containers/Planner/index.tsx

@@ -85,7 +85,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
   }
 
   getRecipes = (planner: WeekPlan): RecipePlan[] => {
-    const nonEmpty = (recipe: RecipePlan | undefined): recipe is RecipePlan => recipe !== undefined;
+    const nonEmpty = (recipe: RecipePlan | undefined | string): recipe is RecipePlan => recipe !== undefined && typeof recipe !== 'string' && recipe._id !== undefined;
     return Object.entries(planner).reduce((recipes, [weekday, dayplan]) => {
       return [
         ...recipes,
@@ -94,6 +94,10 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
     }, [] as RecipePlan[]);
   }
 
+  showRecipe = (recipe: string | RecipePlan) => {
+    return typeof recipe === 'string' ? recipe : recipe.name;
+  }
+
   render () {
     return (
       <div className='cbk-planner'>
@@ -164,6 +168,10 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
   }
 }
 
+const isCustomRecipe = (recipe: string | RecipePlan): recipe is string => {
+  return typeof recipe === 'string';
+}
+
 const DisplayPlanner: React.SFC<{
   week: Weekday[],
   planner: WeekPlan,
@@ -198,9 +206,15 @@ const DisplayPlanner: React.SFC<{
                     return (
                       <div className='day-meal' key={meal}>
                         {
-                          recipe && (
-                            <h5 onClick={() => goTo(recipe._id)} title={recipe.name}>{ recipe.name }</h5>
-                          )
+                          recipe !== undefined && (isCustomRecipe(recipe) ? (
+                            <h5> { recipe } </h5>
+                          ) : (
+                            <h5
+                              onClick={() => goTo(recipe._id)}
+                              title={recipe.name}>
+                                { recipe.name }
+                            </h5>
+                          ))
                         }
                       </div>
                     )
@@ -210,7 +224,13 @@ const DisplayPlanner: React.SFC<{
                     return recipe ? (
                       <div className='day-meal day-meal--edit' key={meal}>
                         <Button icon='clear' onClick={() => removeMeal(day, meal)} small></Button>
-                        <h5 title={recipe && recipe.name}>{ recipe && recipe.name }</h5>
+                        {
+                          isCustomRecipe(recipe) ? (
+                            <h5> {recipe} </h5>
+                          ) : (
+                            <h5 title={recipe && recipe.name}>{ recipe && recipe.name }</h5>
+                          )
+                        }
                       </div>
                     ) : (
                       <div className='day-meal' key={meal}>
@@ -260,9 +280,11 @@ const MobileDisplayPlanner: React.SFC<{
                       className={`day-schedule__meals--${meal}`}
                     >
                       {
-                        recipe ? (
+                        recipe && (isCustomRecipe(recipe) ? (
+                          <h5>{recipe}</h5>
+                        ) : (
                           <h5 onClick={() => goTo(recipe._id)}>{ recipe.name }</h5>
-                        ) : null
+                        ))
                       }
                     </div>
                   )

recipes/src/containers/Planner/reducers.ts

@@ -1,5 +1,5 @@
 import { PlannerActions } from './actions';
-import { PlannerState, DBPlanner, WeekPlan, Weekday, PlannerMode } from 'types/planner';
+import { PlannerState, DBPlanner, WeekPlan, Weekday, PlannerMode, RecipePlan } from 'types/planner';
 import { getWeekNumber, mkWeekDay } from 'services/time';
 import { Reducer } from 'redux';
 import { merge, uniqBy } from 'ramda';
@@ -17,6 +17,10 @@ const initialState: PlannerState = {
   backlog: []
 }
 
+const isRecipe = (meal: string | RecipePlan | undefined): meal is RecipePlan => {
+  return meal !== undefined && typeof meal != 'string' && meal._id !== undefined;
+}
+
 const joinPlanner = (old: WeekPlan, updated: DBPlanner): WeekPlan => Object.keys(old).reduce((_oldPlanner, day) => ({
   ..._oldPlanner,
   [day]: {
@@ -56,8 +60,7 @@ const PlannerReducer: Reducer<PlannerState, PlannerActions> = (
       }
     case 'REMOVE_MEAL':
       const meal = state.planner[action.day][action.meal];
-      const inBacklog = meal && state.backlog.find(r => r._id === meal._id) !== undefined;
-      return {
+      let newState = {
         ...state,
         planner: {
           ...state.planner,
@@ -65,8 +68,17 @@ const PlannerReducer: Reducer<PlannerState, PlannerActions> = (
             ...state.planner[action.day],
             [action.meal]: undefined
           }
-        },
-        backlog: meal && !inBacklog ? state.backlog.concat([meal]) : state.backlog
+        }
+      };
+
+      if (isRecipe(meal)) {
+        const inBacklog = meal && typeof meal !== 'string' && state.backlog.find(r => r._id === meal._id) !== undefined;
+        return {
+          ...newState,
+          backlog: meal && !inBacklog ? state.backlog.concat([meal]) : state.backlog
+        }
+      } else {
+        return newState
       }
     case 'REQUEST_PLANNER':
       return {

recipes/src/containers/Planner/services.ts

@@ -10,12 +10,25 @@ const toDBPlan = (weekplan: WeekPlan) => {
   const planner = Object.keys(weekplan).map((weekday) => weekplan[weekday as Weekday]);
   const mkPlan = (day: DayPlan, meal: Meal): Array<DBDayPlan> => {
     const dish = day[meal];
-    const date = moment(day.date);
-    return dish ? [{
-      recipe: dish._id,
-      meal: meal,
-      date: date.format()
-    }] : []
+    const date = moment(day.date).format();
+
+    if (dish === undefined) {
+      return []
+    } else {
+      if (typeof dish === 'string') {
+        return [{
+          meal,
+          date,
+          custom: dish
+        }]
+      } else {
+        return [{
+          recipe: dish._id,
+          meal: meal,
+          date: date
+        }]
+      }
+    }
   } 
   return planner.reduce((acc, day)=> {
     return [

recipes/src/types/planner.ts

@@ -24,9 +24,9 @@ export type RecipePlan = {
 
 export type DayPlan = {
   date: Moment,
-  [Meal.Lunch]?: RecipePlan,
-  [Meal.Dinner]?: RecipePlan,
-  [Meal.Dessert]?: RecipePlan
+  [Meal.Lunch]?: RecipePlan | string,
+  [Meal.Dinner]?: RecipePlan | string,
+  [Meal.Dessert]?: RecipePlan | string
 };
 
 export type WeekPlan = {
@@ -53,8 +53,9 @@ export interface PlannerState {
 
 export interface DBDayPlan {
   date: string,
-  recipe: string,
   meal: Meal
+  recipe?: string,
+  custom?: string
 }
 
 export interface DBPlanner extends WeekPlan {