ReviewPage.jsx

import React from 'react'
import { Query, Mutation } from 'react-apollo'
import styled from 'styled-components'
import ReactHtmlParser from 'react-html-parser'
import { th, lighten } from '@pubsweet/ui-toolkit'
import { Action, Button, ErrorText, H1, H2 } from '@pubsweet/ui'
import {
  Loading,
  LoadingIcon,
  Buttons,
  Center,
  PreviewPage,
  PreviewPanel,
  EditPanel,
  PanelHeader,
  PanelContent,
  Toggle as Toggles,
} from '../ui'
import UploadFiles, { SubmissionTypes, ReviewTypes } from '../upload-files'
import ManuscriptPreview from '../ManuscriptPreview'
import PDFViewer from '../pdf-viewer'
import { GET_MANUSCRIPT } from '../operations'
import SubmissionHeader from '../SubmissionHeader'
import HTMLPreview from './HTMLPreview'
import ReviewForm from './ReviewForm'
import Annotator from './Annotator'
import { CONVERT_XML, GET_REVIEWS } from './operations'

const PreviewPageDiv = styled(PreviewPage)`
  & > div > div {
    overflow: auto;
  }
  & > div > div > div:last-child {
    height: calc(100% - (${th('gridUnit')} * 19));
  }
  .show-mobile {
    display: none;
  }
  .pad {
    padding: 0 calc(2 * ${th('gridUnit')});
  }
  @media screen and (max-width: 870px) {
    .show-mobile {
      display: inline-block;
    }
    .hide-mobile {
      display: none;
    }
  }
`
const PreviewPanelHeader = styled(PanelHeader)`
  height: calc(${th('gridUnit')} * 10);

  @media screen and (max-width: 870px) {
    height: auto;
  }
`
const Toggle = styled(Toggles)`
  height: calc(${th('gridUnit')} * 7);
  &.hide-mobile button {
    margin-left: calc(${th('gridUnit')} * 3);
  }
  @media screen and (max-width: 870px) {
    height: auto;
    margin-bottom: calc(${th('gridUnit')} * 3);
  }
`
const PreviewError = styled.div`
  border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorError')};
  background-color: ${lighten('colorError', 40)};
  padding: ${th('gridUnit')} calc(${th('gridUnit')} * 2);
  margin: ${th('gridUnit')} 0;
`
const AnnotatePDF = Annotator(PDFViewer)
const AnnotateHTML = Annotator(HTMLPreview)

