fix(RV-447): Add toolbar to extraction flows (#454)

CDCgov · Dec 5, 2024 · e504858 · e504858
1 parent e49c696
commit e504858
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/frontend/api/api.ts b/frontend/api/api.ts
@@ -7,7 +7,7 @@ import {
 
 const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:8000/";
 const middlewareURL =
-  import.meta.env.VITE_MIDDLEWARE_URL || "http://localhost:8080/";
+  import.meta.env.VITE_MIDDLEWARE_URL || "http://localhost:8000/";
 
 export const AlignImage = async (
   args: AlignImageArgs,
@@ -45,7 +45,7 @@ export const ImageToText = async (
     labels: JSON.stringify(fieldNames),
   });
 
-  const imageToTextURL = `${middlewareURL}api/image_file_to_text`;
+  const imageToTextURL = `${middlewareURL}image_to_text`;
   try {
     const response = await fetch(imageToTextURL, {
       method: "POST",

diff --git a/frontend/src/components/ReviewTable.scss b/frontend/src/components/ReviewTable.scss
@@ -1,3 +1,8 @@
 .table-container-half {
   background-color: white;
 }
+
+.information-display {
+  width: 100vw;
+  background-color: white;
+}
diff --git a/frontend/src/components/ReviewTable.tsx b/frontend/src/components/ReviewTable.tsx
@@ -10,6 +10,7 @@ import ErrorIcon from "../assets/error_icon.svg";
 import { useNavigate } from "react-router-dom";
 
 import "./ReviewTable.scss";
+import Toolbar from "./Toolbar";
 
 interface ReviewTableProps {
   isSingle: boolean;
@@ -53,7 +54,6 @@ const ReviewTable = ({
   maskShape,
   index,
   images,
-  setImages,
   setIndex,
   handleSubmit,
   handleBack,
@@ -80,7 +80,7 @@ const ReviewTable = ({
         <ExtractStepper currentStep={ExtractStep.Review} />
       </div>
 
-      <div className="display-flex flex-justify-between padding-top-4">
+      <div className="display-flex flex-justify-between padding-top-4 information-display">
         <div className="width-50 height-full table-container-half">
           <div className="display-flex flex-column review-template-header-container">
             <h2>Extracted Data</h2>
@@ -180,15 +180,7 @@ const ReviewTable = ({
         <div className="image-container">
           <div className="width-full bg-white border-gray-5 border-1px">
             <div>
-              {images.map((_, index) => (
-                <Button
-                  key={index}
-                  onClick={() => handleImageChange(index)}
-                  type="button"
-                >
-                  Image {index + 1}
-                </Button>
-              ))}
+              <Toolbar totalPages={images.length} onPageChange={(index) => handleImageChange(index - 1)} />
             </div>
             {images.map((image, innerIndex) => (
               <svg