diff --git a/app/javascript/src/components/Navigation/components/ActivityElement.jsx b/app/javascript/src/components/Navigation/components/ActivityElement.jsx index e46d924c7..c3e539a65 100644 --- a/app/javascript/src/components/Navigation/components/ActivityElement.jsx +++ b/app/javascript/src/components/Navigation/components/ActivityElement.jsx @@ -1,6 +1,7 @@ // @flow import React from "react"; +import type { Node } from "react"; import { FormattedDate } from "react-intl"; import { Tooltip, OverlayTrigger } from "react-bootstrap"; import styled from "styled-components"; @@ -14,6 +15,10 @@ import { import { NAME_TRUNCATION_LENGTH } from "../../../config/constants/numeric"; +type InputActivity = { + activity: Activity +} + const StyledLi = styled.li` border-radius: 0.25em; margin-bottom: 1em; @@ -37,42 +42,42 @@ const TextSpan = styled.span` display: table-cell; padding: 3px 10px; text-align: justify; -` +`; -function truncatedTooltip(id, text) { +function truncatedTooltip(id: string, text: any): Node { return ( - - {text} - - )} placement="bottom"> - - {text.substring(0, NAME_TRUNCATION_LENGTH)}... - + {text}} + placement="bottom" + > + {text.substring(0, NAME_TRUNCATION_LENGTH)}... ); } -function taskPath(activity) { +function taskPath(activity: Activity): Node { return ( -   - [ :  + +   [ :  {activity.project.length > NAME_TRUNCATION_LENGTH ? ( - truncatedTooltip('activity_modal.long_project_tooltip', activity.project) - ):( + truncatedTooltip( + "activity_modal.long_project_tooltip", + activity.project + ) + ) : ( {activity.project} )},  :  {activity.task.length > NAME_TRUNCATION_LENGTH ? ( - truncatedTooltip('activity_modal.long_task_tooltip', activity.task) - ):( + truncatedTooltip("activity_modal.long_task_tooltip", activity.task) + ) : ( {activity.task} )} ] ); } -const ActivityElement = ({ activity }: Activity ): Node => ( +const ActivityElement = ({ activity }: InputActivity ): Node => ( ( {activity.task && taskPath(activity)} - ; + +); export default ActivityElement; diff --git a/app/javascript/src/components/Navigation/components/GlobalActivitiesModal.jsx b/app/javascript/src/components/Navigation/components/GlobalActivitiesModal.jsx index 999d863de..095cde7a0 100644 --- a/app/javascript/src/components/Navigation/components/GlobalActivitiesModal.jsx +++ b/app/javascript/src/components/Navigation/components/GlobalActivitiesModal.jsx @@ -1,7 +1,7 @@ // @flow import React, { Component } from "react"; -import type { Element } from "react"; +import type { Element, Node } from "react"; import { FormattedMessage } from "react-intl"; import { Button, Modal } from "react-bootstrap"; import _ from "lodash"; @@ -62,7 +62,7 @@ class GlobalActivitiesModal extends Component { key: number, activity: Activity, date: Date - ) { + ): Node { return [ , @@ -95,35 +95,37 @@ class GlobalActivitiesModal extends Component { } mapActivities(): Array<*> { - return this.state.activities.map((activity, i, arr) => { - // when the backend bug will be fixed - 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()) { - return GlobalActivitiesModal.renderActivityDateElement( - i, - activity, - newDate - ); + return this.state.activities.map( + (activity: Activity, i: number, arr: Array<*>) => { + // when the backend bug will be fixed + 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()) { + return GlobalActivitiesModal.renderActivityDateElement( + i, + 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()) { + return GlobalActivitiesModal.renderActivityDateElement( + i, + activity, + newDate + ); + } + // returns the default activity element + return ; } - // 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()) { - return GlobalActivitiesModal.renderActivityDateElement( - i, - activity, - newDate - ); - } - // returns the default activity element - return ; - }); + ); } displayActivities() { diff --git a/flow-typed/types.js b/flow-typed/types.js index 2492b8196..a81fd977e 100644 --- a/flow-typed/types.js +++ b/flow-typed/types.js @@ -35,8 +35,8 @@ export type Activity = { message: string, createdAt: string, timezone: string, - project?: string, - task?: string + project: string, + task: string }; export type Notification = {