#448 Halp: don't repeat the dates in the request list
Merged 4 years ago by abompard. Opened 4 years ago by abompard.
abompard/fedora-hubs fix/halp-date  into  develop

@@ -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);

@@ -11,17 +11,13 @@ 

  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 @@ 

    }

  

    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 @@ 

            { 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}>

@@ -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);

+   });

+ })

+ 

@@ -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;