pdf-reader-web/containers/PdfPage.tsx

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

import Page from '../components/Page';
import Annotation from './Annotation';
import { getPdfPage } from '../helpers/pdf';

import useStore from '../store';

type Props = {
  index: number;
};

const PdfPage: React.FC<Props> = ({ index }: Props) => {
  const [renderingState, setRenderingState] = useState<RenderingStateType>(
    'LOADING'
  );
  const [
    {
      viewport,
      pdf,
      rotation,
      annotations,
      scale,
      watermark,
      currentPage,
      queryString,
      matchesMap,
    },
  ] = useStore();

  const getAnnotationWithPage = (
    arr: AnnotationType[],
    pageNum: number
  ): React.ReactNode[] => {
    const result: React.ReactNode[] = [];

    arr.forEach((ele: AnnotationType, i: number) => {
      const page = ele.obj_attr ? ele.obj_attr.page + 1 : -1;

      if (page === pageNum) {
        result.push(
          <Annotation key={ele.id} scale={scale} index={i} {...ele} />
        );
      }
    });

    return result;
  };

  useEffect(() => {
    if (currentPage + 2 >= index && currentPage - 2 <= index) {
      if (renderingState !== 'RENDERING') {
        setRenderingState('RENDERING');
      }
    } else if (renderingState === 'RENDERING') {
      setRenderingState('LOADING');
    }
  }, [renderingState, currentPage]);

  return (
    <Page
      pageNum={index}
      renderingState={renderingState}
      viewport={viewport}
      scale={scale}
      getPage={(): Promise<any> => getPdfPage(pdf, index)}
      rotation={rotation}
      watermark={watermark}
      annotations={getAnnotationWithPage(annotations, index)}
      queryString={queryString}
      matchesMap={matchesMap}
    />
  );
};

export default PdfPage;