Create MobileDisplayPlanner

recipes/src/containers/Planner/index.tsx

@@ -14,11 +14,12 @@ import { ThunkDispatch } from 'redux-thunk';
 import { bindActionCreators } from 'redux';
 import RecipeSearch from 'components/RecipeSearch';
 import { DBRecipe } from 'types/recipes';
+import { Display, UiState} from 'types/ui';
 import { getWeekPeriod } from 'services/time';
 
 type Actions = typeof PlannerActions
 
-interface PlannerContainerProps extends RouteComponentProps, PlannerState, Actions {
+interface PlannerContainerProps extends RouteComponentProps, PlannerState, Actions, UiState {
   fetch: typeof fetchPlannerActionCreator,
   save: typeof savePlannerActionCreator
   changeRange: typeof changePlannerRangeActionCreator
@@ -81,47 +82,111 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
     this.props.changeRange(newPeriod.from, newPeriod.to, newPeriod.week);
   }
 
+  goToRecipe = (recipeId: string) => {
+    this.props.history.push('/recipes/view/' + recipeId)
+  }
+
   render () {
     return (
       <div className='cbk-planner'>
-        <Navbar
-          title='Planner'
-        >
-          {
-            this.props.mode === PlannerMode.View ? (
-              <Button outlined raised onClick={() => this.changeMode(PlannerMode.Edit)}>Edit</Button>
-              ) : (
-                <div>
-                  <Button outlined raised onClick={() => {
-                    this.props.save(this.props.planner, this.props.from, this.props.to)
-                    this.changeMode(PlannerMode.View)
-                  }}>Save</Button>
-                  <Button outlined raised onClick={() => {
-                    this.cancel();
-                    this.changeMode(PlannerMode.View)
-                  }}> Cancel </Button>
+        {
+          this.props.display === Display.Desktop ?
+          (
+            <>
+              <Navbar title='Planner'>
+              {
+                this.props.mode === PlannerMode.View ? (
+                  <Button outlined raised onClick={() => this.changeMode(PlannerMode.Edit)}>Edit</Button>
+                  ) : (
+                    <div>
+                      <Button outlined raised onClick={() => {
+                        this.props.save(this.props.planner, this.props.from, this.props.to)
+                        this.changeMode(PlannerMode.View)
+                      }}>Save</Button>
+                      <Button outlined raised onClick={() => {
+                        this.cancel();
+                        this.changeMode(PlannerMode.View)
+                      }}> Cancel </Button>
 
-                </div>
-            )
-          }
-        </Navbar>
-        <DisplayPlanner
-          mode={this.props.mode}
-          week={this.state.week}
-          weekNumber={this.props.week}
-          onDragEnd={this.assignRecipe}
-          backlog={this.props.backlog}
-          planner={this.props.planner}
-          removeMeal={this.removeMeal}
-          addToBacklog={this.props.addToBacklog}
-          assignToDay={this.props.assignToDay}
-          changeWeek={this.changeWeek}
-        />
+                    </div>
+                )
+              }
+              </Navbar>
+              <DisplayPlanner
+                mode={this.props.mode}
+                week={this.state.week}
+                weekNumber={this.props.week}
+                onDragEnd={this.assignRecipe}
+                backlog={this.props.backlog}
+                planner={this.props.planner}
+                removeMeal={this.removeMeal}
+                addToBacklog={this.props.addToBacklog}
+                assignToDay={this.props.assignToDay}
+                changeWeek={this.changeWeek}
+              />
+            </>
+          ) 
+          :(<MobileDisplayPlanner 
+              week={this.state.week}
+              weekNumber={this.props.week}
+              planner={this.props.planner}
+              changeWeek={this.changeWeek}
+              goTo={this.goToRecipe}
+            />)
+        }
+        
       </div>
     );
   }
 }
 
