Docmuncher UI updates (#524)

* Update indexing to PDF in UI

* Fix PDF create card to generate card wording

* Switch status open to zustand

* Add open status button to pdf import modal

* change message when PDF upload successful

* Nahh change text again

* Make upload-pdf trigger status-fetch using tanstack

* Modify to align with PR comments

Author: ziakhan04

admin_app/package-lock.json

@@ -16,6 +16,7 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.5",
+    "@tanstack/react-query": "^5.72.1",
     "axios": "^1.7.7",
     "date-fns": "^3.6.0",
     "jwt-decode": "^4.0.0",
@@ -27,7 +28,8 @@
     "react-datepicker": "^8.0.0",
     "react-dom": "^18",
     "react-dropzone": "^14.3.8",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/google.accounts": "^0.0.14",

admin_app/package.json

@@ -1,5 +1,6 @@
 import api, { handleApiError } from "@/utils/api";
-
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@/utils/auth";
 type IndexingStatusResponse = boolean | { detail: string };
 
 export interface DocIndexingTask {
@@ -31,6 +32,11 @@ interface ContentBody {
   content_metadata: Record<string, unknown>;
 }
 
+interface DocumentUploadResponse {
+  status: number;
+  detail: any;
+}
+
 const formatDate = (dateString: string) => {
   if (!dateString) return "—";
   const date = new Date(dateString);
@@ -191,40 +197,51 @@ const deleteTag = async (tag_id: number, token: string) => {
   }
 };
 
-const getIndexingStatus = async (
-  token: string,
-): Promise<IndexingStatusResponse | undefined> => {
-  try {
-    const response = await api.get("/docmuncher/status/is_job_running", {
-      headers: { Authorization: `Bearer ${token}` },
-    });
-
-    if (response.status === 200) {
-      return response.data;
-    } else {
-      throw new Error("Unexpected response status");
-    }
-  } catch (error) {
-    let errorMessage = "Error fetching indexing status";
-    handleApiError(error, errorMessage);
-  }
+const useGetIndexingStatus = () => {
+  const { token } = useAuth();
+  return useQuery<IndexingStatusResponse>({
+    queryKey: ["indexingStatus"],
+    queryFn: async () => {
+      try {
+        const response = await api.get("/docmuncher/status/is_job_running", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        return response.data;
+      } catch (error) {
+        const errorMessage = "Error fetching indexing status";
+        handleApiError(error, errorMessage);
+        throw error;
+      }
+    },
+    enabled: !!token,
+    refetchInterval: (query) => (query.state.data === true ? 3000 : false),
+    refetchIntervalInBackground: true,
+  });
 };
 
-const postDocumentToIndex = async (file: File, token: string) => {
-  const formData = new FormData();
-  formData.append("file", file);
+const usePostDocumentToIndex = (token: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<DocumentUploadResponse, Error, { file: File }>({
+    mutationFn: async ({ file }) => {
+      const formData = new FormData();
+      formData.append("file", file);
 
-  try {
-    const response = await api.post("/docmuncher/upload", formData, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "multipart/form-data",
-      },
-    });
-    return { status: response.status, detail: response.data };
-  } catch (error) {
-    throw new Error("Error indexing document");
-  }
+      try {
+        const response = await api.post("/docmuncher/upload", formData, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        });
+        return { status: response.status, detail: response.data };
+      } catch (error) {
+        throw new Error("Error indexing document");
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["indexingStatus"] });
+    },
+  });
 };
 
 const getDocIndexingStatusData = async (
@@ -272,7 +289,7 @@ export {
   createTag,
   getTagList,
   deleteTag,
-  getIndexingStatus,
-  postDocumentToIndex,
+  useGetIndexingStatus,
+  usePostDocumentToIndex,
   getDocIndexingStatusData,
 };

admin_app/src/app/content/api.ts

@@ -13,8 +13,9 @@ import {
 import { useDropzone } from "react-dropzone";
 import { Layout } from "@/components/Layout";
 import { LoadingButton } from "@mui/lab";
-import { postDocumentToIndex } from "../api";
+import { usePostDocumentToIndex } from "../api";
 import { useAuth } from "@/utils/auth";
+import { useShowIndexingStatusStore } from "../store/indexingStatusStore";
 
 interface CustomError {
   type: string;
@@ -31,11 +32,13 @@ export const ImportFromPDFModal: React.FC<ImportFromPDFModalProps> = ({
   onClose,
 }) => {
   const { token } = useAuth();
+  const { setIsOpen: setOpenIndexHistoryModal } = useShowIndexingStatusStore();
   const [files, setFiles] = useState<File[]>([]);
   const [error, setError] = useState<string>("");
   const [loading, setLoading] = useState(false);
   const [importErrorMessages, setImportErrorMessages] = useState<string[]>([]);
   const [importSuccess, setImportSuccess] = useState<boolean | null>(null);
+  const { mutate: postDocumentToIndex } = usePostDocumentToIndex(token!);
 
   useEffect(() => {
     if (!open) {
@@ -80,59 +83,36 @@ export const ImportFromPDFModal: React.FC<ImportFromPDFModalProps> = ({
       setImportErrorMessages([]);
       // add artificial delay to show loading spinner (for UX)
       await new Promise((resolve) => setTimeout(resolve, 500));
-      try {
-        const response = await postDocumentToIndex(files[0], token!);
-        if (response.status === 200) {
-          setImportSuccess(true);
-          setFiles([]);
-        } else {
-          console.error("Error uploading file:", response.detail);
-          if (response.detail.errors) {
-            const errorDescriptions = response.detail.errors.map(
-              (error: CustomError) => error.description,
-            );
-            setImportErrorMessages(errorDescriptions);
-          } else {
+      postDocumentToIndex(
+        { file: files[0] },
+        {
+          onSuccess: () => {
+            setImportSuccess(true);
+            setFiles([]);
+          },
+          onError: (error) => {
             setImportErrorMessages(["An unknown error occurred"]);
-          }
-        }
-      } catch (error) {
-        console.error("Error during import:", error);
-        setImportErrorMessages([
-          "An unexpected error occurred. Please try again later.",
-        ]);
-      } finally {
-        setLoading(false);
-        setFiles([]);
-      }
+          },
+          onSettled: () => {
+            setLoading(false);
+          },
+        },
+      );
     } else {
-      console.error("No file selected");
       setImportErrorMessages(["No file selected"]);
     }
   };
 
-  // modal auto-close after successful import
-  useEffect(() => {
-    let timerId: NodeJS.Timeout;
-    if (importSuccess) {
-      timerId = setTimeout(() => {
-        onClose();
-        window.location.reload();
-      }, 1000);
-    }
-    return () => clearTimeout(timerId);
-  }, [importSuccess]);
-
   return (
     <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
       <DialogTitle id="import-pdf-dialog-title">
-        Import New Content From PDF
+        Generate New Content From PDF
       </DialogTitle>
       <DialogContent>
         <DialogContentText id="import-pdf-dialog-description">
           <Typography>
-            You can use this feature to import new contents from PDF files into AAQ. The
-            system will automatically create cards from file content.
+            You can use this feature to generate new contents from PDF files into AAQ.
+            The system will automatically create cards from file content.
           </Typography>
           <p>
             ⚠️ Maximum file size is 100MB.
@@ -203,23 +183,45 @@ export const ImportFromPDFModal: React.FC<ImportFromPDFModalProps> = ({
         {importSuccess && (
           <>
             <Layout.Spacer multiplier={2} />
-            <Alert variant="standard" severity="success">
-              File uploaded successfully!
+            <Alert
+              variant="standard"
+              severity="success"
+              action={
+                <Box sx={{ display: "flex", gap: 1 }}>
+                  <Button
+                    variant="outlined"
+                    color="inherit"
+                    size="small"
+                    onClick={() => {
+                      onClose();
+                      setOpenIndexHistoryModal(true);
+                    }}
+                  >
+                    Check Status
+                  </Button>
+                </Box>
+              }
+            >
+              Card generation task successfully started!
             </Alert>
           </>
         )}
       </DialogContent>
       <DialogActions sx={{ marginBottom: 1, marginRight: 1 }}>
         <Button onClick={onClose}>Cancel</Button>
-        <LoadingButton
-          variant="contained"
-          disabled={files.length === 0 || loading || !!error}
-          autoFocus
-          loading={loading}
-          onClick={handleSubmit}
-        >
-          {importSuccess ? "Imported" : "Import"}
-        </LoadingButton>
+        {!importSuccess && (
+          <>
+            <LoadingButton
+              variant="contained"
+              disabled={files.length === 0 || loading || !!error}
+              autoFocus
+              loading={loading}
+              onClick={handleSubmit}
+            >
+              Import
+            </LoadingButton>
+          </>
+        )}
       </DialogActions>
     </Dialog>
   );