From 67a9c23c56861f3a5cc02e41d8d49b7c117c23dd Mon Sep 17 00:00:00 2001
From: Jacob Lowe <40873986+jalowe13@users.noreply.github.com>
Date: Wed, 11 Dec 2024 14:21:49 -0600
Subject: [PATCH] Task/WP-505: APCD File Upload Failures Logging Request
 (#1013)

* Adding error messages to upload modal ui

* response text for 403

* remove logs and testing code

* additional testing reversal

* console log removal

* 500 errors for testing

* try catch for http and network errors
---
 .../DataFilesUploadModalListingTable.jsx      |  8 ++++-
 .../components/Submissions/Submissions.jsx    |  2 +-
 .../src/redux/reducers/datafiles.reducers.js  |  9 ++++++
 client/src/redux/sagas/datafiles.sagas.js     | 29 +++++++++++++------
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx
index 4506e2bfd..01126b3e7 100644
--- a/client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx
+++ b/client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx
@@ -5,11 +5,13 @@ import { LoadingSpinner, InlineMessage, Button } from '_common';
 import { FileLengthCell } from '../../DataFilesListing/DataFilesListingCells';
 import { useUpload } from 'hooks/datafiles/mutations';
 import styles from './DataFilesUploadModalListingTable.module.scss';
+import { useSelector } from 'react-redux';
 
 const DataFilesUploadStatus = ({ i, removeCallback, rejectedFiles }) => {
   if (rejectedFiles.filter((f) => f.id === i).length > 0) {
     return <InlineMessage type="error">Exceeds File Size Limit</InlineMessage>;
   }
+  const errorMessage = useSelector((state) => state.files.error.message);
   const status = useUpload().status[i];
   switch (status) {
     case 'UPLOADING':
@@ -17,7 +19,11 @@ const DataFilesUploadStatus = ({ i, removeCallback, rejectedFiles }) => {
     case 'SUCCESS':
       return <span className="badge badge-success">SUCCESS</span>;
     case 'ERROR':
-      return <InlineMessage type="error">Upload Failed</InlineMessage>;
+      return (
+        <InlineMessage type="error">
+          Upload Failed: {errorMessage}
+        </InlineMessage>
+      );
     default:
       return (
         <Button type="link" onClick={() => removeCallback(i)}>
diff --git a/client/src/components/Submissions/Submissions.jsx b/client/src/components/Submissions/Submissions.jsx
index 5a2dedb06..59eca7300 100644
--- a/client/src/components/Submissions/Submissions.jsx
+++ b/client/src/components/Submissions/Submissions.jsx
@@ -132,7 +132,7 @@ const Submissions = () => {
 
   const useSubmitterRole = () => {
     const query = useQuery({
-      queryKey: 'submitter-role',
+      queryKey: ['submitter-role'],
       queryFn: getSubmitterRole,
     });
     return query;
diff --git a/client/src/redux/reducers/datafiles.reducers.js b/client/src/redux/reducers/datafiles.reducers.js
index c5ea8e8cb..2ccbf59a5 100644
--- a/client/src/redux/reducers/datafiles.reducers.js
+++ b/client/src/redux/reducers/datafiles.reducers.js
@@ -122,6 +122,7 @@ export const initialFilesState = {
   error: {
     FilesListing: false,
     modal: false,
+    message: '',
   },
   listing: {
     FilesListing: [],
@@ -331,6 +332,14 @@ export function files(state = initialFilesState, action) {
           [action.payload.section]: setValue,
         },
       };
+    case 'DATA_FILES_SET_ERROR':
+      return {
+        ...state,
+        error: {
+          ...state.error,
+          message: action.payload.message,
+        },
+      };
     case 'DATA_FILES_SET_LOADING':
       return {
         ...state,
diff --git a/client/src/redux/sagas/datafiles.sagas.js b/client/src/redux/sagas/datafiles.sagas.js
index 18b5fb982..8985c6b71 100644
--- a/client/src/redux/sagas/datafiles.sagas.js
+++ b/client/src/redux/sagas/datafiles.sagas.js
@@ -485,16 +485,23 @@ export async function uploadFileUtil(api, scheme, system, path, file) {
     `/api/datafiles/${api}/upload/${scheme}/${system}/${apiPath}/`
   );
 
-  const request = await fetch(url, {
-    method: 'POST',
-    headers: { 'X-CSRFToken': Cookies.get('csrftoken') },
-    credentials: 'same-origin',
-    body: formData,
-  });
-  if (!request.ok) {
-    throw new Error(request.status);
+  try {
+    const request = await fetch(url, {
+      method: 'POST',
+      headers: { 'X-CSRFToken': Cookies.get('csrftoken') },
+      credentials: 'same-origin',
+      body: formData,
+    });
+    if (!request.ok) {
+      throw new Error(`HTTP error: ${request.status}`);
+    }
+    return request;
+  } catch (error) {
+    if (error instanceof TypeError) {
+      throw new Error('Network error: The file upload was blocked.');
+    }
+    throw error;
   }
-  return request;
 }
 
 export function* watchUpload() {
@@ -548,6 +555,10 @@ export function* uploadFile(api, scheme, system, path, file, index) {
       type: 'DATA_FILES_SET_OPERATION_STATUS_BY_KEY',
       payload: { status: 'ERROR', key: index, operation: 'upload' },
     });
+    yield put({
+      type: 'DATA_FILES_SET_ERROR',
+      payload: { message: e.toString() },
+    });
     return 'ERR';
   }
   return 'SUCCESS';