Planner state format: Exclude week from data

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, RecipePlan } from 'types/planner';
+import { PlannerState, Weekday, Meal, RecipePlan, DayPlan } from 'types/planner';
 import { Grid, Row, Cell } from "@material/react-layout-grid";
 import Card from 'components/Card';
 import PlannerActions, { Actions } from './actions';
@@ -32,12 +32,12 @@ const DisplayMeal = (meal?: RecipePlan) => meal ? (
   </div>
 ) : null;
 
-const mkScheduleDay = (weekday: Weekday, idx: number, meal: Meal, recipe?: RecipePlan) => (
+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(recipe) }
+        { DisplayMeal(dayPlan[meal]) }
       </div>
     )}
   </Droppable> 
@@ -48,7 +48,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
   constructor(props: PlannerContainerProps) {
     super(props);
     this.state = {
-      week: mkWeekData(this.props.data.week)
+      week: Object.keys(props.planner).map((weekday) => ([ weekday as Weekday, props.planner[weekday as Weekday].date.format()]))
     }
   }
 
@@ -70,7 +70,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
         <Navbar
           title='Planner'
         >
-          <div>Week {this.props.data.week}</div>
+          <div>Week {this.props.week}</div>
         </Navbar>
         <section className='cbk-planner__body'>
           <DragDropContext onDragEnd={this.assignRecipe}>
@@ -86,7 +86,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                                   key={item._id}
                                   draggableId={item._id}
                                   index={index}>
-                                  {(provided, snapshot) => (
+                                  {provided => (
                                     <div
                                       ref={provided.innerRef}
                                       {...provided.draggableProps}
@@ -111,16 +111,16 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                   <div className='cbk-planner__body__calendar'>
                     <div className='container'>
                       {
-                        this.state.week.map(([weekday, day], weekdayNumber) => (
-                          <div key={weekdayNumber} className='day-schedule'>
+                        this.state.week.map(([weekday, day], dayNumber) => (
+                          <div key={dayNumber} className='day-schedule'>
                             <div className='day-schedule--date'>
-                              {weekday} {moment(day).format('D')}
+                              {weekday} {moment(day).format('DD')}
                             </div>
                             <div className='day-schedule--lunch'>
-                              { mkScheduleDay(weekday, weekdayNumber, 'lunch', this.props.data[weekday].lunch) }
+                              { mkScheduleDay(weekday, dayNumber, 'lunch', this.props.planner[weekday]) }
                             </div>
                             <div className='day-schedule--dinner'>
-                              { mkScheduleDay(weekday, weekdayNumber, 'dinner', this.props.data[weekday].dinner) }
+                              { mkScheduleDay(weekday, dayNumber, 'dinner', this.props.planner[weekday]) }
                             </div>
                           </div>
                         ))

recipes/src/containers/Planner/reducers.ts

@@ -1,14 +1,14 @@
 import { ActionTypes, ADD_TO_BACKLOG, ASSIGN_TO_DAY } from './actions';
-import Planner, { PlannerState, Weekday } from 'types/planner';
+import { PlannerState, Weekday } from 'types/planner';
 import { getWeekNumber, mkWeekDay, getWeekDay } from 'services/time';
 
 
 const initialState: PlannerState = {
   isFetching: false,
-  data: {
-    from: mkWeekDay(1),
-    to: mkWeekDay(7),
-    week: getWeekNumber(),
+  from: mkWeekDay(1),
+  to: mkWeekDay(7),
+  week: getWeekNumber(),
+  planner: {
     monday:     { date: mkWeekDay(1)},
     tuesday:    { date: mkWeekDay(2)},
     wednesday:  { date: mkWeekDay(3)},
@@ -47,10 +47,10 @@ const PlannerReducer = (
       let weekday = getWeekDay(action.day) as Weekday;
       return {
         ...state,
-        data: {
-          ...state.data,
+        planner: {
+          ...state.planner,
           [weekday]: {
-            ...state.data[weekday],
+            ...state.planner[weekday],
             [action.meal]: action.recipe
           }
         }
@@ -64,10 +64,10 @@ const PlannerReducer = (
       const day = getWeekDay(action.day) as Weekday;
       return {
         ...state,
-        data: {
-          ...state.data,
+        planner: {
+          ...state.planner,
           [day]: {
-            ...state.data[day],
+            ...state.planner[day],
             [action.meal]: undefined
           }
         }

recipes/src/types/planner.ts

@@ -27,15 +27,12 @@ export type WeekPlan = {
 
 export type Meal = 'lunch' | 'dinner';
 
-export default interface Planner extends WeekPlan {
-  week: number,
-  from: Moment,
-  to: Moment
-};
-
 export interface PlannerState {
   isFetching: boolean,
   error?: string,
-  data: Planner,
+  week: number,
+  from: Moment,
+  to: Moment,
+  planner: WeekPlan,
   backlog: RecipePlan[]
 }