ActivityDetails.jsx

import React, { Fragment } from 'react'
import { H2, Button } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import styled from 'styled-components'
import moment from 'moment'
import { Table } from '../ui'
import { obtainEventDescription } from './helpers'
import Mailer from '../mailer'

const DetailsTable = styled(Table)`
  width: 100%;
`

const TdDate = styled.td`
  vertical-align: top;
`

const TdPerson = TdDate

const ActivityList = ({ manuscript }) =>
  manuscript.audits
    .reduce((reversed, audit) => {
      reversed.unshift(audit)
      return reversed
    }, [])
    .map(audit => (
      <tr key={audit.id}>
        <TdDate>{moment(audit.created).format('DD/MM/YYYY HH:mm:ss')}</TdDate>
        <TdPerson>{`${audit.user.givenNames} ${audit.user.surname}`}</TdPerson>
        <td>{obtainEventDescription(audit, manuscript)}</td>
      </tr>
    ))

const NewMsgBtn = styled(Button)`
  padding: calc(${th('gridUnit')} / 2) ${th('gridUnit')};
`

const DetailsHeading = styled.div`
  display: flex;
  align-items: baseline;
  justify-content: space-between;
`

const DataColumn = styled.th`
  width: 20%;
`

const PersonColumn = styled.th`
  width: 20%;
`
class ActivityDetails extends React.Component {
  state = { sendingMail: false }
  render() {
    return (
      <Fragment>
        <DetailsHeading>
          <div>
            <H2>Details</H2>
          </div>
          <div>
            <NewMsgBtn
              onClick={() => this.setState({ sendingMail: true })}
              primary
            >
              New message
            </NewMsgBtn>
          </div>
          {this.state.sendingMail && (
            <Mailer
              close={() => this.setState({ sendingMail: false })}
              currentUser={this.props.currentUser}
              manuscript={this.props.manuscript}
            />
          )}
        </DetailsHeading>

        <DetailsTable>
          <tbody>
            <tr>
              <DataColumn>Date</DataColumn>
              <PersonColumn>Person</PersonColumn>
              <th>Event</th>
            </tr>
            <ActivityList manuscript={this.props.manuscript} />
          </tbody>
        </DetailsTable>
      </Fragment>
    )
  }
}

export default ActivityDetails