ActivityDetails.jsx

import React, { Fragment } from 'react'
import { Mutation } from 'react-apollo'
import { H2, Button } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import styled from 'styled-components'
import moment from 'moment'
import { Buttons, Close, CloseButton, Table, Portal, TextArea } from '../ui'
import Mailer from '../mailer'
import { CREATE_NOTE } from '../operations'
import EventDescription from './EventDescription'
import { QUERY_ACTIVITY_INFO } from './operations'

const DetailsTable = styled(Table)`
  width: 100%;
  @media screen and (max-width: 600px) {
    th {
      display: none;
    }
    tr {
      border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
    }
  }
`
const TD = styled.td`
  font-size: ${th('fontSizeBaseSmall')};
  @media screen and (max-width: 600px) {
    display: inline-block;
    width: 100%;
    border: 0 !important;
  }
`
const TdDate = styled(TD)`
  vertical-align: top;
  white-space: nowrap;
  @media screen and (max-width: 600px) {
    width: 50%;
    white-space: normal;
  }
`
const TdPerson = TdDate

const NewMsgBtn = styled(Button)`
  padding: calc(${th('gridUnit')} / 2) ${th('gridUnit')};
  margin-left: ${th('gridUnit')};
  font-size: ${th('fontSizeBaseSmall')};
`

const DetailsHeading = styled.div`
  display: flex;
  align-items: baseline;
  justify-content: space-between;
`
const NewNote = ({ close, manuscriptId, message, onChange }) => (
  <Mutation
    mutation={CREATE_NOTE}
    refetchQueries={() => [
      {
        query: QUERY_ACTIVITY_INFO,
        variables: { id: manuscriptId },
      },
    ]}
  >
    {(createNote, { data }) => {
      const newNote = async () => {
        await createNote({
          variables: {
            data: {
              manuscriptId,
              notesType: 'userMessage',
              content: JSON.stringify(message),
            },
          },
        })
        onChange('')
        close()
      }
      return (
        <Portal transparent>
          <Close style={{ margin: 0 }}>
            <CloseButton onClick={() => close()} />
          </Close>
          <H2>Add a note</H2>
          <TextArea
            label="Note (visible only to administrators)"
            onChange={e => onChange(e.target.value)}
            value={message}
          />
          <Buttons right>
            <Button disabled={!message} onClick={() => newNote()} primary>
              Save
            </Button>
            <Button onClick={() => close()}>Cancel</Button>
          </Buttons>
        </Portal>
      )
    }}
  </Mutation>
)

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')}</TdDate>
        <TdPerson>{`${audit.user.givenNames} ${audit.user.surname}`}</TdPerson>
        <TD>
          <EventDescription audit={audit} manuscript={manuscript} />
        </TD>
      </tr>
    ))

class ActivityDetails extends React.Component {
  state = {
    sendingMail: false,
    newNote: false,
    message: '',
  }
  render() {
    return (
      <Fragment>
        <DetailsHeading>
          <div>
            <H2>Details</H2>
          </div>
          <div>
            <NewMsgBtn onClick={() => this.setState({ newNote: true })}>
              Add note
            </NewMsgBtn>
            <NewMsgBtn
              onClick={() => this.setState({ sendingMail: true })}
              primary
            >
              Send email
            </NewMsgBtn>
          </div>
          {this.state.sendingMail && (
            <Mailer
              close={() => this.setState({ sendingMail: false })}
              currentUser={this.props.currentUser}
              manuscript={this.props.manuscript}
            />
          )}
          {this.state.newNote && (
            <NewNote
              close={() => this.setState({ newNote: false })}
              manuscriptId={this.props.manuscript.id}
              message={this.state.message}
              onChange={message => this.setState({ message })}
            />
          )}
        </DetailsHeading>

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

export default ActivityDetails