add file processing state

Author: scott-the-programmer

src/__tests__/background.test.ts

@@ -120,6 +120,13 @@ describe("Background Script", () => {
           "Your emojis have been uploaded - please allow 20 minutes for Teams to sync",
         error: undefined,
       });
+      // Verify storage state was saved correctly
+      expect(chrome.storage.local.set).toHaveBeenCalledWith({
+        processingState: {
+          status: "Your emojis have been uploaded - please allow 20 minutes for Teams to sync",
+          type: "success"
+        }
+      });
     });
 
     it("should handle missing tokens", async () => {
@@ -152,6 +159,13 @@ describe("Background Script", () => {
         success: false,
         error: "Could not find required tokens",
       });
+      // Verify storage state was saved correctly
+      expect(chrome.storage.local.set).toHaveBeenCalledWith({
+        processingState: {
+          status: "Could not find required tokens",
+          type: "error"
+        }
+      });
     });
 
     it("should handle upload errors", async () => {
@@ -193,6 +207,59 @@ describe("Background Script", () => {
         success: false,
         error: "Upload failed",
       });
+      // Verify storage state was saved correctly
+      expect(chrome.storage.local.set).toHaveBeenCalledWith({
+        processingState: {
+          status: "Upload failed",
+          type: "error"
+        }
+      });
+    });
+
+    // Test that setting initial processing state works
+    it("should set initial processing state on file processing", async () => {
+      // Reset the mocks
+      jest.clearAllMocks();
+      
+      // Create test data
+      const mockFiles: FileDetails[] = [
+        {
+          name: "test.png",
+          size: 1024,
+          type: "image/png",
+          base64: "dGVzdA==", // test in base64
+        },
+      ];
+      
+      const mockTokens = {
+        chatsvcagg: "chat-token",
+        ic3: "ic3-token",
+        permissionsId: "permissions-id",
+      };
+      
+      // Setup a mock for uploadFiles
+      const mockUploadFiles = jest.fn().mockResolvedValue({
+        success: true,
+        status: "Test status"
+      });
+      
+      MsTeamsClient.mockImplementation(() => ({
+        uploadFiles: mockUploadFiles,
+      }));
+      
+      // Call handleFileProcessing
+      await handleFileProcessing(mockFiles, mockTokens);
+      
+      // Check if chrome.storage.local.set was called with the initial state
+      // This verifies our state storage logic works properly
+      expect(chrome.storage.local.set).toHaveBeenCalledWith(
+        expect.objectContaining({
+          processingState: expect.objectContaining({
+            status: expect.any(String),
+            type: expect.any(String),
+          }),
+        })
+      );
     });
   });
 });

src/background.ts

@@ -4,10 +4,14 @@ import { ProcessResult, FileDetails } from "./types";
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action === "processFiles") {
     const files = JSON.parse(message.files) as FileDetails[];
+    // Set initial processing state
+    chrome.storage.local.set({ processingState: { status: "Processing...", type: "processing" } });
     handleFileProcessing(files, message.tokens)
       .then(sendResponse)
       .catch((error) => {
         const errorMessage = formatErrorMessage(error);
+        // Store error state
+        chrome.storage.local.set({ processingState: { status: errorMessage, type: "error" } });
         sendResponse({ success: false, error: errorMessage });
       });
     return true;
@@ -54,7 +58,9 @@ export async function handleFileProcessing(
 ): Promise<ProcessResult> {
   try {
     if (!tokens.chatsvcagg || !tokens.ic3 || !tokens.permissionsId) {
-      throw new Error("Could not find required tokens");
+      const errorMsg = "Could not find required tokens";
+      chrome.storage.local.set({ processingState: { status: errorMsg, type: "error" } });
+      throw new Error(errorMsg);
     }
     const teams = new MsTeamsClient(
       tokens.ic3,
@@ -63,6 +69,14 @@ export async function handleFileProcessing(
     );
     const result = await teams.uploadFiles(files);
 
+    // Store processing result state
+    chrome.storage.local.set({ 
+      processingState: { 
+        status: result.status || "", 
+        type: result.success ? "success" : "error"
+      } 
+    });
+
     chrome.runtime.sendMessage({
       type: "processUpdate",
       success: result.success,
@@ -75,6 +89,9 @@ export async function handleFileProcessing(
     const errorMessage = formatErrorMessage(error);
     const errorResult = { success: false, error: errorMessage };
 
+    // Store error state
+    chrome.storage.local.set({ processingState: { status: errorMessage, type: "error" } });
+
     chrome.runtime.sendMessage({
       type: "processUpdate",
       ...errorResult,

src/popup.ts

@@ -3,6 +3,15 @@ import { ProcessResult, FileDetails } from "./types";
 
 document.addEventListener("DOMContentLoaded", async () => {
   try {
+    // Check for existing processing state
+    const state = await chrome.storage.local.get("processingState");
+    if (state.processingState) {
+      updateStatus(
+        state.processingState.status, 
+        state.processingState.type as "ready" | "success" | "error" | "processing"
+      );
+    }
+    
     const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
     const tab = tabs[0];
 
@@ -176,10 +185,20 @@ document
 chrome.runtime.onMessage.addListener(
   (message: { type: string; error: any; status: any; success: any }) => {
     if (message.type === "processUpdate") {
-      updateStatus(
-        message.error || message.status,
-        message.success ? "success" : "error",
-      );
+      const status = message.error || message.status;
+      const type = message.success ? "success" : (message.error ? "error" : "processing");
+      
+      // Update the UI
+      updateStatus(status, type as "success" | "error" | "processing");
+      
+      // Ensure we store the state in case it was sent directly from background.ts
+      // Background should be storing the state, but this is a good fallback
+      chrome.storage.local.set({ 
+        processingState: { 
+          status: status, 
+          type: type 
+        } 
+      });
     }
-  },
+  }
 );