Change: Connected archive FE to BE with correct filters

Author: Siddharth-Khattar

api/nginx.conf

@@ -61,7 +61,7 @@ server {
         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
         add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
 
-        proxy_pass          http://anonymization-service:8094;
+        proxy_pass          http://anonymization-service:8094/api/v1/anonymization/;
         client_max_body_size 5m;
         proxy_http_version  1.1;
         proxy_set_header    Host              $host;

client/src/components/DocumentArchive.tsx

@@ -1,18 +1,21 @@
 // ABOUTME: Document archive component that displays user's documents from backend API
 // ABOUTME: Includes filtering, loading states, and proper error handling for document management
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import DocumentStatusFilter from '@/components/DocumentStatusFilter';
 import { fetchDocuments } from '@/services/documentService';
+import { fetchAnonymizations } from '@/services/anonymizeService';
 import { Document } from '@/types/document';
+import { ArchiveDocument } from '@/types/archiveDocument';
+
 import { useToast } from '@/hooks/use-toast';
 
-type DocumentStatus = 'All' | 'Anonymized' | 'Original' | 'Summarized';
+type DocumentStatus = 'All' | 'Anonymized' | 'Original';
 
 const DocumentArchive = () => {
   const [selectedStatus, setSelectedStatus] = useState<DocumentStatus>('All');
-  const [documents, setDocuments] = useState<Document[]>([]);
+  const [documents, setDocuments] = useState<ArchiveDocument[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
@@ -22,8 +25,56 @@ const DocumentArchive = () => {
       try {
         setLoading(true);
         setError(null);
-        const fetchedDocuments = await fetchDocuments();
-        setDocuments(fetchedDocuments);
+
+        // Fetch both original documents and anonymizations in parallel
+        const [originalDocs, anonymizations] = await Promise.all([
+          fetchDocuments(),
+          fetchAnonymizations().catch((err) => {
+            console.warn('Failed to fetch anonymizations:', err);
+            // Show a warning toast but don't fail the entire operation
+            toast({
+              title: 'Warning',
+              description:
+                'Could not load anonymized documents. Showing original documents only.',
+              variant: 'default',
+            });
+            return [];
+          }),
+        ]);
+
+        // Convert original documents to archive format
+        const archiveOriginals: ArchiveDocument[] = originalDocs.map((doc) => ({
+          id: doc.id,
+          fileName: doc.fileName,
+          uploadDate: doc.uploadDate,
+          status: 'Original' as const,
+          documentType: 'original' as const,
+          documentText: doc.documentText,
+        }));
+
+        // Convert anonymizations to archive format
+        const archiveAnonymized: ArchiveDocument[] = anonymizations.map(
+          (anon) => ({
+            id: anon.id,
+            fileName: `${getOriginalFileName(
+              originalDocs,
+              anon.documentId
+            )} (Anonymized)`,
+            uploadDate: anon.created,
+            status: 'Anonymized' as const,
+            documentType: 'anonymized' as const,
+            originalDocumentId: anon.documentId,
+            documentText: anon.anonymizedText,
+          })
+        );
+
+        // Combine and sort by upload date (newest first)
+        const allDocuments = [...archiveOriginals, ...archiveAnonymized].sort(
+          (a, b) =>
+            new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime()
+        );
+
+        setDocuments(allDocuments);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'Failed to load documents';
@@ -41,6 +92,15 @@ const DocumentArchive = () => {
     loadDocuments();
   }, [toast]);
 
+  // Helper function to get original document filename for anonymized documents
+  const getOriginalFileName = (
+    originalDocs: Document[],
+    documentId: string
+  ): string => {
+    const originalDoc = originalDocs.find((doc) => doc.id === documentId);
+    return originalDoc?.fileName || 'Unknown Document';
+  };
+
   const formatDate = (dateString: string) => {
     try {
       return new Date(dateString).toLocaleDateString();
@@ -49,6 +109,8 @@ const DocumentArchive = () => {
     }
   };
 
+  // Filter documents based on selected status
+
   const filteredDocuments =
     selectedStatus === 'All'
       ? documents
@@ -112,17 +174,23 @@ const DocumentArchive = () => {
                   className={`px-2 py-0.5 rounded-full transition-all duration-200 ${
                     doc.status === 'Anonymized'
                       ? 'bg-green-100 text-green-800 group-hover:bg-green-200'
-                      : doc.status === 'Summarized'
-                      ? 'bg-blue-100 text-blue-800 group-hover:bg-blue-200'
                       : 'bg-gray-100 text-gray-800 group-hover:bg-gray-200'
                   }`}
                 >
                   {doc.status}
                 </span>
               </div>
-              <Link to={`/editor?id=${doc.id}`}>
+              <Link
+                to={`/editor?id=${
+                  doc.documentType === 'anonymized'
+                    ? doc.originalDocumentId
+                    : doc.id
+                }`}
+              >
                 <Button className="w-full transition-all duration-200 group-hover:bg-primary/90">
-                  Open Document
+                  {doc.documentType === 'anonymized'
+                    ? 'View Anonymized'
+                    : 'Open Document'}
                 </Button>
               </Link>
             </div>
@@ -136,7 +204,7 @@ const DocumentArchive = () => {
               ? "You haven't uploaded any documents yet."
               : `No ${selectedStatus.toLowerCase()} documents found.`}
           </p>
-          <Link to="/">
+          <Link to="/home">
             <Button>Upload a document</Button>
           </Link>
         </div>

client/src/components/DocumentEditor.tsx

@@ -1,20 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useAnonymization } from '@/hooks/useAnonymization';
 import { useSummarization } from '@/hooks/useSummarization';
 import AnonymizationPanel from './AnonymizationPanel';
 import SummarizationPanel from './SummarizationPanel';
 import EditAnonymizedDialog from './EditAnonymizedDialog';
 import { DocumentContent } from '@/types/documentContent';
-import { toast } from "sonner";
-
+import { toast } from 'sonner';
 
 type DocumentEditorProps = {
   documentId?: string | null;
 };
 
 const DocumentEditor = ({ documentId }: DocumentEditorProps) => {
-
   const [activeTab, setActiveTab] = useState('anonymize');
   const [documentData, setDocumentData] = useState<DocumentContent>();
   const [selectedText, setSelectedText] = useState<string>('');
@@ -28,7 +26,6 @@ const DocumentEditor = ({ documentId }: DocumentEditorProps) => {
   const [isAnonymized, setIsAnonymized] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
 
-
   // Custom hooks
   const {
     anonymizationLevel,
@@ -39,7 +36,14 @@ const DocumentEditor = ({ documentId }: DocumentEditorProps) => {
     handleSaveEdit,
     handleDownload,
     handleSave,
-  } = useAnonymization(documentData, setDocumentData, isAnonymized, setIsAnonymized, isSaved, setIsSaved);
+  } = useAnonymization(
+    documentData,
+    setDocumentData,
+    isAnonymized,
+    setIsAnonymized,
+    isSaved,
+    setIsSaved
+  );
 
   const {
     summarizationLevel,
@@ -48,30 +52,28 @@ const DocumentEditor = ({ documentId }: DocumentEditorProps) => {
     handleSummarizationLevel,
     handleGenerateSummary,
     getSummarizationLevelDescription,
-    handleDownloadSummary
+    handleDownloadSummary,
   } = useSummarization(documentData, setDocumentData);
 
   useEffect(() => {
     if (documentData) {
-      console.log("Current documentData:", documentData);
+      console.log('Current documentData:', documentData);
     }
   }, [documentData]);
 
-
   useEffect(() => {
     console.log('Fetching document with ID:', documentId);
 
     const documentInfo = sessionStorage.getItem('currentDocument');
     if (documentInfo) {
       const parsedInfo = JSON.parse(documentInfo);
       const realContent: DocumentContent = {
-        title: (parsedInfo.fileName?.replace(/\.pdf$/i, "") || "Untitled"),
-        paragraph: parsedInfo.documentText || "",
+        title: parsedInfo.fileName?.replace(/\.pdf$/i, '') || 'Untitled',
+        paragraph: parsedInfo.documentText || '',
         sensitive: [],
-        summary: ""
+        summary: '',
       };
 
-
       setDocumentData(realContent);
     }
   }, [documentId]);
@@ -126,7 +128,7 @@ const DocumentEditor = ({ documentId }: DocumentEditorProps) => {
         value={activeTab}
         onValueChange={(value) => {
           if (value === 'summarize' && !isAnonymized) {
-            toast.warning("Please anonymize your document before summarizing.");
+            toast.warning('Please anonymize your document before summarizing.');
             return;
           }
           setActiveTab(value);
@@ -136,7 +138,11 @@ const DocumentEditor = ({ documentId }: DocumentEditorProps) => {
           <TabsTrigger value="anonymize">Anonymize</TabsTrigger>
           <TabsTrigger
             value="summarize"
-            className={!isAnonymized ? 'pointer-events-auto text-muted-foreground opacity-50' : ''}
+            className={
+              !isAnonymized
+                ? 'pointer-events-auto text-muted-foreground opacity-50'
+                : ''
+            }
           >
             Summarize
           </TabsTrigger>

client/src/components/DocumentStatusFilter.tsx

@@ -1,16 +1,18 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
 
-import React from "react";
-import { Button } from "@/components/ui/button";
-
-type DocumentStatus = "All" | "Anonymized" | "Original" | "Summarized";
+type DocumentStatus = 'All' | 'Anonymized' | 'Original';
 
 interface DocumentStatusFilterProps {
   selectedStatus: DocumentStatus;
   onStatusChange: (status: DocumentStatus) => void;
 }
 
-const DocumentStatusFilter = ({ selectedStatus, onStatusChange }: DocumentStatusFilterProps) => {
-  const statuses: DocumentStatus[] = ["All", "Anonymized", "Original", "Summarized"];
+const DocumentStatusFilter = ({
+  selectedStatus,
+  onStatusChange,
+}: DocumentStatusFilterProps) => {
+  const statuses: DocumentStatus[] = ['All', 'Original', 'Anonymized'];
 
   return (
     <div className="flex flex-wrap gap-2 mb-6">
@@ -20,7 +22,7 @@ const DocumentStatusFilter = ({ selectedStatus, onStatusChange }: DocumentStatus
       {statuses.map((status) => (
         <Button
           key={status}
-          variant={selectedStatus === status ? "default" : "outline"}
+          variant={selectedStatus === status ? 'default' : 'outline'}
           size="sm"
           onClick={() => onStatusChange(status)}
           className="transition-all duration-200"