From e28eb890a5627c915f5b30eaf52b60d7c3dd1ec6 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Wed, 14 May 2025 14:00:00 -0600
Subject: [PATCH 1/8] Move VerifyPage into sub-folder

---
 ui/src/App.tsx                               | 2 +-
 ui/src/pages/{ => VerifyPage}/VerifyPage.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename ui/src/pages/{ => VerifyPage}/VerifyPage.tsx (98%)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 2ad7adb..1277127 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,6 +1,6 @@
 import { Routes, Route, useNavigate } from 'react-router';
 import UploadPage from './pages/UploadPage';
-import VerifyPage from './pages/VerifyPage';
+import VerifyPage from './pages/VerifyPage/VerifyPage';
 import DownloadPage from './pages/DownloadPage';
 import NotSignedInPage from './pages/NotSignedInPage';
 import SignInPage from './pages/SignInPage';
diff --git a/ui/src/pages/VerifyPage.tsx b/ui/src/pages/VerifyPage/VerifyPage.tsx
similarity index 98%
rename from ui/src/pages/VerifyPage.tsx
rename to ui/src/pages/VerifyPage/VerifyPage.tsx
index 63a91eb..69bf477 100644
--- a/ui/src/pages/VerifyPage.tsx
+++ b/ui/src/pages/VerifyPage/VerifyPage.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import Layout from '../components/Layout';
+import Layout from '../../components/Layout';
 import {
   authorizedFetch,
   FieldData,
   GetDocumentResponse,
   UpdateDocumentResponse,
-} from '../utils/api';
+} from '../../utils/api';
 import { useNavigate } from 'react-router';
