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 './helper'

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%;
`

const ActivityDetails = props => (
  <Fragment>
    <DetailsHeading>
      <div>
        <H2>Details</H2>
      </div>
      <div>
        <NewMsgBtn primary>New message</NewMsgBtn>
      </div>
    </DetailsHeading>

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

export default ActivityDetails