function Classified()

in microservices/adp_ui/src/components/Classify.js [48:159]


function Classified() {
  const { uid, caseid } = useParams();
  const [notes, setNotes] = useState('');
  const [docType, setDocType] = useState('');
  const history = useHistory();

  useEffect(() => {
    // based on the uid, get the document for the page
    let url = `${baseURL}/hitl_service/v1/fetch_file?case_id=${caseid}&uid=${uid}`

    axios.post(`${baseURL}/hitl_service/v1/get_document?uid=${uid}`, {
    }).then(res => {
      console.log("API RESPONSE DATA", res.data);
      inputData = res.data.data;

      // To display PDF onload
      pdfjsLib.getDocument(url).promise.then(function (pdf) {
        thePdf = pdf;
        viewer = document.getElementById('pdf-viewer');
        renderPage(pdf.numPages)
      });

    }).catch((err) => {
      console.log("error", err);
      toast.error(`${err}`, {
        position: "bottom-center",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  let currPage = 1;
  // Based on the pagenumbers the PDF can be rendered
  function renderPage() {

    //pageNumber = 1;
    thePdf.getPage(currPage).then(function (page) {
      console.log('Page loaded');
      canvas = document.createElement("canvas");
      canvas.className = `pdf-page-canvas-${currPage}`;
      canvas.strokeStyle = 'black'
      viewer.appendChild(canvas);
      var scale = 1.5;
      var rotation = 0;
      var dontFlip = 0;
      var viewport = page.getViewport({ scale, rotation, dontFlip });

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

      //page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function () {
        console.log("Pahge rendered")
      });

      currPage++;
      if (thePdf !== null && currPage <= thePdf.numPages) {
        console.log("currpage")

        thePdf.getPage(currPage).then(renderPage);
      }
    })
  }

  // This is the checkpoint to know if the document needs the manual classification or not
  const docTypeChange = (e) => {
    console.log("doc type changed", e.target.value)
    setDocType(e.target.value)
  }

  // To manual classify a document
  const classifyDoc = () => {
    console.log("DOC TYPE SELECTED", docType)
    console.log("CASEID", caseid)
    console.log("uid", uid)
    axios.post(`${baseURL}/hitl_service/v1/update_hitl_classification?case_id=${caseid}&uid=${uid}&document_class=${docType}`).then((classifiedDocData) => {
      console.log("CLassified doc data", classifiedDocData)
      history.push('/');
    })
  }



  return (
    <div>
      <Headers />
      <div className="subHeaderReassign">
        <Link to={{ pathname: '/', }} className="drBack">
          <Back fill="#aaa" />
        </Link>{' '}
        <label className={["raLabels", "raSpace"].join(" ")}> Classify Document</label>
      </div>
      <Container style={{ padding: '45px' }}>
        <Card style={{ borderRadius: '1.25rem' }}>
          <Card.Body>
            <Card.Text>
              <div className="row" style={{ marginLeft: '10px', paddingTop: '0px', background: '#fff' }}>
                <div className="col-7" style={{ overflow: 'scroll', height: 'calc(100vh - 220px)' }}>
                  {/* <iframe src={`${baseURL}/hitl_service/v1/fetch_file?case_id=${caseid}&uid=${uid}`} height='500' width='800' title="pdf" /> */}