Merge pull request #943 from ZmagoD/zd_SCI_1866_v2

fixes first element both in Rails part an React part off the application

app/javascript/src/components/Navigation/components/ActivityDateElement.jsx

@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react";
-import Moment from "react-moment";
+import moment from 'moment-timezone';
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
@@ -23,11 +23,12 @@ const StyledSpan = styled.span`
   border-radius: 0.25em;
 `;
 
-const ActivityDateElement = (props: { date: Date }) => {
+const ActivityDateElement = (props: { date: Date, timezone: string }) => {
+  const massageDate = moment(props.date).tz(props.timezone).format("DD.MM.YYYY")
   const label = isToday(props.date) ? (
     <FormattedMessage id="activities.today"/>
   ) : (
-    <Moment format="DD.MM.YYYY">{props.date}</Moment>
+    <span>{massageDate}</span>
   );
   return (
     <StyledLi className="text-center">

app/javascript/src/components/Navigation/components/GlobalActivitiesModal.jsx

@@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl";
 import { Button, Modal } from "react-bootstrap";
 import _ from "lodash";
 import styled from "styled-components";
+import moment from "moment-timezone";
 
 import { getActivities } from "../../../services/api/activities_api";
 import ActivityElement from "./ActivityElement";
@@ -64,7 +65,11 @@ class GlobalActivitiesModal extends Component<Props, State> {
     date: Date
   ): Node {
     return [
-      <ActivityDateElement key={date} date={date} />,
+      <ActivityDateElement
+        key={date}
+        date={date}
+        timezone={activity.timezone}
+      />,
       <ActivityElement key={key} activity={activity} />
     ];
   }
@@ -99,22 +104,23 @@ class GlobalActivitiesModal extends Component<Props, State> {
       (activity: Activity, i: number, arr: Array<*>) => {
         const newDate = new Date(activity.createdAt);
         // returns a label with "today" if the date of the activity is today
-        if (i === 0 && newDate.toDateString() === new Date().toDateString()) {
+        if (i === 0) {
           return GlobalActivitiesModal.renderActivityDateElement(
             activity.id,
             activity,
             newDate
           );
         }
-        // else checks if the previous activity is newer than current
-        // and displays a label with the date
-        const prevDate =
-          i !== 0 ? new Date(arr[i - 1].createdAt) : new Date(1901, 1, 1);
-        // filter only date from createdAt without minutes and seconds
-        // used to compare dates
-        const parsePrevDate = new Date(prevDate.toDateString());
-        const parseNewDate = new Date(newDate.toDateString());
-        if (parsePrevDate.getTime() > parseNewDate.getTime()) {
+        // check dates based on user timezone value
+        const parsePrevDate = moment(arr[i - 1].createdAt)
+          .tz(activity.timezone)
+          .format( "DD/MM/YYYY")
+          .valueOf('day');
+        const parseNewDate = moment(activity.createdAt)
+          .tz(activity.timezone)
+          .format( "DD/MM/YYYY")
+          .valueOf();
+        if (parsePrevDate > parseNewDate) {
           return GlobalActivitiesModal.renderActivityDateElement(
             activity.id,
             activity,

app/views/activities/_list.html.erb

@@ -1,9 +1,17 @@
-<% if activities.first_page? && activities.first.created_at.to_date == Date.today %>
+<% if activities.first_page? %>
+  <% if activities.first.created_at.to_date == Date.today %>
   <li class="text-center activity-date-item">
     <span class="label label-primary">
       <%=t "activities.index.today" %>
     </span>
   </li>
+  <% else %>
+  <li class="text-center activity-date-item">
+    <span class="label label-primary">
+      <%= activities.first.created_at.strftime('%d.%m.%Y') %>
+    </span>
+  </li>
+  <% end %>
 <% end %>
 <% activities.each_with_index do |activity, index| %>
   <% prevDate = calculate_previous_date(activities, index, previous_activity_created_at) %>

package.json

@@ -64,6 +64,7 @@
     "js-yaml": "^3.9.0",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
+    "moment-timezone": "^0.5.14",
     "node-sass": "^4.5.3",
     "path-complete-extname": "^0.1.0",
     "postcss-loader": "^2.0.6",

yarn.lock

@@ -3946,6 +3946,16 @@ mkdirp@0.5, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp
   dependencies:
     minimist "0.0.8"
 
+moment-timezone@^0.5.14:
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.14.tgz#4eb38ff9538b80108ba467a458f3ed4268ccfcb1"
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0":
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
 moment@^2.18.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"