-import { shouldUseTextarea } from '../utils/formUtils';
+import { shouldUseTextarea } from '../../utils/formUtils';
 
 interface VerifyPageProps {
   signOut: () => Promise<void>;

From d5230b3c8a62bb4927f8d64b4b577364c84fd7d5 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Wed, 14 May 2025 16:05:02 -0600
Subject: [PATCH 2/8] useVerify

---
 ui/src/pages/VerifyPage/VerifyPage.tsx | 269 +++++++------------------
 ui/src/pages/VerifyPage/useVerify.ts   | 191 ++++++++++++++++++
 2 files changed, 259 insertions(+), 201 deletions(-)
 create mode 100644 ui/src/pages/VerifyPage/useVerify.ts

diff --git a/ui/src/pages/VerifyPage/VerifyPage.tsx b/ui/src/pages/VerifyPage/VerifyPage.tsx
index 69bf477..79bbc3e 100644
--- a/ui/src/pages/VerifyPage/VerifyPage.tsx
+++ b/ui/src/pages/VerifyPage/VerifyPage.tsx
@@ -1,214 +1,33 @@
-import React, { useEffect, useState } from 'react';
 import Layout from '../../components/Layout';
-import {
-  authorizedFetch,
-  FieldData,
-  GetDocumentResponse,
-  UpdateDocumentResponse,
-} from '../../utils/api';
-import { useNavigate } from 'react-router';
+import { ExtractedData } from '../../utils/api';
 import { shouldUseTextarea } from '../../utils/formUtils';
+import { useVerify } from './useVerify.ts';
 
 interface VerifyPageProps {
   signOut: () => Promise<void>;
 }
 
 export default function VerifyPage({ signOut }: VerifyPageProps) {
-  const [documentId] = useState<string | null>(() =>
-    sessionStorage.getItem('documentId')
-  );
-  const [responseData, setResponseData] = useState<GetDocumentResponse | null>(
-    null
-  );
-  const [loading, setLoading] = useState<boolean>(true); // tracks if the page is loading
-  const [error, setError] = useState<boolean>(false); // tracks when there is an error
-
-  const navigate = useNavigate();
-
-  async function pollApiRequest(attempts = 30, delay = 2000) {
-    // Helper function to sleep for the specified delay
-    const sleep = () => new Promise((resolve) => setTimeout(resolve, delay));
-
-    if (!documentId) {
-      console.error('No documentId available for API request');
-      setLoading(false);
-      setError(true);
-      return;
-    }
-
-    for (let i = 0; i < attempts; i++) {
-      try {
-        const response = await authorizedFetch(`/api/document/${documentId}`, {
-          method: 'GET',
-          headers: {
-            Accept: 'application/json',
-          },
-        });
-
-        if (response.status === 401 || response.status === 403) {
-          alert('You are no longer signed in!  Please sign in again.');
-          signOut();
-          return;
-        } else if (!response.ok) {
-          console.warn(`Attempt ${i + 1} failed: ${response.statusText}`);
-          await sleep();
-          continue;
-        }
-
-        const result = (await response.json()) as GetDocumentResponse; // parse response
-
-        if (result.status !== 'complete') {
-          console.info(
-            `Attempt ${i + 1} is not complete.  Trying again in a little bit.`
-          );
-          await sleep();
-          continue;
-        }
-
-        setResponseData(result); // store API data in state
-        setLoading(false); // stop loading when data is received
-        setError(false); // clear any previous errors
-        return;
-      } catch (error) {
-        console.error(`Attempt ${i + 1} failed:`, error);
-        await sleep();
-      }
-    }
-
-    console.error('Attempt failed after max attempts');
-    setLoading(false);
-    setError(true);
-  }
-
-  async function handleVerifySubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    if (!responseData || !responseData.extracted_data) {
-      console.log('no extracted data available');
-      return;
-    }
-
-    const formData = {
-      extracted_data: responseData.extracted_data,
-    };
-
-    try {
-      const apiUrl = `/api/document/${responseData.document_id}`;
-      const response = await authorizedFetch(apiUrl, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(formData),
-      });
-
-      if (response.ok) {
-        const result = (await response.json()) as UpdateDocumentResponse;
-        sessionStorage.setItem('verifiedData', JSON.stringify(result));
-        navigate('/download-document');
-        alert('Data saved successfully!');
-      } else if (response.status === 401 || response.status === 403) {
-        alert('You are no longer signed in!  Please sign in again.');
-        signOut();
-      } else {
-        const result = await response.json();
-        alert('Failed to save data: ' + result.error);
-      }
-    } catch (error) {
-      console.error('Error submitting data:', error);
-      alert('An error occurred while saving.');
-    }
-  }
-
-  useEffect(() => {
-    if (!documentId) {
-      console.error('No documentId found in sessionStorage');
-      setLoading(false);
-      setError(true);
-      return;
-    }
-    pollApiRequest();
-  }, []); // runs only once when the component mounts
-
-  function displayFileName(): string {
-    return responseData?.document_key
-      ? responseData?.document_key.replace('input/', '')
-      : ' ';
-  }
-
-  function handleInputChange(
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    key: string,
-    field: FieldData
+  const {
+    responseData,
+    loading,
+    error,
+    handleVerifySubmit,
+    handleInputChange,
+    displayFileName,
+  } = useVerify(signOut);
+
+  function displayFilePreview(
+    base64_encoded_file: string,
+    document_key?: string
   ) {
-    setResponseData((prevData) => {
-      if (!prevData) return null;
-
-      return {
-        ...prevData, // keep previous data
-        extracted_data: {
-          ...prevData.extracted_data, // keep other fields the same
-          [key]: { ...field, value: event.target.value },
-        },
-      };
-    });
-  }
-
-  function displayExtractedData() {
-    if (!responseData?.extracted_data) {
-      console.warn('No extracted data found.');
-      return;
-    }
-
-    return Object.entries(responseData.extracted_data)
-      .sort(([keyA], [keyB]) =>
-        keyA.localeCompare(keyB, undefined, { numeric: true })
-      )
-      .map(([key, field]) => {
-        return (
-          <div key={key}>
-            <label className="usa-label" htmlFor={`field-${key}`}>
-              {key}{' '}
-              <span className="text-accent-cool-darker display-inline-block width-full padding-top-2px">
-                {field.confidence
-                  ? `(Confidence ${parseFloat(field.confidence).toFixed(2)})`
-                  : 'Confidence'}
-              </span>
-            </label>
-            {shouldUseTextarea(field.value) ? (
-              <textarea
-                className="usa-textarea"
-                id={`field-${key}`}
-                name={`field-${key}`}
-                rows={2}
-                value={field.value || ''}
-                onChange={(event) => handleInputChange(event, key, field)}
-              />
-            ) : (
-              <input
-                className="usa-input"
-                id={`field-${key}`}
-                name={`field-${key}`}
-                value={field.value || ''}
-                onChange={(event) => handleInputChange(event, key, field)}
-              />
-            )}
-          </div>
-        );
-      });
-  }
-
-  function displayFilePreview() {
-    if (!responseData || !responseData.base64_encoded_file) return null;
-
     // get file extension
-    const fileExtension =
-      responseData.document_key?.split('.').pop()?.toLowerCase() || '';
+    const fileExtension = document_key?.split('.').pop()?.toLowerCase() || '';
 
     const mimeType =
       fileExtension === 'pdf' ? 'application/pdf' : `image/${fileExtension}`;
     // Base64 URL to display image
-    const base64Src = `data:${mimeType};base64,${responseData.base64_encoded_file}`;
+    const base64Src = `data:${mimeType};base64,${base64_encoded_file}`;
 
     return (
       <div id="file-display-container">
@@ -230,7 +49,7 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
     );
   }
 
-  function displayStatusMessage() {
+  function displayStatusMessage(loading: boolean, error: boolean) {
     if (loading) {
       return (
         <div className="loading-overlay">
@@ -263,6 +82,47 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
         </div>
       );
     }
+
+    return <></>;
+  }
+
+  function displayExtractedData(extracted_data: ExtractedData) {
+    return Object.entries(extracted_data)
+      .sort(([keyA], [keyB]) =>
+        keyA.localeCompare(keyB, undefined, { numeric: true })
+      )
+      .map(([key, field]) => {
+        return (
+          <div key={key}>
+            <label className="usa-label" htmlFor={`field-${key}`}>
+              {key}{' '}
+              <span className="text-accent-cool-darker display-inline-block width-full padding-top-2px">
+                {field.confidence
+                  ? `(Confidence ${parseFloat(field.confidence).toFixed(2)})`
+                  : 'Confidence'}
+              </span>
+            </label>
+            {shouldUseTextarea(field.value) ? (
+              <textarea
+                className="usa-textarea"
+                id={`field-${key}`}
+                name={`field-${key}`}
+                rows={2}
+                value={field.value || ''}
+                onChange={(event) => handleInputChange(event, key, field)}
+              />
+            ) : (
+              <input
+                className="usa-input"
+                id={`field-${key}`}
+                name={`field-${key}`}
+                value={field.value || ''}
+                onChange={(event) => handleInputChange(event, key, field)}
+              />
+            )}
+          </div>
+        );
+      });
   }
 
   return (
@@ -301,7 +161,7 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
       {/* End step indicator section  */}
       <div className="border-top-2px border-base-lighter">
         <div className="grid-container position-relative">
-          {displayStatusMessage()}
+          {displayStatusMessage(loading, error)}
           <div className="grid-row">
             <div className="grid-col-12 tablet:grid-col-8">
               {/* Start card section  */}
@@ -310,7 +170,13 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
                   <div className="usa-card__container file-preview-col">
                     <div className="usa-card__body">
                       <div id="file-display-container"></div>
-                      <div>{displayFilePreview()}</div>
+                      <div>
+                        {responseData?.base64_encoded_file &&
+                          displayFilePreview(
+                            responseData.base64_encoded_file,
+                            responseData.document_key
+                          )}
+                      </div>
                       <p>{displayFileName()}</p>
                     </div>
                   </div>
@@ -325,7 +191,8 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
                   <li className="usa-card width-full">
                     <div className="usa-card__container verify-col">
                       <div className="usa-card__body overflow-y-scroll minh-mobile-lg maxh-mobile-lg">
-                        {displayExtractedData()}
+                        {responseData?.extracted_data &&
+                          displayExtractedData(responseData?.extracted_data)}
                       </div>
                       <div className="usa-card__footer border-top-1px border-base-lighter">
                         <button
diff --git a/ui/src/pages/VerifyPage/useVerify.ts b/ui/src/pages/VerifyPage/useVerify.ts
new file mode 100644
index 0000000..b990d89
--- /dev/null
+++ b/ui/src/pages/VerifyPage/useVerify.ts
@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import {
+  authorizedFetch,
+  FieldData,
+  GetDocumentResponse,
+  UpdateDocumentResponse,
+} from '../../utils/api';
+
+export interface UseVerifyHook {
+  responseData: GetDocumentResponse | null;
+  loading: boolean;
+  error: boolean;
+  handleVerifySubmit: (
+    event: React.FormEvent<HTMLFormElement>
+  ) => Promise<void>;
+  handleInputChange: (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    key: string,
+    field: FieldData
+  ) => void;
+  displayFileName: () => string;
+}
+
+export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
+  const [documentId] = useState<string | null>(() =>
+    sessionStorage.getItem('documentId')
+  );
+  const [responseData, setResponseData] = useState<GetDocumentResponse | null>(
+    null
+  );
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!documentId) {
+      console.error('No documentId found in sessionStorage');
+      setLoading(false);
+      setError(true);
+      return;
+    }
+
+    (async () => {
+      const { responseData, failure } = await pollApiRequest(documentId);
+
+      setLoading(false);
+
+      if (failure) {
+        setError(true);
+        if (failure === 'unauthenticated') {
+          alert('You are no longer signed in!  Please sign in again.');
+          await signOut();
+        }
+
+        return;
+      }
+
+      if (!responseData) {
+        setError(true);
+        return;
+      }
+
+      setResponseData(responseData);
+    })();
+  }, []);
+
+  async function handleVerifySubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (!responseData || !responseData.extracted_data) {
+      console.log('No extracted data available');
+      return;
+    }
+
+    const formData = { extracted_data: responseData.extracted_data };
+
+    try {
+      const apiUrl = `/api/document/${responseData.document_id}`;
+      const response = await authorizedFetch(apiUrl, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        const result = (await response.json()) as UpdateDocumentResponse;
+        sessionStorage.setItem('verifiedData', JSON.stringify(result));
+        navigate('/download-document');
+        alert('Data saved successfully!');
+      } else if (response.status === 401 || response.status === 403) {
+        alert('You are no longer signed in! Please sign in again.');
+        signOut();
+      } else {
+        const result = await response.json();
+        alert('Failed to save data: ' + result.error);
+      }
+    } catch (err) {
+      console.error('Error submitting data:', err);
+      alert('An error occurred while saving.');
+    }
+  }
+
+  function handleInputChange(
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    key: string,
+    field: FieldData
+  ) {
+    setResponseData((prevData) => {
+      if (!prevData) return null;
+      return {
+        ...prevData,
+        extracted_data: {
+          ...prevData.extracted_data,
+          [key]: { ...field, value: event.target.value },
+        },
+      };
+    });
+  }
+
+  function displayFileName(): string {
+    return responseData?.document_key
+      ? responseData.document_key.replace('input/', '')
+      : ' ';
+  }
+
+  return {
+    responseData,
+    loading,
+    error,
+    handleVerifySubmit,
+    handleInputChange,
+    displayFileName,
+  };
+}
+
+interface PollApiRequestResponse {
+  responseData?: GetDocumentResponse;
+  failure?: 'unauthenticated' | 'timeout';
+}
+
+async function pollApiRequest(
+  documentId: string,
+  attempts = 30,
+  delay = 2000
+): Promise<PollApiRequestResponse> {
+  const sleep = () => new Promise((resolve) => setTimeout(resolve, delay));
+
+  for (let retryAttempt = 0; retryAttempt < attempts; retryAttempt++) {
+    try {
+      const response = await authorizedFetch(`/api/document/${documentId}`, {
+        method: 'GET',
+        headers: { Accept: 'application/json' },
+      });
+
+      if (response.status === 401 || response.status === 403) {
+        return {
+          failure: 'unauthenticated',
+        };
+      } else if (!response.ok) {
+        console.warn(
+          `Attempt ${retryAttempt + 1} failed: ${response.statusText}`
+        );
+        await sleep();
+        continue;
+      }
+
+      const result = (await response.json()) as GetDocumentResponse;
+
+      if (result.status !== 'complete') {
+        console.info(
+          `Attempt ${retryAttempt + 1} is not complete. Trying again shortly.`
+        );
+        await sleep();
+        continue;
+      }
+
+      return {
+        responseData: result,
+      };
+    } catch (err) {
+      console.error(`Attempt ${retryAttempt + 1} failed:`, err);
+      await sleep();
+    }
+  }
+
+  console.error('Attempt failed after max attempts');
+  return {
+    failure: 'timeout',
+  };
+}

