Reduce planner state for recipes. Add remove action&reducer. Add showMeal component

ktchn/src/planner/model.ts

@@ -28,8 +28,13 @@ export default interface PlanDB extends Plan{
   _id: ObjectID,
 }
 
+export interface RecipePlan {
+  _id: string,
+  name: string
+}
+
 export interface CompletePlanDB extends Omit<PlanDB, 'recipe'> {
-  recipe: RecipeDB
+  recipe: RecipePlan
 }
 
 export interface DayPlan {

recipes/src/containers/Planner/actions.ts

@@ -1,46 +1,61 @@
 import { DBRecipe } from 'types/recipes';
 import { Moment } from 'moment'
-import { Meal } from 'types/planner';
+import { Meal, RecipePlan } from 'types/planner';
 
 export const ADD_TO_BACKLOG = 'ADD_TO_BACKLOG';
 export const REMOVE_FROM_BACKLOG = 'REMOVE_FROM_BACKLOG';
 export const ASSIGN_TO_DAY = 'ASSIGN_TO_DAY';
+export const REMOVE_MEAL = 'REMOVE_MEAL';
 
 const actions = {
   addToBacklog: (recipe: DBRecipe) => ({
     type: ADD_TO_BACKLOG,
-    recipe,
+    recipe: {
+      _id: recipe._id,
+      name: recipe.name
+    },
   }),
-  removeFromBacklog: (recipe: DBRecipe) => ({
+  removeFromBacklog: (recipe: RecipePlan) => ({
     type: REMOVE_FROM_BACKLOG,
-    recipe
+    recipe,
   }),
-  assignToDay: (recipe: DBRecipe, day: Moment, meal: Meal) => ({
+  assignToDay: (recipe: RecipePlan, day: Moment, meal: Meal) => ({
     type: ASSIGN_TO_DAY,
     recipe,
     day,
     meal,
+  }),
+  removeMeal: (day: Moment, meal: Meal) => ({
+    type: REMOVE_MEAL,
+    day,
+    meal
   })
 }
 
 export type AddToBacklog = {
   type: typeof ADD_TO_BACKLOG,
-  recipe: DBRecipe,
+  recipe: RecipePlan,
 };
 
 export type RemoveFromBacklog = {
   type: typeof REMOVE_FROM_BACKLOG,
-  recipe: DBRecipe
+  recipe: RecipePlan
 }
 
 export type AssignToDay = {
   type: typeof ASSIGN_TO_DAY,
-  recipe: DBRecipe,
+  recipe: RecipePlan,
+  day: Moment,
+  meal: Meal
+}
+
+export type RemoveMeal = {
+  type: typeof REMOVE_MEAL,
   day: Moment,
   meal: Meal
 }
 
-export type ActionTypes = AddToBacklog | RemoveFromBacklog | AssignToDay;
+export type ActionTypes = AddToBacklog | RemoveFromBacklog | AssignToDay | RemoveMeal;
 
 export type Actions = typeof actions;
 export default actions

recipes/src/containers/Planner/index.tsx

@@ -3,7 +3,7 @@ import { RouteComponentProps } from 'react-router';
 import Navbar from 'components/Navbar';
 import { AppState } from 'store/configureStore';
 import { connect } from 'react-redux';
-import { PlannerState, Weekday, Meal } from 'types/planner';
+import { PlannerState, Weekday, Meal, RecipePlan } from 'types/planner';
 import { Grid, Row, Cell } from "@material/react-layout-grid";
 import Card from 'components/Card';
 import PlannerActions, { Actions } from './actions';
@@ -12,6 +12,7 @@ import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautif
 import './styles.scss';
 import { mkWeekData, mkWeekDay } from 'services/time';
 import { DBRecipe } from 'types/recipes';
+import Button from 'components/Button';
 
 
 interface PlannerContainerProps extends RouteComponentProps, PlannerState, Actions {
@@ -24,15 +25,24 @@ interface PlannerContainerState {
   week: [Weekday, string][]
 }
 
-const DisplayMeal = (meal?: DBRecipe) => meal ? (
-  <Card
-    key={meal._id}
-    onClick={()=>{}}
-    title={meal.name}
-    noMedia
-  />
+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, recipe?: RecipePlan) => (
+  <Droppable droppableId={`${idx}-${weekday}-${meal}`}>
+    {provided => (
+      <div className='day-schedule-content' ref={provided.innerRef}>
+        {provided.placeholder}
+        { DisplayMeal(recipe) }
+      </div>
+    )}
+  </Droppable> 
+)
+
 class PlannerContainer extends Component<PlannerContainerProps, PlannerContainerState> {
 
   constructor(props: PlannerContainerProps) {
@@ -97,45 +107,20 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                     </Droppable>
                   </div>
                 </Cell>
-
-                {/* {
-                  this.props.backlog.map((recipe, i) => (
-                    <Card
-                      key={i}
-                      title={recipe.name}
-                      onClick={() => {}}
-                      summary={recipe.summary}
-                    />
-                  ))
-                } */}
                 <Cell columns={10}>
                   <div className='cbk-planner__body__calendar'>
                     <div className='container'>
                       {
-                        this.state.week.map((data, weekdayNumber) => (
+                        this.state.week.map(([weekday, day], weekdayNumber) => (
                           <div key={weekdayNumber} className='day-schedule'>
-                            <div className='day-schedule--name'>
-                              {data[DAY]} {moment(data[DATE]).format('D')}
+                            <div className='day-schedule--date'>
+                              {weekday} {moment(day).format('D')}
                             </div>
                             <div className='day-schedule--lunch'>
-                              <Droppable droppableId={`${weekdayNumber}-${data[DAY]}-lunch`}>
-                                {provided => (
-                                  <div className='day-schedule-content' ref={provided.innerRef}>
-                                    {provided.placeholder}
-                                    { DisplayMeal(this.props.data[data[DAY] as Weekday].lunch) }
-                                  </div>
-                                )}
-                              </Droppable>
+                              { mkScheduleDay(weekday, weekdayNumber, 'lunch', this.props.data[weekday].lunch) }
                             </div>
                             <div className='day-schedule--dinner'>
-                              <Droppable droppableId={`${weekdayNumber}-${data[DAY]}-dinner`}>
-                                {provided => (
-                                  <div className='day-schedule-content' ref={provided.innerRef}>
-                                    {provided.placeholder}
-                                    { DisplayMeal(this.props.data[data[DAY] as Weekday].dinner) }
-                                  </div>
-                                )}
-                              </Droppable>
+                              { mkScheduleDay(weekday, weekdayNumber, 'dinner', this.props.data[weekday].dinner) }
                             </div>
                           </div>
                         ))

recipes/src/containers/Planner/reducers.ts

@@ -9,15 +9,28 @@ const initialState: PlannerState = {
     from: mkWeekDay(1),
     to: mkWeekDay(7),
     week: getWeekNumber(),
-    monday:   { date: mkWeekDay(1)},
-    tuesday:  { date: mkWeekDay(2)},
-    wednesday: { date: mkWeekDay(3)},
-    thursday: { date: mkWeekDay(4)},
-    friday:   { date: mkWeekDay(5)},
-    saturday: { date: mkWeekDay(6)},
-    sunday:   { date: mkWeekDay(7)},
+    monday:     { date: mkWeekDay(1)},
+    tuesday:    { date: mkWeekDay(2)},
+    wednesday:  { date: mkWeekDay(3)},
+    thursday:   { date: mkWeekDay(4)},
+    friday:     { date: mkWeekDay(5)},
+    saturday:   { date: mkWeekDay(6)},
+    sunday:     { date: mkWeekDay(7)},
   },
-  backlog: []
+  backlog: [
+    {
+      _id: '5d638a66eed9f450ff3b32dc',
+      name: 'Summer Corn Chowder'
+    },
+    {
+      _id: '5d638aedeed9f450ff3b32dd',
+      name: 'Chicken Parm'
+    },
+    {
+      _id: '5d6906f806662f07a2825ab7',
+      name: 'Creamy Chicken And Wild Rice Soup'
+    }
+  ]
 }
 
 const PlannerReducer = (
@@ -31,7 +44,7 @@ const PlannerReducer = (
         backlog: state.backlog.concat([action.recipe])
       };
     case 'ASSIGN_TO_DAY':
-      const weekday = getWeekDay(action.day) as Weekday;
+      let weekday = getWeekDay(action.day) as Weekday;
       return {
         ...state,
         data: {
@@ -47,6 +60,18 @@ const PlannerReducer = (
         ...state,
         backlog: state.backlog.filter(recipe => recipe._id !== action.recipe._id)
       }
+    case 'REMOVE_MEAL':
+      const day = getWeekDay(action.day) as Weekday;
+      return {
+        ...state,
+        data: {
+          ...state.data,
+          [day]: {
+            ...state.data[day],
+            [action.meal]: undefined
+          }
+        }
+      }
     default:
       return state
   }

recipes/src/containers/Planner/styles.scss

@@ -17,7 +17,7 @@
           display: flex;
           flex-direction: column;
 
-          &--name {
+          &--date {
             height: 3rem;
             justify-content: center;
             align-items: center;
@@ -35,6 +35,11 @@
           &-content {
             width: inherit;
             height: 100%;
+
+            .meal-card {
+              display: flex;
+              align-items: center;
+            }
           }
         }
       }

recipes/src/types/planner.ts

@@ -10,10 +10,15 @@ export type Weekday =
   'saturday' |
   'sunday';
 
+export type RecipePlan = {
+  _id: string,
+  name: string,
+}
+
 export type DayPlan = {
   date: Moment,
-  lunch?: DBRecipe,
-  dinner?: DBRecipe,
+  lunch?: RecipePlan,
+  dinner?: RecipePlan,
 };
 
 export type WeekPlan = {
@@ -32,5 +37,5 @@ export interface PlannerState {
   isFetching: boolean,
   error?: string,
   data: Planner,
-  backlog: DBRecipe[]
+  backlog: RecipePlan[]
 }