Merge pull request #4 from mekanix/feature/dates

Move dates on click

Author: we3x

app/js/components/Calendar.jsx

@@ -1,17 +1,15 @@
 var React = require('react');
 var Menu = require('./Menu.jsx');
-var Title = require('./Title.jsx');
 var Week = require('./Week.jsx');
-var Navigation = require('./Navigation.jsx');
+var Todo = require('./Todo.jsx');
 
 var Calendar = React.createClass({
   render: function() {
     return (
       <div className="calendar">
         <Menu/>
-        <Navigation/>
-        <Title/>
         <Week/>
+        <Todo/>
       </div>
     );
   }

app/js/components/Day.jsx

@@ -19,7 +19,7 @@ var Day = React.createClass({
     }
     return (
       <div className="u-1/7 day">
-        <span className="u-6/7 day-name">{this.props.day}</span>
+        <span className="u-6/7 day-name">{this.props.name}</span>
         <span className="u-1/7 day-of-month">{this.props.dayOfMonth}</span>
         {hours.map((hour) => {
           return(

app/js/components/Title.jsx

@@ -2,37 +2,21 @@ var React = require('react');
 var moment  = require('moment');
 
 var Title = React.createClass({
-  getInitialState: function(){
-    var today = moment()
-    var startWeek = moment([today.year(), today.month(), today.date() - today.day()+1])
-    var endWeek = moment([today.year(), today.month(), startWeek.date()+6])
-    return {
-      start: startWeek,
-      end: endWeek
-    };
-  },
-  nextWeek: function(event){
-    this.setState({start: this.state.start.day(7+1), end: this.state.end.day(7)})
-  },
-  previousWeek: function(event){
-    this.setState({start: this.state.start.day(-7+1), end: this.state.end.day(-7)})
-  },
-
-    render() {
-        return (
-          <div className="title">
-            <div className="u-1/3 title--item title--previous">
-              <a href="#" onClick={this.previousWeek}>&lt;</a>
-            </div>
-            <div className="u-1/3 title--item title--data">
-              <h3>{this.state.start.format("D MMM")} - {this.state.end.format("D MMM")}</h3>
-            </div>
-            <div className="u-1/3 title--item title--next">
-              <a href="#" onClick={this.nextWeek}>&gt;</a>
-            </div>
+  render() {
+      return (
+        <div className="title">
+          <div className="u-1/3 title--item title--previous">
+            <a href="#" onClick={this.props.previous}>&lt;</a>
+          </div>
+          <div className="u-1/3 title--item title--data">
+            <h3>{this.props.start.format("D MMM")} - {this.props.end.format("D MMM")}</h3>
+          </div>
+          <div className="u-1/3 title--item title--next">
+            <a href="#" onClick={this.props.next}>&gt;</a>
           </div>
-        );
-    }
+        </div>
+      );
+  }
 });
 
 module.exports = Title;

app/js/components/Navigation.jsx app/js/components/Todo.jsx

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var Menu = React.createClass({
+var Todo = React.createClass({
     render() {
       return (
         <nav id="navigation" className="navigation">
@@ -10,4 +10,4 @@ var Menu = React.createClass({
     }
 });
 
-module.exports = Menu;
+module.exports = Todo;

app/js/components/Week.jsx

@@ -1,10 +1,14 @@
 var React = require('react');
+var moment  = require('moment');
 var Day = require('./Day.jsx');
+var Title = require('./Title.jsx');
 
 var Week = React.createClass({
-  render() {
-    var days = [];
-    var day_names = [
+  getInitialState: function(){
+    var today = moment();
+    var startWeek = moment(today).day(-6);
+    var endWeek = moment(startWeek).day(7);
+    var longDayNames = [
       "Monday",
       "Tuesday",
       "Wednesday",
@@ -13,17 +17,43 @@ var Week = React.createClass({
       "Saturday",
       "Sunday"
     ];
-    for (var day = 1; day <= 7; day++) {
+
+    return ({
+      start: startWeek,
+      end: endWeek,
+      longDayNames: longDayNames
+    });
+  },
+
+  nextWeek: function(event){
+    this.setState({start: this.state.start.day(8), end: this.state.end.day(7)});
+  },
+
+  previousWeek: function(event){
+    this.setState({start: this.state.start.day(-6), end: this.state.end.day(-7)});
+  },
+
+  render() {
+    var days = [];
+    for (var day = 0; day < 7; day++) {
+
       days.push({
-        dayOfMonth: day,
-        day: day_names[day-1]
+        dayOfMonth: moment(this.state.start).day(day+1).format('D'),
+        name: this.state.longDayNames[day]
       });
     }
+
     return (
       <div className="content">
+        <Title
+          start={this.state.start}
+          end={this.state.end}
+          previous={this.previousWeek}
+          next={this.nextWeek}
+        />
         {days.map((day) => {
           return (
-            <Day dayOfMonth={day.dayOfMonth} day={day.day}/>
+            <Day dayOfMonth={day.dayOfMonth} name={day.name}/>
           );
         })}
       </div>