const allFileTypes = SubmissionTypes.concat(
  ReviewTypes.reduce((all, t) => {
    if (!SubmissionTypes.some(existing => existing.value === t.value)) {
      all.push(t)
    }
    return all
  }, []),
)
class Review extends React.Component {
  state = {
    pane: this.props.currentUser.admin ? 'files' : 'web',
    error: '',
    showManuscript: false,
    showAll: false,
  }
  render() {
    const { manuscript, currentUser, reviews } = this.props
    const [review] = reviews
    const { files: allfiles, meta, status } = manuscript
    const sourceFile = allfiles.find(f => f.type === 'manuscript')
    const files = allfiles.filter(
      f => !f.type || ReviewTypes.some(rev => rev.value === f.type),
    )
    const originalFiles = allfiles.filter(f =>
      SubmissionTypes.some(sub => sub.value === f.type),
    )
    const html = files.find(file => file.type === 'tempHTML')
    const pdf = files.find(f => f.type === 'pdf4load' || f.type === 'pdf4print')
    const xml = files.find(f => f.type === 'PMC') || null
    const xmlError = meta.notes
      ? meta.notes.find(n => n.notesType === 'xml error')
      : ''
    const { pane, error, showManuscript, showAll } = this.state
    return (
      <PreviewPageDiv>
        <PreviewPanel
          style={{
            flex: showManuscript && '1 1 750px',
            width: showManuscript && '50%',
          }}
        >
          <div style={{ maxWidth: showManuscript && '750px' }}>
            <PreviewPanelHeader>
              <H1>Review web versions of manuscript</H1>
            </PreviewPanelHeader>
            <Toggle>
              {currentUser.admin && (
                <Action
                  className={pane === 'files' ? 'current' : ''}
                  onClick={() => this.setState({ pane: 'files' })}
                >
                  XML files
                </Action>
              )}
              <Action
                className={pane === 'web' ? 'current' : ''}
                onClick={() => {
                  this.setState({ pane: 'web' })
                }}
              >
                Web preview
              </Action>
              <Action
                className={pane === 'pdf' ? 'current' : ''}
                onClick={() => this.setState({ pane: 'pdf' })}
              >
                PDF preview
              </Action>
              <Action
                className={
                  pane === 'original' ? 'current show-mobile' : 'show-mobile'
                }
                onClick={() => this.setState({ pane: 'original' })}
                primary={pane !== 'original'}
              >
                Submitted file
              </Action>
            </Toggle>
            <PanelContent>
              {pane === 'files' && (
                <Mutation mutation={CONVERT_XML}>
                  {(convertXML, { data }) => {
                    const generatePreviews = async () => {
                      await convertXML({
                        variables: { id: xml.id },
                      })
                    }
                    return (
                      <React.Fragment>
                        <Buttons left top>
                          <Button disabled={!xml} onClick={generatePreviews}>
                            Regenerate previews
                          </Button>
                          <Button
                            onClick={() => this.setState({ showAll: !showAll })}
                          >
                            {`${showAll ? 'Hide' : 'Show'} submission files`}
                          </Button>
                        </Buttons>
                        {xmlError && (
                          <PreviewError>
                            {ReactHtmlParser(xmlError.content)}
                          </PreviewError>
                        )}
                        {error && (
                          <Center>
                            <ErrorText>{error}</ErrorText>
                          </Center>
                        )}
                        <UploadFiles
                          checked
                          files={showAll ? allfiles : files}
                          manuscript={manuscript.id}
                          types={showAll ? allFileTypes : ReviewTypes}
                        />
                        {error && (
                          <Center>
                            <ErrorText>{error}</ErrorText>
                          </Center>
                        )}
                        <Buttons left top>
                          <Button disabled={!xml} onClick={generatePreviews}>
                            Regenerate previews
                          </Button>
                          <Button
                            onClick={() => this.setState({ showAll: !showAll })}
                          >
                            {`${showAll ? 'Hide' : 'Show'} submission files`}
                          </Button>
                        </Buttons>
                      </React.Fragment>
                    )
                  }}
                </Mutation>
              )}
              {pane === 'pdf' && pdf && (
                <React.Fragment>
                  {status === 'tagging' ? (
                    <PDFViewer url={pdf.url} />
                  ) : (
                    <AnnotatePDF
                      file={pdf}
                      revId={(review && review.id) || null}
                      userId={currentUser.id}
                    />
                  )}
                </React.Fragment>
              )}
              {pane === 'web' && html && (
                <React.Fragment>
                  {status === 'tagging' ? (
                    <HTMLPreview url={html.url} />
                  ) : (
                    <AnnotateHTML
                      file={html}
                      revId={(review && review.id) || null}
                      userId={currentUser.id}
                    />
                  )}
                </React.Fragment>
              )}
              {pane === 'original' && sourceFile && (
                <ManuscriptPreview file={sourceFile} />
              )}
            </PanelContent>
          </div>
        </PreviewPanel>
        <EditPanel
          style={{
            flex: showManuscript && '1 1 750px',
            width: showManuscript && '50%',
          }}
        >
          <div style={{ maxWidth: showManuscript && '750px' }}>
            <PreviewPanelHeader>
              <H2>Compare &amp; approve</H2>
            </PreviewPanelHeader>
            <Toggle className="hide-mobile">
              <Button
                onClick={() =>
                  this.setState({ showManuscript: !showManuscript })
                }
              >
                {showManuscript
                  ? 'Back to approval form'
                  : 'Compare with submitted file'}
              </Button>
            </Toggle>
            <PanelContent className={showManuscript && 'pad'}>
              {showManuscript && sourceFile ? (
                <ManuscriptPreview file={sourceFile} />
              ) : (
                <ReviewForm
                  annotations={(review && review.annotations) || []}
                  files={originalFiles}
                  manuscript={manuscript}
                  previews={!!html && !!pdf}
                />
              )}
            </PanelContent>
          </div>
        </EditPanel>
      </PreviewPageDiv>
    )
  }
}

const ReviewWithHeader = SubmissionHeader(Review)

const ReviewPage = ({ match, ...props }) => (
  <Query
    fetchPolicy="cache-and-network"
    query={GET_MANUSCRIPT}
    variables={{ id: match.params.id }}
  >
    {({ data: { manuscript }, loading: loadingOne, refetch }) => (
      <Query query={GET_REVIEWS} variables={{ manuscriptId: match.params.id }}>
        {({ data, loading: loadingTwo }) => {
          if (loadingOne || !manuscript) {
            return (
              <Loading>
                <LoadingIcon />
              </Loading>
            )
          }
          return (
            <ReviewWithHeader
              manuscript={manuscript}
              match={match}
              reload={refetch}
              reviews={(data && data.reviewsByMId) || []}
              {...props}
            />
          )
        }}
      </Query>
    )}
  </Query>
)

export default ReviewPage