Fix file size too large error and refactor API toast messaging

assets/js/Components/Admin/AdminApp.js

@@ -3,14 +3,14 @@ import AdminHeader from "./AdminHeader";
 import AdminDashboard from "./AdminDashboard";
 import CoursesPage from "./CoursesPage";
 import ReportsPage from "./ReportsPage";
-import Api from "../../Services/Api";
 import MessageTray from "../Widgets/MessageTray";
 import AdminFilters from "../Admin/AdminFilters";
 import ProgressIcon from "../Icons/ProgressIcon";
 
 import { ISSUE_FILTER } from "../../Services/Settings";
 
 import "../../../css/udoit4-theme.css";
+import { api } from "../../Services/Api";
 
 export default function AdminApp(initialData) {
   // If there are multiple accounts available, the first account is the selected accountId
@@ -65,7 +65,6 @@ export default function AdminApp(initialData) {
   const loadCourses = (filters) => {
     setLoadingCourses(true);
 
-    const api = new Api(instanceInfo);
     api
       .getAdminCourses(filters)
       .then((response) => response.json())
@@ -142,6 +141,11 @@ export default function AdminApp(initialData) {
     setCourses(tempCourses);
   };
 
+
+  useEffect(() => {
+    api.setInstanceInfo(instanceInfo);
+  }, [instanceInfo]);
+
   return (
     <div
       id="app-container"

assets/js/Components/Admin/CoursesPage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import SortableTable from "../Widgets/SortableTable";
-import Api from "../../Services/Api";
+import { api } from "../../Services/Api";
 import SummaryIcon from "../Icons/SummaryIcon";
 import ReportIcon from "../Icons/ReportIcon";
 
@@ -228,8 +228,6 @@ export default function CoursePage({
   };
 
   const handleScanClick = (course) => {
-    let api = new Api(instanceInfo);
-
     // For unscanned courses, course.id will be the LMS course ID (string/number)
     // and hasReport will be false. We need to create the course in UDOIT first.
     // For scanned courses, course.id is the UDOIT database ID (number).
@@ -342,7 +340,6 @@ export default function CoursePage({
 
   const checkForReport = (course) => {
     const newReportInterval = 5000;
-    let api = new Api(instanceInfo);
     const courseId = course.udoitId || course.id;
     const originalId = course.originalId; // Save the original ID for removal
 

assets/js/Components/App.js

@@ -8,10 +8,10 @@ import FixIssuesPage from "./FixIssuesPage";
 import ReviewFilesPage from "./ReviewFilesPage";
 import ReportsPage from "./ReportsPage";
 import SettingsPage from "./SettingsPage";
-import Api from "../Services/Api";
 import MessageTray from "./Widgets/MessageTray";
 import { analyzeReport } from "../Services/Report";
 import { ISSUE_STATE } from "../Services/Constants";
+import { api } from "../Services/Api";
 
 export default function App(initialData) {
   const [nextMessage, setNextMessage] = useState("");
@@ -51,12 +51,10 @@ export default function App(initialData) {
   );
 
   const scanCourse = useCallback(() => {
-    let api = new Api(instanceInfo);
     return api.scanCourse(instanceInfo.course.id);
   }, [instanceInfo]);
 
   const fullRescan = useCallback(() => {
-    let api = new Api(instanceInfo);
     return api.fullRescan(instanceInfo.course.id);
   }, [instanceInfo]);
 
@@ -84,7 +82,6 @@ export default function App(initialData) {
     const oldPreferences = structuredClone(preferences);
     setPreferences((old) => ({ ...old, ...newUserPreferences }));
 
-    let api = new Api(instanceInfo);
     api
       .updatePreferences(newUserPreferences)
       .then((response) => response.json())
@@ -162,7 +159,6 @@ export default function App(initialData) {
     const tempReport = analyzeReport(rawReport, ISSUE_STATE);
     setReport(tempReport);
 
-    let api = new Api(instanceInfo);
     api
       .setReportData(tempReport.id, {
         scanCounts: tempReport.scanCounts,
@@ -267,6 +263,9 @@ export default function App(initialData) {
       case 404:
         errorMessage = t("msg.sync.error.not_found");
         break;
+      case 413:
+        errorMessage = t("msg.file.replace.file_size");
+        break;
       case 500:
         errorMessage = "Internal Server Error: Please try again later.";
         break;
@@ -318,7 +317,6 @@ export default function App(initialData) {
           .then((responseStr) => {
             // Check for HTTP errors before parsing JSON
             if (!responseStr.ok) {
-              processServerError(responseStr);
               return null;
             }
             return responseStr.json();
@@ -371,7 +369,6 @@ export default function App(initialData) {
         .then((responseStr) => {
           // Check for HTTP errors before parsing JSON
           if (!responseStr.ok) {
-            processServerError(responseStr);
             return null;
           }
           return responseStr.json();
@@ -387,6 +384,22 @@ export default function App(initialData) {
     }
   }, [initialData.report, scanCourse]);
 
+  useEffect(() => {
+    const processServerResponse = (response) => {
+      if (!response.ok) processServerError(response);
+    }
+
+    api.addResponseListener(processServerResponse);
+
+    return () => {
+      api.removeResponseListener(processServerResponse);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    api.setInstanceInfo(instanceInfo);
+  }, [instanceInfo]);
+
   return (
     <div
       id="app-container"
@@ -446,7 +459,6 @@ export default function App(initialData) {
                 handleNavigation={handleNavigation}
                 sessionIssues={sessionIssues}
                 updateSessionIssue={updateSessionIssue}
-                processServerError={processServerError}
                 setModalActive={setModalActive}
               />
             )}
@@ -464,7 +476,6 @@ export default function App(initialData) {
                 handleNavigation={handleNavigation}
                 sessionFiles={sessionFiles}
                 updateSessionFiles={updateSessionFiles}
-                processServerError={processServerError}
                 setModalActive={setModalActive}
               />
             )}

assets/js/Components/FixIssuesPage.js

@@ -9,10 +9,10 @@ import RightArrowIcon from './Icons/RightArrowIcon'
 import CloseIcon from './Icons/CloseIcon'
 import { formNameFromRule } from '../Services/Ufixit'
 import * as Html from '../Services/Html'
-import Api from '../Services/Api'
 
 import './FixIssuesPage.css'
 import { ISSUE_STATE, WIDGET_STATE, ISSUE_FILTER as FILTER } from '../Services/Constants'
+import { api } from '../Services/Api'
 
 /** The data for this component can be a bit confusing, so here's a breakdown:
   * - report: The main report object is generated by the scanner.
@@ -42,7 +42,6 @@ export default function FixIssuesPage({
   addMessage,
   sessionIssues,
   updateSessionIssue,
-  processServerError,
   setModalActive
 })
 {
@@ -609,13 +608,11 @@ export default function FixIssuesPage({
     activeContentItem.body = fullPageHtml
 
     // Save the updated issue using the LMS API
-    let api = new Api(instanceInfo)
     try {
       api.saveIssue(issue, fullPageHtml, markAsReviewed)
       .then((responseStr) => {
         // Check for HTTP errors before parsing JSON
           if (!responseStr.ok) {
-            processServerError(responseStr)
             updateActiveSessionIssue(issue.id, ISSUE_STATE.ERROR)
             removeItemFromBeingScanned(issue.contentItemId)
             return null
@@ -720,11 +717,9 @@ export default function FixIssuesPage({
     issue.xpath = newXpath || ''
 
     // Save the updated issue using the LMS API
-    let api = new Api(instanceInfo)
     try {
       const saveResponse = await api.saveIssue(issue, fullPageHtml, markAsReviewed)
       if(!saveResponse.ok){
-        processServerError(saveResponse)
         updateActiveSessionIssue(issue.id, ISSUE_STATE.ERROR)
         removeItemFromBeingScanned(issue.contentItemId)
         throw Error('Save returned invalid server response.')

assets/js/Components/ReportsPage.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 
-import Api from '../Services/Api'
 import ResolutionsReport from './Reports/ResolutionsReport'
 import ReportsTable from './Reports/ReportsTable'
 import IssuesTable from './Reports/IssuesTable'
@@ -13,6 +12,7 @@ import RightArrowIcon from './Icons/RightArrowIcon'
 import SortIcon from './Icons/SortIcon'
 import './ReportsPage.css'
 import { ISSUE_FILTER } from '../Services/Constants'
+import { api } from '../Services/Api'
 
 export default function ReportsPage({
   t, 
@@ -27,7 +27,6 @@ export default function ReportsPage({
   const [showTable, setShowTable] = useState(false)
 
   const getReportHistory = () => {
-    const api = new Api(instanceInfo)
     api.getReportHistory()
       .then((responseStr) => responseStr.json())
       .then((response) => {