From 4f16a4aae9dd5173fcf338452ca7d07ffee2afaf Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Thu, 15 May 2025 14:43:13 -0600
Subject: [PATCH 3/8] Keep refining the custom react hook

---
 ui/src/pages/VerifyPage/VerifyPage.tsx |  18 ++--
 ui/src/pages/VerifyPage/useVerify.ts   | 110 ++++++++++++++++---------
 2 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/ui/src/pages/VerifyPage/VerifyPage.tsx b/ui/src/pages/VerifyPage/VerifyPage.tsx
index 79bbc3e..7054824 100644
--- a/ui/src/pages/VerifyPage/VerifyPage.tsx
+++ b/ui/src/pages/VerifyPage/VerifyPage.tsx
@@ -9,7 +9,7 @@ interface VerifyPageProps {
 
 export default function VerifyPage({ signOut }: VerifyPageProps) {
   const {
-    responseData,
+    getDocumentResponseData,
     loading,
     error,
     handleVerifySubmit,
@@ -171,13 +171,15 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
                     <div className="usa-card__body">
                       <div id="file-display-container"></div>
                       <div>
-                        {responseData?.base64_encoded_file &&
+                        {getDocumentResponseData?.base64_encoded_file &&
                           displayFilePreview(
-                            responseData.base64_encoded_file,
-                            responseData.document_key
+                            getDocumentResponseData.base64_encoded_file,
+                            getDocumentResponseData.document_key
                           )}
                       </div>
-                      <p>{displayFileName()}</p>
+                      <p>
+                        {displayFileName(getDocumentResponseData?.document_key)}
+                      </p>
                     </div>
                   </div>
                 </li>
@@ -191,8 +193,10 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
                   <li className="usa-card width-full">
                     <div className="usa-card__container verify-col">
                       <div className="usa-card__body overflow-y-scroll minh-mobile-lg maxh-mobile-lg">
-                        {responseData?.extracted_data &&
-                          displayExtractedData(responseData?.extracted_data)}
+                        {getDocumentResponseData?.extracted_data &&
+                          displayExtractedData(
+                            getDocumentResponseData?.extracted_data
+                          )}
                       </div>
                       <div className="usa-card__footer border-top-1px border-base-lighter">
                         <button
diff --git a/ui/src/pages/VerifyPage/useVerify.ts b/ui/src/pages/VerifyPage/useVerify.ts
index b990d89..2f731a4 100644
--- a/ui/src/pages/VerifyPage/useVerify.ts
+++ b/ui/src/pages/VerifyPage/useVerify.ts
@@ -2,13 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 import {
   authorizedFetch,
+  ExtractedData,
   FieldData,
   GetDocumentResponse,
   UpdateDocumentResponse,
 } from '../../utils/api';
 
 export interface UseVerifyHook {
-  responseData: GetDocumentResponse | null;
+  getDocumentResponseData: GetDocumentResponse | null;
   loading: boolean;
   error: boolean;
   handleVerifySubmit: (
@@ -19,16 +20,15 @@ export interface UseVerifyHook {
     key: string,
     field: FieldData
   ) => void;
-  displayFileName: () => string;
+  displayFileName: (document_key?: string) => string;
 }
 
 export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
   const [documentId] = useState<string | null>(() =>
     sessionStorage.getItem('documentId')
   );
-  const [responseData, setResponseData] = useState<GetDocumentResponse | null>(
-    null
-  );
+  const [getDocumentResponseData, setGetDocumentResponseData] =
+    useState<GetDocumentResponse | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
   const navigate = useNavigate();
@@ -42,7 +42,7 @@ export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
     }
 
     (async () => {
-      const { responseData, failure } = await pollApiRequest(documentId);
+      const { responseData, failure } = await pollGetDocumentApi(documentId);
 
       setLoading(false);
 
@@ -61,44 +61,36 @@ export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
         return;
       }
 
-      setResponseData(responseData);
+      setGetDocumentResponseData(responseData);
     })();
   }, []);
 
   async function handleVerifySubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
-    if (!responseData || !responseData.extracted_data) {
+    if (!getDocumentResponseData?.extracted_data) {
       console.log('No extracted data available');
       return;
     }
 
-    const formData = { extracted_data: responseData.extracted_data };
-
-    try {
-      const apiUrl = `/api/document/${responseData.document_id}`;
-      const response = await authorizedFetch(apiUrl, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(formData),
-      });
+    const { responseData, failure } = await callUpdateDocumentApi(
+      getDocumentResponseData.document_id,
+      getDocumentResponseData.extracted_data
+    );
 
-      if (response.ok) {
-        const result = (await response.json()) as UpdateDocumentResponse;
-        sessionStorage.setItem('verifiedData', JSON.stringify(result));
-        navigate('/download-document');
-        alert('Data saved successfully!');
-      } else if (response.status === 401 || response.status === 403) {
+    if (failure) {
+      if (failure === 'unauthenticated') {
         alert('You are no longer signed in! Please sign in again.');
-        signOut();
+        await signOut();
       } else {
-        const result = await response.json();
-        alert('Failed to save data: ' + result.error);
+        alert('An error occurred while saving.');
       }
-    } catch (err) {
-      console.error('Error submitting data:', err);
-      alert('An error occurred while saving.');
+      return;
     }
+
+    sessionStorage.setItem('verifiedData', JSON.stringify(responseData));
+    alert('Data saved successfully!');
+    navigate('/download-document');
   }
 
   function handleInputChange(
@@ -106,7 +98,7 @@ export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
     key: string,
     field: FieldData
   ) {
-    setResponseData((prevData) => {
+    setGetDocumentResponseData((prevData) => {
       if (!prevData) return null;
       return {
         ...prevData,
@@ -118,14 +110,8 @@ export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
     });
   }
 
-  function displayFileName(): string {
-    return responseData?.document_key
-      ? responseData.document_key.replace('input/', '')
-      : ' ';
-  }
-
   return {
-    responseData,
+    getDocumentResponseData,
     loading,
     error,
     handleVerifySubmit,
@@ -134,16 +120,20 @@ export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
   };
 }
 
-interface PollApiRequestResponse {
+function displayFileName(document_key?: string): string {
+  return document_key ? document_key.replace('input/', '') : ' ';
+}
+
+interface PollGetDocumentApiResponse {
   responseData?: GetDocumentResponse;
   failure?: 'unauthenticated' | 'timeout';
 }
 
-async function pollApiRequest(
+async function pollGetDocumentApi(
   documentId: string,
   attempts = 30,
   delay = 2000
-): Promise<PollApiRequestResponse> {
+): Promise<PollGetDocumentApiResponse> {
   const sleep = () => new Promise((resolve) => setTimeout(resolve, delay));
 
   for (let retryAttempt = 0; retryAttempt < attempts; retryAttempt++) {
@@ -189,3 +179,43 @@ async function pollApiRequest(
     failure: 'timeout',
   };
 }
+
+interface CallUpdateDocumentApiResponse {
+  responseData?: UpdateDocumentResponse;
+  failure?: 'unauthenticated' | 'other';
+}
+
+async function callUpdateDocumentApi(
+  document_id: string,
+  extracted_data: ExtractedData
+): Promise<CallUpdateDocumentApiResponse> {
+  try {
+    const apiUrl = `/api/document/${document_id}`;
+    const response = await authorizedFetch(apiUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(extracted_data),
+    });
+
+    if (response.ok) {
+      const result = (await response.json()) as UpdateDocumentResponse;
+      return {
+        responseData: result,
+      };
+    } else if (response.status === 401 || response.status === 403) {
+      return {
+        failure: 'unauthenticated',
+      };
+    } else {
+      alert('Failed to save data: ' + response.statusText);
+      return {
+        failure: 'other',
+      };
+    }
+  } catch (err) {
+    console.error('Error submitting data:', err);
+    return {
+      failure: 'other',
+    };
+  }
+}

From b3fc3fbd6f078376adabfe2170083c8b824d7ca5 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Thu, 15 May 2025 14:53:42 -0600
Subject: [PATCH 4/8] Rename verify page hook

---
 ui/src/pages/VerifyPage/VerifyPage.tsx                     | 4 ++--
 ui/src/pages/VerifyPage/{useVerify.ts => useVerifyPage.ts} | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename ui/src/pages/VerifyPage/{useVerify.ts => useVerifyPage.ts} (97%)

diff --git a/ui/src/pages/VerifyPage/VerifyPage.tsx b/ui/src/pages/VerifyPage/VerifyPage.tsx
index 7054824..f7a4ba4 100644
--- a/ui/src/pages/VerifyPage/VerifyPage.tsx
+++ b/ui/src/pages/VerifyPage/VerifyPage.tsx
@@ -1,7 +1,7 @@
 import Layout from '../../components/Layout';
 import { ExtractedData } from '../../utils/api';
 import { shouldUseTextarea } from '../../utils/formUtils';
-import { useVerify } from './useVerify.ts';
+import { useVerifyPage } from './useVerifyPage.ts';
 
 interface VerifyPageProps {
   signOut: () => Promise<void>;
@@ -15,7 +15,7 @@ export default function VerifyPage({ signOut }: VerifyPageProps) {
     handleVerifySubmit,
     handleInputChange,
     displayFileName,
-  } = useVerify(signOut);
+  } = useVerifyPage(signOut);
 
   function displayFilePreview(
     base64_encoded_file: string,
diff --git a/ui/src/pages/VerifyPage/useVerify.ts b/ui/src/pages/VerifyPage/useVerifyPage.ts
similarity index 97%
rename from ui/src/pages/VerifyPage/useVerify.ts
rename to ui/src/pages/VerifyPage/useVerifyPage.ts
index 2f731a4..a1da096 100644
--- a/ui/src/pages/VerifyPage/useVerify.ts
+++ b/ui/src/pages/VerifyPage/useVerifyPage.ts
@@ -8,7 +8,7 @@ import {
   UpdateDocumentResponse,
 } from '../../utils/api';
 
-export interface UseVerifyHook {
+export interface UseVerifyPageHook {
   getDocumentResponseData: GetDocumentResponse | null;
   loading: boolean;
   error: boolean;
@@ -23,7 +23,7 @@ export interface UseVerifyHook {
   displayFileName: (document_key?: string) => string;
 }
 
-export function useVerify(signOut: () => Promise<void>): UseVerifyHook {
+export function useVerifyPage(signOut: () => Promise<void>): UseVerifyPageHook {
   const [documentId] = useState<string | null>(() =>
     sessionStorage.getItem('documentId')
   );

From 8848b63f4730af643420eafcfe04364a093c3c99 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Thu, 15 May 2025 15:00:11 -0600
Subject: [PATCH 5/8] separate the non-react stuff into a controller

---
 ui/src/pages/VerifyPage/useVerifyPage.ts      | 111 +-----------------
 .../pages/VerifyPage/verifyPageController.ts  | 106 +++++++++++++++++
 2 files changed, 111 insertions(+), 106 deletions(-)
 create mode 100644 ui/src/pages/VerifyPage/verifyPageController.ts

diff --git a/ui/src/pages/VerifyPage/useVerifyPage.ts b/ui/src/pages/VerifyPage/useVerifyPage.ts
index a1da096..44d0e0a 100644
--- a/ui/src/pages/VerifyPage/useVerifyPage.ts
+++ b/ui/src/pages/VerifyPage/useVerifyPage.ts
@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
+import { FieldData, GetDocumentResponse } from '../../utils/api';
 import {
-  authorizedFetch,
-  ExtractedData,
-  FieldData,
-  GetDocumentResponse,
-  UpdateDocumentResponse,
-} from '../../utils/api';
+  callUpdateDocumentApi,
+  displayFileName,
+  pollGetDocumentApi,
+} from './verifyPageController.ts';
 
 export interface UseVerifyPageHook {
   getDocumentResponseData: GetDocumentResponse | null;
@@ -119,103 +118,3 @@ export function useVerifyPage(signOut: () => Promise<void>): UseVerifyPageHook {
     displayFileName,
   };
 }
-
-function displayFileName(document_key?: string): string {
-  return document_key ? document_key.replace('input/', '') : ' ';
-}
-
-interface PollGetDocumentApiResponse {
-  responseData?: GetDocumentResponse;
-  failure?: 'unauthenticated' | 'timeout';
-}
-
-async function pollGetDocumentApi(
-  documentId: string,
-  attempts = 30,
-  delay = 2000
-): Promise<PollGetDocumentApiResponse> {
-  const sleep = () => new Promise((resolve) => setTimeout(resolve, delay));
-
-  for (let retryAttempt = 0; retryAttempt < attempts; retryAttempt++) {
-    try {
-      const response = await authorizedFetch(`/api/document/${documentId}`, {
-        method: 'GET',
-        headers: { Accept: 'application/json' },
-      });
-
-      if (response.status === 401 || response.status === 403) {
-        return {
-          failure: 'unauthenticated',
-        };
-      } else if (!response.ok) {
-        console.warn(
-          `Attempt ${retryAttempt + 1} failed: ${response.statusText}`
-        );
-        await sleep();
-        continue;
-      }
-
-      const result = (await response.json()) as GetDocumentResponse;
-
-      if (result.status !== 'complete') {
-        console.info(
-          `Attempt ${retryAttempt + 1} is not complete. Trying again shortly.`
-        );
-        await sleep();
-        continue;
-      }
-
-      return {
-        responseData: result,
-      };
-    } catch (err) {
-      console.error(`Attempt ${retryAttempt + 1} failed:`, err);
-      await sleep();
-    }
-  }
-
-  console.error('Attempt failed after max attempts');
-  return {
-    failure: 'timeout',
-  };
-}
-
-interface CallUpdateDocumentApiResponse {
-  responseData?: UpdateDocumentResponse;
-  failure?: 'unauthenticated' | 'other';
-}
-
-async function callUpdateDocumentApi(
-  document_id: string,
-  extracted_data: ExtractedData
-): Promise<CallUpdateDocumentApiResponse> {
-  try {
-    const apiUrl = `/api/document/${document_id}`;
-    const response = await authorizedFetch(apiUrl, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(extracted_data),
-    });
-
-    if (response.ok) {
-      const result = (await response.json()) as UpdateDocumentResponse;
-      return {
-        responseData: result,
-      };
-    } else if (response.status === 401 || response.status === 403) {
-      return {
-        failure: 'unauthenticated',
-      };
-    } else {
-      alert('Failed to save data: ' + response.statusText);
-      return {
-        failure: 'other',
-      };
-    }
-  } catch (err) {
-    console.error('Error submitting data:', err);
-    return {
-      failure: 'other',
-    };
-  }
-}
diff --git a/ui/src/pages/VerifyPage/verifyPageController.ts b/ui/src/pages/VerifyPage/verifyPageController.ts
new file mode 100644
index 0000000..1d81585
--- /dev/null
+++ b/ui/src/pages/VerifyPage/verifyPageController.ts
@@ -0,0 +1,106 @@
+import {
+  authorizedFetch,
+  ExtractedData,
+  GetDocumentResponse,
+  UpdateDocumentResponse,
+} from '../../utils/api.ts';
+
+export function displayFileName(document_key?: string): string {
+  return document_key ? document_key.replace('input/', '') : ' ';
+}
+
+interface PollGetDocumentApiResponse {
+  responseData?: GetDocumentResponse;
+  failure?: 'unauthenticated' | 'timeout';
+}
+
+export async function pollGetDocumentApi(
+  documentId: string,
+  attempts = 30,
+  delay = 2000
+): Promise<PollGetDocumentApiResponse> {
+  const sleep = () => new Promise((resolve) => setTimeout(resolve, delay));
+
+  for (let retryAttempt = 0; retryAttempt < attempts; retryAttempt++) {
+    try {
+      const response = await authorizedFetch(`/api/document/${documentId}`, {
+        method: 'GET',
+        headers: { Accept: 'application/json' },
+      });
+
+      if (response.status === 401 || response.status === 403) {
+        return {
+          failure: 'unauthenticated',
+        };
+      } else if (!response.ok) {
+        console.warn(
+          `Attempt ${retryAttempt + 1} failed: ${response.statusText}`
+        );
+        await sleep();
+        continue;
+      }
+
+      const result = (await response.json()) as GetDocumentResponse;
+
+      if (result.status !== 'complete') {
+        console.info(
+          `Attempt ${retryAttempt + 1} is not complete. Trying again shortly.`
+        );
+        await sleep();
+        continue;
+      }
+
+      return {
+        responseData: result,
+      };
+    } catch (err) {
+      console.error(`Attempt ${retryAttempt + 1} failed:`, err);
+      await sleep();
+    }
+  }
+
+  console.error('Attempt failed after max attempts');
+  return {
+    failure: 'timeout',
+  };
+}
+
+interface CallUpdateDocumentApiResponse {
+  responseData?: UpdateDocumentResponse;
+  failure?: 'unauthenticated' | 'other';
+}
+
+export async function callUpdateDocumentApi(
+  document_id: string,
+  extracted_data: ExtractedData
+): Promise<CallUpdateDocumentApiResponse> {
+  try {
+    const apiUrl = `/api/document/${document_id}`;
+    const response = await authorizedFetch(apiUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(extracted_data),
+    });
+
+    if (response.ok) {
+      const result = (await response.json()) as UpdateDocumentResponse;
+      return {
+        responseData: result,
+      };
+    } else if (response.status === 401 || response.status === 403) {
+      return {
+        failure: 'unauthenticated',
+      };
+    } else {
+      alert('Failed to save data: ' + response.statusText);
+      return {
+        failure: 'other',
+      };
+    }
+  } catch (err) {
+    console.error('Error submitting data:', err);
+    return {
+      failure: 'other',
+    };
+  }
+}

From e68d9f81414dc32af94a9a83999906cca67c00a1 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Thu, 15 May 2025 15:40:48 -0600
Subject: [PATCH 6/8] unit tests for displayFileName

---
 .../VerifyPage/verifyPageController.test.ts   | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 ui/src/pages/VerifyPage/verifyPageController.test.ts

diff --git a/ui/src/pages/VerifyPage/verifyPageController.test.ts b/ui/src/pages/VerifyPage/verifyPageController.test.ts
new file mode 100644
index 0000000..93f6903
--- /dev/null
+++ b/ui/src/pages/VerifyPage/verifyPageController.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+import { displayFileName } from './verifyPageController';
+
+describe('displayFileName', () => {
+  it('should remove input/ prefix from document key', () => {
+    const result = displayFileName('input/document.pdf');
+    expect(result).toBe('document.pdf');
+  });
+
+  it('should return the original string if no input/ prefix exists', () => {
+    const result = displayFileName('document.pdf');
+    expect(result).toBe('document.pdf');
+  });
+
+  it('should return a space character when document_key is undefined', () => {
+    const result = displayFileName(undefined);
+    expect(result).toBe(' ');
+  });
+
+  it('should handle empty string correctly', () => {
+    const result = displayFileName('');
+    expect(result).toBe(' ');
+  });
+
+  it('should handle input/ as the entire string', () => {
+    const result = displayFileName('input/');
+    expect(result).toBe('');
+  });
+});
+
+describe('pollGetDocumentApi', () => {
+  it('does things', () => {});
+});
+
+describe('callUpdateDocumentApi', () => {
+  it('does things', () => {});
+});

From 7b2979ae5050c0f4b0104563680d05717af48327 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Fri, 16 May 2025 12:38:48 -0600
Subject: [PATCH 7/8] Test pollGetDocumentApi

---
 .../VerifyPage/verifyPageController.test.ts   | 228 +++++++++++++++++-
 ui/vitest.config.ts                           |   1 +
 2 files changed, 226 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/VerifyPage/verifyPageController.test.ts b/ui/src/pages/VerifyPage/verifyPageController.test.ts
index 93f6903..91e2ed5 100644
--- a/ui/src/pages/VerifyPage/verifyPageController.test.ts
+++ b/ui/src/pages/VerifyPage/verifyPageController.test.ts
@@ -1,5 +1,11 @@
-import { describe, expect, it } from 'vitest';
-import { displayFileName } from './verifyPageController';
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { displayFileName, pollGetDocumentApi } from './verifyPageController';
+import * as api from '../../utils/api';
+
+// Mock the authorizedFetch function
+vi.mock('../../utils/api', () => ({
+  authorizedFetch: vi.fn(),
+}));
 
 describe('displayFileName', () => {
   it('should remove input/ prefix from document key', () => {
@@ -29,7 +35,223 @@ describe('displayFileName', () => {
 });
 
 describe('pollGetDocumentApi', () => {
-  it('does things', () => {});
+  const mockAuthorizedFetch = api.authorizedFetch as ReturnType<typeof vi.fn>;
+  const documentId = 'test-document-id';
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should return response data when API returns complete status', async () => {
+    // Mock a successful response with complete status
+    const mockResponse = {
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      }),
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await pollGetDocumentApi(documentId, 1);
+
+    expect(mockAuthorizedFetch).toHaveBeenCalledWith(
+      `/api/document/${documentId}`,
+      {
+        method: 'GET',
+        headers: { Accept: 'application/json' },
+      }
+    );
+    expect(result).toEqual({
+      responseData: {
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      },
+      failure: undefined,
+    });
+  });
+
+  it('should return unauthenticated failure when API returns 401', async () => {
+    // Mock a 401 unauthorized response
+    const mockResponse = {
+      ok: false,
+      status: 401,
+      statusText: 'Unauthorized',
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await pollGetDocumentApi(documentId, 1);
+
+    expect(result).toEqual({
+      failure: 'unauthenticated',
+      responseData: undefined,
+    });
+  });
+
+  it('should return unauthenticated failure when API returns 403', async () => {
+    // Mock a 403 forbidden response
+    const mockResponse = {
+      ok: false,
+      status: 403,
+      statusText: 'Forbidden',
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await pollGetDocumentApi(documentId, 1);
+
+    expect(result).toEqual({
+      failure: 'unauthenticated',
+      responseData: undefined,
+    });
+  });
+
+  it('should retry when API returns non-complete status and eventually succeed', async () => {
+    // Mock responses: first with processing status, second with complete status
+    const mockProcessingResponse = {
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({
+        status: 'processing',
+        document_id: documentId,
+      }),
+    };
+
+    const mockCompleteResponse = {
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      }),
+    };
+
+    mockAuthorizedFetch
+      .mockResolvedValueOnce(mockProcessingResponse)
+      .mockResolvedValueOnce(mockCompleteResponse);
+
+    // not awaiting because need to skip past the sleep
+    const resultPromise = pollGetDocumentApi(documentId, 2, 1000);
+
+    // fast-forward time to speed-up the retry
+    await vi.advanceTimersByTimeAsync(1000);
+
+    // now await the promise
+    const result = await resultPromise;
+
+    expect(mockAuthorizedFetch).toHaveBeenCalledTimes(2);
+    expect(result).toEqual({
+      responseData: {
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      },
+      failure: undefined,
+    });
+  });
+
+  it('should return timeout failure after max attempts', async () => {
+    // Mock a response with non-complete status
+    const mockResponse = {
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({
+        status: 'processing',
+        document_id: documentId,
+      }),
+    };
+
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const resultPromise = pollGetDocumentApi(documentId, 2, 1000);
+
+    await vi.advanceTimersByTimeAsync(1000);
+    await vi.advanceTimersByTimeAsync(1000);
+
+    const result = await resultPromise;
+
+    expect(result).toEqual({
+      failure: 'timeout',
+      responseData: undefined,
+    });
+  });
+
+  it('should retry when API returns error response', async () => {
+    // Mock a failed response followed by a successful one
+    const mockErrorResponse = {
+      ok: false,
+      status: 500,
+      statusText: 'Internal Server Error',
+    };
+
+    const mockSuccessResponse = {
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      }),
+    };
+
+    mockAuthorizedFetch
+      .mockResolvedValueOnce(mockErrorResponse)
+      .mockResolvedValueOnce(mockSuccessResponse);
+
+    const resultPromise = pollGetDocumentApi(documentId, 2, 1000);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    const result = await resultPromise;
+
+    expect(mockAuthorizedFetch).toHaveBeenCalledTimes(2);
+    expect(result).toEqual({
+      responseData: {
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      },
+      failure: undefined,
+    });
+  });
+
+  it('should retry when fetch throws an exception', async () => {
+    // Mock a thrown exception followed by a successful response
+    mockAuthorizedFetch
+      .mockRejectedValueOnce(new Error('Network error'))
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: vi.fn().mockResolvedValue({
+          status: 'complete',
+          document_id: documentId,
+          document_key: 'input/test.pdf',
+        }),
+      });
+
+    const resultPromise = pollGetDocumentApi(documentId, 2, 1000);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    const result = await resultPromise;
+
+    expect(mockAuthorizedFetch).toHaveBeenCalledTimes(2);
+    expect(result).toEqual({
+      responseData: {
+        status: 'complete',
+        document_id: documentId,
+        document_key: 'input/test.pdf',
+      },
+      failure: undefined,
+    });
+  });
 });
 
 describe('callUpdateDocumentApi', () => {
diff --git a/ui/vitest.config.ts b/ui/vitest.config.ts
index 4ac6027..2b49ecb 100644
--- a/ui/vitest.config.ts
+++ b/ui/vitest.config.ts
@@ -3,5 +3,6 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     environment: 'node',
+    restoreMocks: true,
   },
 });

From 12e63536daf0b1d7c1bbc0cfe4e3ed1b84ea4316 Mon Sep 17 00:00:00 2001
From: halprin <halprin@users.noreply.github.com>
Date: Fri, 16 May 2025 13:51:47 -0600
Subject: [PATCH 8/8] unit test callUpdateDocumentApi

---
 .../VerifyPage/verifyPageController.test.ts   | 102 +++++++++++++++++-
 .../pages/VerifyPage/verifyPageController.ts  |   2 +-
 2 files changed, 101 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/VerifyPage/verifyPageController.test.ts b/ui/src/pages/VerifyPage/verifyPageController.test.ts
index 91e2ed5..44a3bde 100644
--- a/ui/src/pages/VerifyPage/verifyPageController.test.ts
+++ b/ui/src/pages/VerifyPage/verifyPageController.test.ts
@@ -1,5 +1,9 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { displayFileName, pollGetDocumentApi } from './verifyPageController';
+import {
+  displayFileName,
+  pollGetDocumentApi,
+  callUpdateDocumentApi,
+} from './verifyPageController';
 import * as api from '../../utils/api';
 
 // Mock the authorizedFetch function
@@ -255,5 +259,99 @@ describe('pollGetDocumentApi', () => {
 });
 
 describe('callUpdateDocumentApi', () => {
-  it('does things', () => {});
+  const mockAuthorizedFetch = api.authorizedFetch as ReturnType<typeof vi.fn>;
+  const documentId = 'test-document-id';
+  const mockExtractedData = {
+    field1: { value: 'value1', confidence: '0.9' },
+    field2: { value: 'value2', confidence: '0.8' },
+  };
+
+  it('should return response data when API call is successful', async () => {
+    // Mock a successful response
+    const mockResponse = {
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({
+        extracted_data: mockExtractedData,
+      }),
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await callUpdateDocumentApi(documentId, mockExtractedData);
+
+    expect(mockAuthorizedFetch).toHaveBeenCalledWith(
+      `/api/document/${documentId}`,
+      {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(mockExtractedData),
+      }
+    );
+    expect(result).toEqual({
+      responseData: {
+        extracted_data: mockExtractedData,
+      },
+      failure: undefined,
+    });
+  });
+
+  it('should return unauthenticated failure when API returns 401', async () => {
+    // Mock a 401 unauthorized response
+    const mockResponse = {
+      ok: false,
+      status: 401,
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await callUpdateDocumentApi(documentId, mockExtractedData);
+
+    expect(result).toEqual({
+      failure: 'unauthenticated',
+      responseData: undefined,
+    });
+  });
+
+  it('should return unauthenticated failure when API returns 403', async () => {
+    // Mock a 403 forbidden response
+    const mockResponse = {
+      ok: false,
+      status: 403,
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await callUpdateDocumentApi(documentId, mockExtractedData);
+
+    expect(result).toEqual({
+      failure: 'unauthenticated',
+      responseData: undefined,
+    });
+  });
+
+  it('should return other failure when API returns other error status', async () => {
+    // Mock a 500 server error response
+    const mockResponse = {
+      ok: false,
+      status: 500,
+    };
+    mockAuthorizedFetch.mockResolvedValue(mockResponse);
+
+    const result = await callUpdateDocumentApi(documentId, mockExtractedData);
+
+    expect(result).toEqual({
+      failure: 'other',
+      responseData: undefined,
+    });
+  });
+
+  it('should return other failure when fetch throws an exception', async () => {
+    // Mock a network error
+    mockAuthorizedFetch.mockRejectedValue(new Error('Network error'));
+
+    const result = await callUpdateDocumentApi(documentId, mockExtractedData);
+
+    expect(result).toEqual({
+      failure: 'other',
+      responseData: undefined,
+    });
+  });
 });
diff --git a/ui/src/pages/VerifyPage/verifyPageController.ts b/ui/src/pages/VerifyPage/verifyPageController.ts
index 1d81585..6ddc15a 100644
--- a/ui/src/pages/VerifyPage/verifyPageController.ts
+++ b/ui/src/pages/VerifyPage/verifyPageController.ts
@@ -92,7 +92,7 @@ export async function callUpdateDocumentApi(
         failure: 'unauthenticated',
       };
     } else {
-      alert('Failed to save data: ' + response.statusText);
+      console.error('Failed to save data: ' + response.statusText);
       return {
         failure: 'other',
       };