From e504858757e4e93708ba0511a4dfe2193f3d87fa Mon Sep 17 00:00:00 2001
From: knguyenrise8 <159168836+knguyenrise8@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:19:39 -0600
Subject: [PATCH] fix(RV-447): Add toolbar to extraction flows (#454)

---
 frontend/api/api.ts                      |  4 ++--
 frontend/src/components/ReviewTable.scss |  5 +++++
 frontend/src/components/ReviewTable.tsx  | 14 +++-----------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/api/api.ts b/frontend/api/api.ts
index de09b353..132db0f0 100644
--- 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
index cf94ed48..c59d2d27 100644
--- 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;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ReviewTable.tsx b/frontend/src/components/ReviewTable.tsx
index d2853386..fd1b98d9 100644
--- 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