SignLoanDocument on LUSA merchant portal

SignLoanDocument.js

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
  Card,
  CardHeader,
  CardBody,
  ButtonGroup,
  Button,
} from 'reactstrap';
import ReactLoading from 'react-loading-components';
import NotificationSystem from 'react-notification-system';
import printJS from 'print-js';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

import Download from 'assets/icons/download.svg';
import Print from 'assets/icons/print.svg';
import {
  getDocument,
} from 'actions/application';

const pdfjsLib = require('pdfjs-dist/build/pdf');

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

class SignLoanDocument extends Component {
  constructor(props) {
    super(props);

    this.state = {
      totalPage: -1,
      currentPage: 1,
      salesReceiptDocument: null,
      loadingTask: null,
      isLoading: true,
    };
  }

  componentDidMount() {
    const apiUrl = localStorage.getItem('salesReceiptDocumentUrl');
    this.props.getDocument({
      url: apiUrl,
      success: async (response) => {
        const pdfData = atob(response);
        const loadingTask = pdfjsLib.getDocument({ data: pdfData });
        this.handleDocumentPage(loadingTask, 1, (totalPage, currentPage) => {
          this.setState({
            salesReceiptDocument: `data:application/pdf;base64,${response}`,
            loadingTask,
            totalPage,
            currentPage,
            isLoading: false,
          });
        });
      },
      fail: (error) => { // eslint-disable-line
        this.notificationSystem.addNotification({
          message: 'Getting Sales Receipt Document Failed.',
          level: 'error',
          position: 'tc',
        });
        this.setState({ isLoading: false });
      },
    });
  }

  handleButtonClick = (e) => {
    e.preventDefault();
    this.props.history.push('/dashboard');
  }

  handleDocumentPage = (loadingTask, pageNumber, cb = null) => {
    this.setState({ isLoading: true });
    loadingTask.promise.then((pdf) => {
      console.log('PDF loaded');
      // Fetch the first page
      pdf.getPage(pageNumber).then((page) => {
        console.log('Page loaded');

        const scale = 1;
        const viewport = page.getViewport({ scale });

        // Prepare canvas using PDF page dimensions
        const canvas = document.getElementById('the-canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        const renderContext = {
          canvasContext: context,
          viewport,
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(() => {
          const totalPage = pdf.numPages;
          cb && cb(totalPage, pageNumber);
        });
      });
    }, (reason) => {
      // PDF loading error
      this.notificationSystem.addNotification({
        message: 'Rendering Sales Receipt Document Failed.',
        level: 'error',
        position: 'tc',
      });
      this.setState({ isLoading: false });
      console.error(reason);
    });
  }

  handleDownloadDocument = (e) => {
    e.preventDefault();
    const downloadLink = document.createElement('a');
    downloadLink.href = this.state.salesReceiptDocument;
    downloadLink.download = 'Sales_Receipt.pdf';
    downloadLink.click();
  }

  handlePrintDocument = (e) => {
    e.preventDefault();
    printJS({ printable: this.state.salesReceiptDocument.replace('data:application/pdf;base64,', ''), type: 'pdf', base64: true });
  }

  handlePageNavigation = (e, step) => {
    e.preventDefault();
    const { currentPage, totalPage, loadingTask } = this.state;
    if ((currentPage === 1 && step === -1) || (currentPage === totalPage && step === 1)) {
      return;
    }
    this.handleDocumentPage(loadingTask, currentPage + step, (tP, curPage) => {
      this.setState({
        currentPage: curPage,
        isLoading: false,
      });
    });
  }

  render() {
    const { isLoading, salesReceiptDocument } = this.state;
    return (
      <Fragment>
        <NotificationSystem ref={(item) => { this.notificationSystem = item; }} />
        <div className="text-center">
          {
            !salesReceiptDocument &&
              <ReactLoading type="puff" fill="#3989E3" width={100} height={100} />
          }
          <Card className={salesReceiptDocument ? 'd-inline-block' : 'd-none'}>
            <CardHeader className="d-flex align-middle justify-content-end">
              <ButtonGroup hidden>
                <Button onClick={e => this.handlePageNavigation(e, 1)}>Previous</Button>
                <Button onClick={e => this.handlePageNavigation(e, -1)}>Next</Button>
              </ButtonGroup>
              {/* Page: { `${currentPage} / ${totalPage}` } */}
              <ButtonGroup>
                <Button onClick={e => this.handleDownloadDocument(e)}>
                  <img src={Download} alt="Download" />
                </Button>
                <Button onClick={e => this.handlePrintDocument(e)}>
                  <img src={Print} alt="Print" />
                </Button>
              </ButtonGroup>
            </CardHeader>
            <CardBody>
              {
                isLoading &&
                  <ReactLoading type="puff" fill="#3989E3" width={100} height={100} />
              }
              <canvas id="the-canvas" />
            </CardBody>
          </Card>
        </div>
      </Fragment>
    );
  }
}

SignLoanDocument.propTypes = {
  history: PropTypes.object.isRequired,
  getDocument: PropTypes.func.isRequired,
};

SignLoanDocument.defaultProps = {
};

export default connect(
  state => ({
    auth: state.auth,
  }),
  {
    getDocument,
  }
)(SignLoanDocument);