From b261e0a5b58086317ab633ff6a02ac1183600a78 Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Nov 23 2017 14:42:21 +0000
Subject: Halp: don't repeat the dates in the request list


Fixes #444

---

diff --git a/hubs/static/client/app/widgets/halp/RequestList.js b/hubs/static/client/app/widgets/halp/RequestList.js
new file mode 100644
index 0000000..cc6a8d7
--- /dev/null
+++ b/hubs/static/client/app/widgets/halp/RequestList.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  defineMessages,
+  FormattedMessage,
+  injectIntl,
+  } from 'react-intl';
+import Request from './Request';
+
+
+const messages = defineMessages({
+  no_request: {
+    id: "hubs.widgets.halp.no_request",
+    defaultMessage: "No request for now."
+  },
+});
+
+
+class RequestList extends React.Component {
+  render() {
+    let content;
+    if (this.props.requests.length === 0) {
+      content = (
+        <p className="no-request">
+          <FormattedMessage {...messages.no_request} />
+        </p>
+        );
+    } else {
+      let previousDate = null;
+      content = this.props.requests.map((request, idx) => {
+        const showDate = previousDate === null ? true : (
+          this.props.intl.formatRelative(request.date * 1000) !==
+          this.props.intl.formatRelative(previousDate * 1000)
+        );
+        previousDate = request.date;
+        return (
+          <Request
+            request={request}
+            showdate={showDate}
+            onZoomRequest={this.props.onZoomRequest}
+            key={idx} />
+        );
+      });
+    }
+    return (
+      <div className="RequestList">
+        {content}
+      </div>
+    );
+  }
+}
+
+export default injectIntl(RequestList);
diff --git a/hubs/static/client/app/widgets/halp/Widget.js b/hubs/static/client/app/widgets/halp/Widget.js
index ce4b676..0ae6d86 100644
--- a/hubs/static/client/app/widgets/halp/Widget.js
+++ b/hubs/static/client/app/widgets/halp/Widget.js
@@ -11,17 +11,13 @@ import {
 import HubsList from './HubsList';
 import ModalRequest from './ModalRequest';
 import ModalAllRequests from './ModalAllRequests';
-import Request from './Request';
+import RequestList from './RequestList';
 import WidgetChrome from '../../components/WidgetChrome';
 import Spinner from "../../components/Spinner";
 import "./halp.css";
 
 
 const messages = defineMessages({
-  no_request: {
-    id: "hubs.widgets.halp.no_request",
-    defaultMessage: "No request for now."
-  },
   view_more: {
     id: "hubs.widgets.halp.view_more",
     defaultMessage: "View more"
@@ -132,27 +128,6 @@ export default class HalpWidget extends React.Component {
   }
 
   render() {
-    let requestNodes;
-    if (this.state.requests.length === 0) {
-      requestNodes = (
-        <p className="no-request">
-          <FormattedMessage {...messages.no_request} />
-        </p>
-        );
-    } else {
-      let previousDate = null;
-      requestNodes = this.state.requests.map(function(request, idx) {
-        const showDate = (request.date !== previousDate);
-        previousDate = request.date;
-        return (
-          <Request
-            request={request}
-            showdate={showDate}
-            onZoomRequest={this.zoomOnRequest}
-            key={idx} />
-        );
-      }.bind(this));
-    }
     let hubs = this.props.widget.config.hubs || [];
     hubs = hubs.map(function(hub) {
       return {
@@ -173,9 +148,10 @@ export default class HalpWidget extends React.Component {
           { this.state.isLoading ?
               <Spinner />
             :
-              <div className="requests">
-                {requestNodes}
-              </div>
+              <RequestList
+                requests={this.state.requests}
+                onZoomRequest={this.zoomOnRequest}
+                />
           }
           <div className="view-more text-muted">
             <button className="btn btn-secondary" onClick={this.openAllRequests}>
diff --git a/hubs/static/client/app/widgets/halp/__tests__/RequestList.test.js b/hubs/static/client/app/widgets/halp/__tests__/RequestList.test.js
new file mode 100644
index 0000000..02958e1
--- /dev/null
+++ b/hubs/static/client/app/widgets/halp/__tests__/RequestList.test.js
@@ -0,0 +1,55 @@
+/* eslint-env jasmine, jest */
+
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl';
+import { mount } from 'enzyme';
+
+import RequestList from '../RequestList';
+
+
+describe('RequestList', () => {
+  const requests = [
+    {"author": {
+        "avatar": "https://seccdn.libravatar.org/avatar/2b820632db285cd534651e5f0da285d7c0a0a1bf600da16e19063163ce21db31?s=32&d=retro",
+        "name":"mizmo",
+        "url":"/mizmo/"
+      },
+      "channel": "#fedora-hubs",
+      "context_url": "https://meetbot.fedoraproject.org/fedora-hubs/2017-11-07/hubs-devel.2017-11-07-14.01.log.html#l-44",
+      "date": 1510063822.0,
+      "hub": "abompard",
+      "hubs": ["abompard"],
+      "meeting_topic": "hubs-devel",
+      "text": "We need people to work on hubs, see https://pagure.io/fedora-hubs/issue/390",
+      "urls": ["https://pagure.io/fedora-hubs/issue/390"]
+    }, {
+      "author": {
+        "avatar": "https://seccdn.libravatar.org/avatar/f0c54afccefcf4bc888e0d37618a8598602a668e4ffc2e433b551ca19fc164d8?s=32&d=retro",
+        "name": "abompard",
+        "url": "/abompard/"
+      },
+      "channel": "#fedora-hubs",
+      "context_url": "https://meetbot.fedoraproject.org/fedora-hubs/2017-11-07/hubs-devel.2017-11-07-14.01.log.html#l-33",
+      "date": 1510063568.0,
+      "hub": "abompard",
+      "hubs": ["abompard"],
+      "meeting_topic": "hubs-devel",
+      "text": "We need people to work on hubs, see https://pagure.io/fedora-hubs/issue/390",
+      "urls": ["https://pagure.io/fedora-hubs/issue/390"]
+    }
+  ];
+
+  it("should not repeat the dates", () => {
+    const component = mount(
+      <IntlProvider locale="en">
+        <RequestList requests={requests} />
+      </IntlProvider>
+    );
+    expect(component).toBeTruthy();
+    expect(component.find(".date")).toBeTruthy();
+    expect(component.find(".date")).toHaveLength(1);
+  });
+})
+
diff --git a/hubs/static/client/app/widgets/halp/halp.css b/hubs/static/client/app/widgets/halp/halp.css
index e533bcc..cecc420 100644
--- a/hubs/static/client/app/widgets/halp/halp.css
+++ b/hubs/static/client/app/widgets/halp/halp.css
@@ -28,12 +28,12 @@
 .widget-halp .Spinner {
     margin: 0 auto;
 }
-.widget-halp .requests {
+.widget-halp .RequestList {
 }
-.widget-halp .requests .no-request {
+.widget-halp .RequestList .no-request {
     margin-top: 10px;
 }
-.widget-halp .requests .date {
+.widget-halp .RequestList .date {
     text-transform: uppercase;
     font-size: 110%;
     margin-top: 10px;