import React, { Component } from 'react';
import { connect } from 'react-redux';
import { format, getDaysInMonth } from 'date-fns';

import { getMonthSessions } from '../../../../redux/actions';
import Grid from '../../Grid';
import Week from './Week';

class Month extends Component {
    componentDidMount () {
        const { date } = this.props;
        this.props.getMonthSessions(format(date, 'MMMM'));
    }

    render () {
        const { date } = this.props;
        const numDaysInMonth = getDaysInMonth(date);

        return (
            <div className="month">
                <h1 className="month__title">{ format(date, 'MMMM') }</h1>
                <Grid width="270" height="380">
                    <Week data={ [1, 2, 3, 4, 5, 6, 7] } />
                </Grid>
            </div>
        );
    }
}

export default connect(
    ({ root }) => ({
        monthSessions: root.monthSessions
    }),
    { getMonthSessions }
)(Month);

@@ -87,16 +87,34 @@
 t %7B 
+%0A    addDays,%0A    
 format, 
 getD
@@ -109,16 +109,21 @@
 format, 
+%0A    
 getDaysI
@@ -132,25 +132,129 @@
 onth
- %7D from 'date-fns
+, %0A    isSameDay, %0A    startOfMonth %0A%7D from 'date-fns';%0Aimport %7B filter, map, memoize, range, slice, sumBy %7D from 'lodash
 ';%0A%0A
@@ -406,16 +406,614 @@
 onent %7B%0A
+    constructor () %7B%0A        super();%0A        this.normalizeMonthSessions = memoize(this.normalizeMonthSessions.bind(this));%0A    %7D%0A%0A    normalizeMonthSessions () %7B%0A        const %7B date, monthSessions %7D = this.props;%0A        return map(range(0, getDaysInMonth(date)), (day, offset) =%3E %7B%0A            const dateOffset = addDays(startOfMonth(date), offset);%0A            return %7B%0A                date: dateOffset,%0A                total: sumBy(filter(monthSessions, (%7B startTime %7D) =%3E %0A                    isSameDay(startTime, dateOffset)), 'duration'%0A                )%0A            %7D;%0A        %7D);%0A    %7D%0A%0A
     comp
@@ -1206,43 +1206,56 @@
 st n
-umDaysInMonth = getDaysInMonth(date
+ormalizedSessions = this.normalizeMonthSessions(
 );%0A%0A
@@ -1460,36 +1460,917 @@
 eek 
-data=%7B %5B1, 2, 3, 4, 5, 6, 7%5D
+%0A                        key=%7B0%7D %0A                        padding=%225%22%0A                        data=%7B slice(normalizedSessions, 0, 7) %7D /%3E%0A                    %3CWeek %0A                        key=%7B1%7D%0A                        padding=%225%22 transform=%22translate(55, 0)%22%0A                        data=%7B slice(normalizedSessions, 7, 14) %7D /%3E%0A                    %3CWeek %0A                        key=%7B2%7D %0A                        padding=%225%22 transform=%22translate(110, 0)%22%0A                        data=%7B slice(normalizedSessions, 14, 21) %7D /%3E%0A                    %3CWeek %0A                        key=%7B3%7D %0A                        padding=%225%22 transform=%22translate(165, 0)%22%0A                        data=%7B slice(normalizedSessions, 21, 28) %7D /%3E%0A                    %3CWeek %0A                        key=%7B4%7D %0A                        padding=%225%22 transform=%22translate(220, 0)%22%0A                        data=%7B slice(normalizedSessions, 28)
  %7D /

Implement normalize method in Month component