Merge pull request #22 from CrowdTangle/george/test-brand

Fix infinite loop
CrowdTangle · Dec 2, 2019 · 4eef73d · 4eef73d
2 parents 344c2bf + bf5528c
commit 4eef73d
Show file tree

Hide file tree

Showing 15 changed files with 639 additions and 471 deletions.
diff --git a/app/js/date-view.jsx b/app/js/date-view.jsx
@@ -32,7 +32,7 @@ class DatePicker extends React.Component {
     }
 
     shiftDate(direction) {
-        var date = this.state.date;
+        var date = this.state.date.clone();
         if(direction === "back") {
             date = date.subtract(1, "months");
         } else {
@@ -96,8 +96,6 @@ class DatePicker extends React.Component {
             value += 12;
         }
 
-        console.log("setting hour to " + value);
-
         date.hour(value);
 
         this.setState({
@@ -190,13 +188,13 @@ class DatePicker extends React.Component {
     renderDayLetters() {
         return (
             <div className="datepicker-day-headers">
-                <span>S</span>
-                <span>M</span>
-                <span>T</span>
-                <span>W</span>
-                <span>T</span>
-                <span>F</span>
-                <span>S</span>
+                <span>SUN</span>
+                <span>MON</span>
+                <span>TUE</span>
+                <span>WED</span>
+                <span>THU</span>
+                <span>FRI</span>
+                <span>SAT</span>
             </div>
         );
     }

diff --git a/app/js/datepicker.jsx b/app/js/datepicker.jsx
@@ -45,11 +45,11 @@ class DatePicker extends React.Component {
 
 
         if (!startDate) {
-            startDate = moment();
+            startDate = moment.tz(this.props.timezone);
         }
 
         if (!endDate) {
-            endDate = moment(startDate).add(1, "months");
+            endDate = moment.tz(startDate, this.props.timezone).add(1, "months");
         }
 
         let dateFormat;
@@ -72,8 +72,6 @@ class DatePicker extends React.Component {
             format: dateFormat
         };
 
-        console.log("setting state", endDate.format(), startDate.format());
-
         var toggleFunction = this.toggleDatepicker.bind(this, null);
 
         this.naturalBinders = getBinders(toggleFunction);
@@ -99,10 +97,12 @@ class DatePicker extends React.Component {
         // if the date has changed from the parent AND
         // it's different than the date we have in state, use it
         if (
-            (!newProps.defaultEndDate.isSame(this.state.endDate)
+            (!this.state.endDate.isSame(newProps.defaultEndDate)
+            && newProps.defaultEndDate !== this.props.defaultEndDate
             && !newProps.defaultEndDate.isSame(this.props.defaultEndDate))
             ||
-            (!newProps.defaultDate.isSame(this.state.startDate)
+            (!this.state.startDate.isSame(newProps.defaultDate)
+            && !newProps.defaultDate !== this.props.defaultDate
             && !newProps.defaultDate.isSame(this.props.defaultDate))
             ) {
             let endDate = newProps.defaultEndDate;
@@ -113,7 +113,7 @@ class DatePicker extends React.Component {
             }
 
             if (!endDate) {
-                endDate = moment.tz(newProps.timezone, startDate).add(1, "months");
+                endDate = startDate.clone().add(1, "months");
             }
 
             this.setState({
@@ -234,7 +234,6 @@ class DatePicker extends React.Component {
             }
         }
 
-
         newState[type] = date;
         if (this.props.inputEditable) {
             newState[`${type}InputValue`] = date.format(this.state.format);
@@ -313,6 +312,7 @@ class DatePicker extends React.Component {
         const minDate = this.getMinDateForType("endDate");
         const maxDate = this.getMaxDateForType("endDate");
 
+
         if (!enableTime) {
             // round to make sure it's simply the same date;
             endDate.hour(0).minute(0).second(0).millisecond(0);
@@ -360,7 +360,7 @@ class DatePicker extends React.Component {
             return <DateView
                 ref={this.dateView}
                 enableTime={this.props.enableTime}
-                selectedDate={this.state[type]}
+                selectedDate={this.state[type].clone()}
                 timezone={this.props.timezone}
                 maxDate={this.getMaxDateForType(type)}
                 minDate={this.getMinDateForType(type)}
@@ -374,9 +374,9 @@ class DatePicker extends React.Component {
         if (this.props.inputWidth) {
             styles.width = this.props.inputWidth + "px";
         } else if (this.props.enableTime) {
-            styles.width = "120px";
+            styles.width = "165px";
         } else {
-            styles.width = "70px";
+            styles.width = "115px";
         }
 
         if (this.props.isRange) {

diff --git a/app/js/month-view.jsx b/app/js/month-view.jsx
@@ -21,13 +21,13 @@ class MonthView extends React.Component {
     renderWeeks() {
         // start at the first of the month
         const now = moment.tz(this.props.timezone);
-        var currentDate = this.props.date.clone().date(1).hour(0).minute(0).second(0).milliseconds(0),
-            currentMonth = currentDate.month();
+        let currentDate = this.props.date.clone().date(1).hour(0).minute(0).second(0).milliseconds(0);
+        let currentMonth = currentDate.month();
+        let currentYear = currentDate.year();
 
         const weeks = [];
         let i = 0;
 
-
         /**
          * So the basic plan here is to walk up by day. When we hit a sunday,
          * collect the next 7 days and pass them into the week to render. If the first
@@ -36,7 +36,7 @@ class MonthView extends React.Component {
          * tempermental, so rather than passing in moment objects, we just pass in
          * the data we need to the week view
          */
-        while(currentDate.month() <= currentMonth) {
+        while(currentDate.month() <= currentMonth && currentDate.year() <= currentYear) {
             let dayOfWeek = currentDate.day();
 
             // if it's the first day of the month
@@ -62,6 +62,7 @@ class MonthView extends React.Component {
 
               while(currentDate.day() < 6) {
                 currentDate.add(1, "days");
+
                 dates.push({
                   inMonth: currentDate.month() === currentMonth,
                   today: currentDate.format("MM/DD/YYYY") === now.format("MM/DD/YYYY"),
@@ -74,14 +75,13 @@ class MonthView extends React.Component {
               }
 
                weeks.push(<WeekRow
-                 selectedDate={this.props.selectedDate}
                  maxDate={this.props.maxDate}
                  minDate={this.props.minDate}
                  timezone={this.props.timezone}
                  handleSelection={this.props.handleSelection}
                  month={currentMonth}
                  dates={dates}
-                 key={currentDate.date()} />);
+                 key={currentDate.date() + "_" + currentDate.month() + "_" + currentDate.year()} />);
 
 
                 currentDate.add(1, "days");

diff --git a/app/js/week-row.jsx b/app/js/week-row.jsx
@@ -11,8 +11,7 @@ class WeekRow extends React.Component {
         month: PropTypes.number.isRequired,
         handleSelection: PropTypes.func.isRequired,
         minDate: PropTypes.instanceOf(moment),
-        maxDate: PropTypes.instanceOf(moment),
-        selectedDate: PropTypes.instanceOf(moment)
+        maxDate: PropTypes.instanceOf(moment)
     };
 
     constructor(props) {