pdf-reader-web/components/PageView/index.tsx

import React, { useEffect, useRef } from 'react';

import { renderPdfPage } from '../../helpers/pdf';
import { TypeRenderingStates, ViewportType } from '../../constants/type';

import {
  PageWrapper, CanvasWrapper, PdfCanvas, AnnotationLayer, TextLayer, LoadingLayer,
} from './styled';

type Props = {
  pageNum: number;
  renderingState?: TypeRenderingStates;
  getPage: () => void;
  viewport: ViewportType;
  rotation: number;
};

const PageView: React.FunctionComponent<Props> = ({
  pageNum,
  getPage,
  viewport,
  renderingState = 'PAUSED',
  rotation,
}: Props) => {
  const rootEle = useRef<HTMLDivElement>(null);
  let page: any = null;

  const renderPage = async (): Promise<any> => {
    page = await getPage();

    if (rootEle.current) {
      await renderPdfPage({
        rootEle: rootEle.current,
        page,
        viewport,
      });
    }
  };

  useEffect(() => {
    if (renderingState === 'RENDERING') {
      renderPage();
    } else if (page && renderingState === 'LOADING') {
      page.cleanup();
    }
  }, [renderingState]);

  useEffect(() => (): void => {
    if (page) page.cleanup();
  }, []);

  return (
    <PageWrapper
      ref={rootEle}
      id={`page_${pageNum}`}
      width={viewport.width}
      height={viewport.height}
      rotation={rotation}
    >
      {
        renderingState === 'LOADING' ? (
          <LoadingLayer />
        ) : (
          <>
            <CanvasWrapper>
              <PdfCanvas />
            </CanvasWrapper>
            <TextLayer />
            <AnnotationLayer />
          </>
        )
      }
    </PageWrapper>
  );
};

export default PageView;