fixes activities key [fixes SCI-1628]

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

@@ -1,13 +1,13 @@
+// @flow
+
 import React from "react";
-import PropTypes from "prop-types";
 import Moment from "react-moment";
+import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { WHITE_COLOR } from "../../../config/constants/colors"
+import { WHITE_COLOR } from "../../../config/constants/colors";
 
-const StyledLi = styled.li`
-  margin-bottom: 1em;
-`
+const StyledLi = styled.li`margin-bottom: 1em;`;
 
 const StyledSpan = styled.span`
   display: inline;
@@ -18,20 +18,20 @@ const StyledSpan = styled.span`
   color: ${WHITE_COLOR};
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: .25em;
+  border-radius: 0.25em;
 `;
 
-const ActivityDateElement = ({ date }) =>
-  <StyledLi className="text-center">
-    <StyledSpan className="label label-primary">
-      <Moment format="DD.MM.YYYY">
-        {date}
-      </Moment>
-    </StyledSpan>
-  </StyledLi>;
-
-ActivityDateElement.propTypes = {
-  date: PropTypes.instanceOf(Date).isRequired
+const ActivityDateElement = (props: { date: Date, today?: boolean }) => {
+  const label = props.today ? (
+    <FormattedMessage id="activities.today"/>
+  ) : (
+    <Moment format="DD.MM.YYYY">{props.date}</Moment>
+  );
+  return (
+    <StyledLi className="text-center">
+      <StyledSpan className="label label-primary">{label}</StyledSpan>
+    </StyledLi>
+  );
 };
 
 export default ActivityDateElement;

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

@@ -60,16 +60,38 @@ type State = {
 class GlobalActivitiesModal extends Component<Props, State> {
   displayActivities: Function;
   addMoreActivities: Function;
+  loadData: Function;
+  onCloseModalActions: Function;
 
   constructor(props: Props) {
     super(props);
-    this.state = { activities: this.props.activites, more: this.props.more };
+    this.state = { activities: [], more: false };
     this.displayActivities = this.displayActivities.bind(this);
     this.addMoreActivities = this.addMoreActivities.bind(this);
+    this.onCloseModalActions = this.onCloseModalActions.bind(this);
+    this.loadData = this.loadData.bind(this);
+  }
+
+  loadData() {
+    getActivities().then(response => {
+      this.setState({
+        activities: response.activities,
+        more: response.more
+      });
+    });
+  }
+
+  onCloseModalActions() {
+    this.setState({ activities: [], more: false });
+    this.props.onCloseModal();
   }
 
   displayActivities() {
     if (this.state.activities.length === 0) {
+      if (this.props.showModal) {
+        this.loadData();
+      }
+
       return (
         <li>
           <FormattedMessage id="activities.no_data" />
@@ -77,22 +99,34 @@ class GlobalActivitiesModal extends Component<Props, State> {
       );
     }
     return this.state.activities.map((activity, i, arr) => {
+      const dateNow = new Date();
       const newDate = new Date(activity.created_at);
       if (i > 0) {
         const prevDate = new Date(arr[i - 1].created_at);
-        if (prevDate < newDate) {
+        if (prevDate.getDate() > newDate.getDate()) {
           return [
             <ActivityDateElement key={newDate} date={newDate} />,
-            <ActivityElement key={activity.id} activity={activity} />
+            <ActivityElement key={i} activity={activity} />
           ];
         }
       } else {
+        if (
+          newDate.getDate() === dateNow.getDate() &&
+          newDate.getMonth() === dateNow.getMonth() &&
+          newDate.getFullYear() === dateNow.getFullYear()
+        ) {
+          return [
+            <ActivityDateElement key={newDate} date={newDate} today />,
+            <ActivityElement key={i} activity={activity} />
+          ];
+        }
         return [
           <ActivityDateElement key={newDate} date={newDate} />,
-          <ActivityElement key={activity.id} activity={activity} />
+          <ActivityElement key={i} activity={activity} />
         ];
       }
-      return <ActivityElement key={activity.id} activity={activity} />;
+      console.log("banana");
+      return <ActivityElement key={i} activity={activity} />;
     });
   }
 
@@ -109,7 +143,7 @@ class GlobalActivitiesModal extends Component<Props, State> {
   }
 
   addMoreButton() {
-    if (this.props.more) {
+    if (this.state.more) {
       return (
         <li className="text-center">
           <StyledBottom onClick={this.addMoreActivities}>
@@ -123,7 +157,7 @@ class GlobalActivitiesModal extends Component<Props, State> {
 
   render() {
     return (
-      <Modal show={this.props.showModal} onHide={this.props.onCloseModal}>
+      <Modal show={this.props.showModal} onHide={this.onCloseModalActions}>
         <Modal.Header closeButton>
           <Modal.Title>
             <FormattedMessage id="activities.modal_title" />
@@ -136,7 +170,7 @@ class GlobalActivitiesModal extends Component<Props, State> {
           </ul>
         </StyledModalBody>
         <Modal.Footer>
-          <Button onClick={this.props.onCloseModal}>
+          <Button onClick={this.onCloseModalActions}>
             <FormattedMessage id="general.close" />
           </Button>
         </Modal.Footer>

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

@@ -9,7 +9,6 @@ import {
   WHITE_COLOR,
   BORDER_GRAY_COLOR
 } from "../../config/constants/colors";
-import { getActivities } from "../../services/api/activities_api";
 
 import TeamSwitch from "./components/TeamSwitch";
 import GlobalActivitiesModal from "./components/GlobalActivitiesModal";
@@ -45,8 +44,6 @@ class Navigation extends Component {
     super(props);
     this.state = {
       showActivitesModal: false,
-      activities: [],
-      more: false,
       current_team: { id: 0 }
     };
     this.selectItemCallback = this.selectItemCallback.bind(this);
@@ -67,15 +64,6 @@ class Navigation extends Component {
       case 4:
         ev.preventDefault();
         this.setState({ showActivitesModal: !this.state.showActivitesModal });
-        // load activites if modal is shown
-        if (this.state.showActivitesModal) {
-          getActivities().then(response => {
-            this.setState({
-              activities: response.activities,
-              more: response.more
-            });
-          });
-        }
         break;
       default:
     }
@@ -141,8 +129,6 @@ class Navigation extends Component {
           </Nav>
         </StyledNavbar>
         <GlobalActivitiesModal
-          activities={this.state.activites}
-          more={this.state.more}
           showModal={this.state.showActivitesModal}
           onCloseModal={this.closeModalCallback}
         />

app/javascript/src/components/Spinner.jsx

@@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import { bool } from "prop-types";
-import { connect } from "react-redux";
+// @flow
+
+import React from "react";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
@@ -18,27 +18,16 @@ const Wrapper = styled.div`
   }
 `;
 
-class Spinner extends Component {
-  render() {
-    let spinner = <div />;
-    if (this.props.spinner_on) {
-      spinner = (
-        <Wrapper>
-          <div className="center-box">
-            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" />
-          </div>
-        </Wrapper>
-      );
-    }
-
-    return spinner;
+export default (props: { spinner_on: boolean }) => {
+  let spinner = <div />;
+  if (props.spinner_on) {
+    spinner = (
+      <Wrapper>
+        <div className="center-box">
+          <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" />
+        </div>
+      </Wrapper>
+    );
   }
-}
-
-Spinner.propTypes = {
-  spinner_on: bool.isRequired
+  return spinner;
 };
-
-const mapStateToProps = state => state.global_activities;
-
-export default connect(mapStateToProps, {})(Spinner);

app/javascript/src/config/action_types.js

@@ -28,10 +28,6 @@ export const LEAVE_TEAM = "LEAVE_TEAM";
 export const SHOW_LEAVE_TEAM_MODAL = "SHOW_LEAVE_TEAM_MODAL";
 export const UPDATE_TEAM_DESCRIPTION_MODAL = "UPDATE_TEAM_DESCRIPTION_MODAL";
 
-// spinner
-export const SPINNER_ON = "SPINNER_ON";
-export const SPINNER_OFF = "SPINNER_OFF";
-
 // alerts
 export const ADD_ALERT = "ADD_ALERT";
 export const CLEAR_ALERT = "CLEAR_ALERT";

app/javascript/src/config/locales/messages.js

@@ -161,7 +161,8 @@ export default {
     activities: {
       modal_title: "Activities",
       no_data: "No Data",
-      more_activities: "More Activities"
+      more_activities: "More Activities",
+      today: "Today"
     },
     global_team_switch: {
       new_team: "New team"

app/javascript/src/index.jsx

@@ -8,7 +8,6 @@ import { flattenMessages } from "./config/locales/utils";
 import messages from "./config/locales/messages";
 import store from "./config/store";
 
-import Spinner from "./components/Spinner";
 import AlertsContainer from "./components/AlertsContainer";
 import ModalsContainer from "./components/ModalsContainer";
 import SettingsPage from "./scenes/SettingsPage";
@@ -35,9 +34,7 @@ const ScinoteApp = () =>
             </ContentWrapper>
           </div>
         </BrowserRouter>
-
         <ModalsContainer />
-        <Spinner />
       </div>
     </IntlProvider>
   </Provider>;

app/javascript/src/services/api/activities_api.js

@@ -6,5 +6,5 @@ export function getActivities(
   lastId: number = 0
 ): Promise<*> {
   const path = `${ACTIVITIES_PATH}?from=${lastId}`;
-  return axiosInstance.get(path).then(({ data }) => data);
+  return axiosInstance.get(path).then(({ data }) => data.global_activities);
 }