Add Actions bar with current week and week navigation buttons

recipes/src/containers/Planner/index.tsx

@@ -16,6 +16,7 @@ import RecipeSearch from 'components/RecipeSearch';
 import { DBRecipe } from 'types/recipes';
 import { Display, UiState} from 'types/ui';
 import { getWeekPeriod } from 'services/time';
+import Sticker from 'components/Sticker';
 
 type Actions = typeof PlannerActions
 
@@ -112,6 +113,19 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                 )
               }
               </Navbar>
+              <div className='cbk-planner__actions'>
+                <div>
+                  <Sticker>
+                    Week {this.props.week}
+                  </Sticker>
+                </div>
+                <div>
+                  <Button onClick={() => this.changeWeek(WeekShift.Prev)}>Prev</Button>
+                  <Button onClick={() => this.changeWeek()}>Current</Button>
+                  <Button onClick={() => this.changeWeek(WeekShift.Next)}>Next</Button>
+                </div>
+
+              </div>
               <DisplayPlanner
                 week={this.state.week.map(([day]) => day)}
                 planner={this.props.planner}

recipes/src/containers/Planner/reducers.ts

@@ -6,7 +6,7 @@ import { merge, uniqBy } from 'ramda';
 import { mkPlanner } from './services';
 
 const initialState: PlannerState = {
-  mode: PlannerMode.View,
+  mode: PlannerMode.Edit,
   isFetching: false,
   saving: false,
   edit: false,

recipes/src/containers/Planner/styles.scss

@@ -1,6 +1,12 @@
 @import 'styles/_variables.scss';
 
 .cbk-planner {
+  &__actions {
+    display: flex;
+    padding: 0 $spacing-small;
+    padding-top: $spacing-small;
+    justify-content: space-between;
+  }
   &__body {
     padding: $spacing-small;
     &__planner {