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

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

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

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

type Props = {
  pageNum: number;
  renderingState?: TypeRenderingStates;
  getPage?: () => void;
  viewport: ViewportType;
  rotation?: number;
  annotations?: React.ReactElement[];
};

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

  const renderPage = async (): Promise<any> => {
    if (getPage) {
      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, viewport]);

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

  return (
    <PageWrapper
      ref={rootEle}
      id={`page_${pageNum}`}
      data-page-num={pageNum}
      width={viewport.width}
      height={viewport.height}
      rotation={rotation}
    >
      {
        renderingState === 'LOADING' ? (
          <LoadingLayer />
        ) : (
          <>
            <div>
              <PdfCanvas />
            </div>
            <TextLayer data-id="text-layer" />
            <AnnotationLayer data-id="annotation-layer">
              {annotations}
            </AnnotationLayer>
          </>
        )
      }
    </PageWrapper>
  );
};

export default PageView;