+const MobileDisplayPlanner: React.SFC<{
+  week: [Weekday, string][],
+  weekNumber: number,
+  planner: WeekPlan,
+  changeWeek: (shift?: WeekShift) => void,
+  goTo: (recipeId: string) => void
+}> = ({ weekNumber, week, planner, changeWeek, goTo}) => (
+  <section className='cbk-planner-mobile__body'>
+    <div className='cbk-planner-mobile__body__actions'>
+      <Button onClick={() => changeWeek(WeekShift.Prev)}>Prev</Button>
+      Week {weekNumber}
+      <Button onClick={() => changeWeek()}>Current</Button>
+      <Button onClick={() => changeWeek(WeekShift.Next)}>Next</Button>
+    </div>
+    <div className='cbk-planner-mobile__body__calendar'>
+      {
+        week.map(([weekday], dayNumber)=>(
+          <div key={dayNumber} className='day-schedule'>
+            <div className='day-schedule__day'>
+              <h5>{planner[weekday].date.format('ddd DD.MM') || weekday}</h5>
+            </div>
+            <div className='day-schedule__meals'>
+              {
+                Meals.map((meal, key) => {
+                  const recipe = planner[weekday][meal];
+                  return (
+                    <div
+                      key={key}
+                      className={`day-schedule__meals--${meal}`}
+                    >
+                      {
+                        recipe ? (
+                          <h5 onClick={() => goTo(recipe._id)}>{ recipe.name }</h5>
+                        ) : null
+                      }
+                    </div>
+                  )
+                })
+              }
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </section>
+)
+
 const DisplayPlanner: React.SFC<{
   week: [Weekday, string][],
   onDragEnd: OnDragEndResponder,
@@ -172,7 +237,8 @@ const DisplayPlanner: React.SFC<{
       }
       <div className='cbk-planner__body__calendar'>
         <div>
-          Week {weekNumber}</div>
+          Week {weekNumber}
+          </div>
           <Button onClick={() => changeWeek(WeekShift.Prev)}>Prev</Button>
           <Button onClick={() => changeWeek()}>Current</Button>
           <Button onClick={() => changeWeek(WeekShift.Next)}>Next</Button>
@@ -240,7 +306,10 @@ const DisplayPlanner: React.SFC<{
 )
 
 const mapStateToProps = (state: AppState) => {
-  return state.planner
+  return {
+    ...state.planner,
+    ...state.ui
+  }
 }
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<AppState, any, any>) => ({

recipes/src/containers/Planner/styles.scss

@@ -86,4 +86,46 @@
     }
   }
 
+}
+
+.cbk-planner-mobile {
+  &__body {
+    &__calendar {
+      padding: $spacing-small/2;
+      .day-schedule {
+        display: flex;
+        margin-bottom: $spacing-small/2;
+        &__day {
+          writing-mode: vertical-rl;
+          height: 5rem;
+          background-color: $grey-900;
+          color: $white;
+          padding: 0.3rem;
+        }
+        &__meals {
+          min-width: 0;
+          width: 100%;
+          border-top: 1px solid $grey-300;
+          border-bottom: 1px solid $grey-300;
+          border-right: 1px solid $grey-300;
+          &--0,
+          &--1 {
+            border-bottom: 1px solid $grey-300;
+          }
+          &--0,
+          &--1,
+          &--2 {
+            padding: 2px 4px;
+            height: 1.5rem;
+            h5 {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              line-height: 1.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
 }

recipes/src/store/uiReducer.ts

@@ -1,13 +1,5 @@
 import { Reducer, Action } from "redux"
-
-export enum Display {
-  Desktop,
-  Mobile
-}
-
-type UiState = {
-  display: Display,
-}
+import { UiState, Display } from 'types/ui';
 
 const initialState: UiState = {
   display: window.innerWidth < 840 ? Display.Mobile : Display.Desktop

recipes/src/types/ui.ts

@@ -0,0 +1,12 @@
+export enum Display {
+  Desktop,
+  Mobile
+}
+
+export type UiState = {
+  display: Display,
+}
+
+export default {
+  Display
+}