Fetch documents related to current org (#31)

Author: mpospelova

client/src/components/FileManager/ContentArea.tsx

@@ -2,14 +2,15 @@ import React, { useEffect, useState } from "react";
 import { X, FileText, Clock, Layers } from "lucide-react";
 import { Button } from "../ui/button";
 import { OrganizationProfile, useOrganization } from "@clerk/clerk-react";
-import { mockSlideDecks } from "../../models";
-import type { SlideDeck } from "../../models";
 import { Link } from "@tanstack/react-router";
+import { useDocuments } from "../../hooks/useApi";
 
 const ContentArea: React.FC = () => {
   const { organization } = useOrganization();
   const [showOrgEditPanel, setShowOrgEditPanel] = useState(false);
-  const [slideDecks, setSlideDecks] = useState<SlideDeck[]>([]);
+  
+  // Fetch documents for the current organization
+  const { data: documents, isLoading: documentsLoading, error: documentsError } = useDocuments(organization?.id);
 
   useEffect(() => {
     const handleToggleOrgEdit = () => {
@@ -23,22 +24,6 @@ const ContentArea: React.FC = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (organization?.id) {
-      // In a real app, we would fetch slides from an API using the organization ID
-      
-      // This is the filtering logic that would be used in a real app
-      // const orgSlides = mockSlideDecks.filter(deck => deck.organizationId === organization.id);
-      
-      // For now, show all slides for every organization
-      const orgSlides = mockSlideDecks;
-      
-      setSlideDecks(orgSlides);
-    } else {
-      setSlideDecks([]);
-    }
-  }, [organization?.id]);
-
   // Format date to relative time (e.g., "2 days ago")
   const formatRelativeTime = (dateString: string): string => {
     const date = new Date(dateString);
@@ -73,35 +58,53 @@ const ContentArea: React.FC = () => {
           <div className="h-full">
             <h2 className="text-xl font-semibold mb-6">{organization.name} Materials</h2>
 
-            {slideDecks.length > 0 ? (
+            {documentsLoading ? (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {slideDecks.map((deck) => (
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="bg-white rounded-lg shadow animate-pulse">
+                    <div className="p-4">
+                      <div className="h-4 bg-gray-200 rounded mb-2"></div>
+                      <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : documentsError ? (
+              <div className="flex flex-col items-center justify-center h-64 bg-white rounded-lg p-8 text-center">
+                <FileText className="h-16 w-16 text-red-300 mb-4" />
+                <h3 className="text-lg font-medium text-gray-800 mb-2">Error loading documents</h3>
+                <p className="text-gray-500">Please try again later</p>
+              </div>
+            ) : documents && documents.length > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {documents.map((doc) => (
                   <div 
-                    key={deck.id} 
+                    key={doc.id} 
                     className="bg-white rounded-lg shadow hover:shadow-md transition-shadow overflow-hidden flex flex-col cursor-pointer"
                   >
                     <div className="p-4 flex-1 flex flex-col">
                       <div className="flex items-center mb-3">
                         <FileText className="h-5 w-5 text-blue-500 mr-2" />
-                        <h3 className="font-medium text-lg text-gray-800">{deck.title}</h3>
+                        <h3 className="font-medium text-lg text-gray-800">{doc.name}</h3>
                       </div>
-                      <div className="mt-2 flex items-center text-sm text-gray-500 space-x-4">
+                      {doc.description && (
+                        <p className="text-sm text-gray-600 mb-2">{doc.description}</p>
+                      )}
+                      <div className="mt-auto flex items-center text-sm text-gray-500 space-x-4">
                         <div className="flex items-center">
                           <Clock className="h-4 w-4 mr-1" />
-                          <span>{formatRelativeTime(deck.uploadedAt)}</span>
+                          <span>{formatRelativeTime(doc.createdAt)}</span>
+                        </div>
+                        <div className="flex items-center">
+                          <Layers className="h-4 w-4 mr-1" />
+                          <span>{doc.chunkCount} chunks</span>
                         </div>
-                        {deck.slideCount && (
-                          <div className="flex items-center">
-                            <Layers className="h-4 w-4 mr-1" />
-                            <span>{deck.slideCount} slides</span>
-                          </div>
-                        )}
                       </div>
                     </div>
                     <div className="px-4 py-3 bg-gray-50 border-t border-gray-100">
-                      <Link to="/slide/$slideId" params={{ slideId: deck.id }}>
+                      <Link to="/slide/$slideId" params={{ slideId: doc.id.toString() }}>
                         <Button variant="ghost" size="sm" className="text-blue-600 w-full">
-                          View
+                          View Document
                         </Button>
                       </Link>
                     </div>
@@ -111,7 +114,7 @@ const ContentArea: React.FC = () => {
             ) : (
               <div className="flex flex-col items-center justify-center h-64 bg-white rounded-lg p-8 text-center">
                 <FileText className="h-16 w-16 text-gray-300 mb-4" />
-                <h3 className="text-lg font-medium text-gray-800 mb-2">No slide decks yet</h3>
+                <h3 className="text-lg font-medium text-gray-800 mb-2">No documents yet</h3>
                 <p className="text-gray-500">Upload materials to get started</p>
               </div>
             )}

client/src/hooks/useApi.ts

@@ -66,8 +66,11 @@ const api = {
   },
 
   // Document service endpoints
-  getDocuments: async (): Promise<Document[]> => {
-    const response = await fetch(`${API_BASE}/api/documents`);
+  getDocuments: async (organizationId?: string): Promise<Document[]> => {
+    const url = organizationId 
+      ? `${API_BASE}/api/documents?organizationId=${encodeURIComponent(organizationId)}`
+      : `${API_BASE}/api/documents`;
+    const response = await fetch(url);
     if (!response.ok) throw new Error('Failed to fetch documents');
     return response.json();
   },
@@ -173,10 +176,10 @@ export function useServiceApiDocs(serviceName: string) {
 }
 
 // Document hooks
-export function useDocuments() {
+export function useDocuments(organizationId?: string) {
   return useQuery({
-    queryKey: ['documents'],
-    queryFn: api.getDocuments,
+    queryKey: ['documents', organizationId],
+    queryFn: () => api.getDocuments(organizationId),
     staleTime: 30000, // 30 seconds
   });
 }

server/document-service/src/main/java/de/tum/team_sigma/document_service/controller/DocumentController.java

@@ -79,18 +79,27 @@ public ResponseEntity<DocumentResponse> uploadDocument(
     }
 
     @GetMapping
-    @Operation(summary = "Get all documents", description = "Retrieve a list of all documents")
+    @Operation(summary = "Get all documents", description = "Retrieve a list of all documents, optionally filtered by organization")
     @ApiResponses(value = {
             @ApiResponse(responseCode = "200", description = "Documents retrieved successfully",
                     content = @Content(schema = @Schema(implementation = DocumentResponse.class))),
             @ApiResponse(responseCode = "500", description = "Internal server error")
     })
-    public ResponseEntity<List<DocumentResponse>> getAllDocuments() {
+    public ResponseEntity<List<DocumentResponse>> getAllDocuments(
+            @Parameter(description = "Organization ID to filter documents")
+            @RequestParam(value = "organizationId", required = false) String organizationId) {
         try {
-            List<DocumentResponse> documents = documentService.getAllDocuments();
+            List<DocumentResponse> documents;
+            if (organizationId != null && !organizationId.trim().isEmpty()) {
+                documents = documentService.getDocumentsByOrganization(organizationId);
+                logger.info("Retrieved {} documents for organization: {}", documents.size(), organizationId);
+            } else {
+                documents = documentService.getAllDocuments();
+                logger.info("Retrieved {} documents (no organization filter)", documents.size());
+            }
             return ResponseEntity.ok(documents);
         } catch (Exception e) {
-            logger.error("Failed to get all documents", e);
+            logger.error("Failed to get documents", e);
             return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
         }
     }

server/document-service/src/main/java/de/tum/team_sigma/document_service/repository/DocumentRepository.java

@@ -18,6 +18,8 @@ public interface DocumentRepository extends JpaRepository<Document, Long> {
 
     List<Document> findByContentType(String contentType);
 
+    List<Document> findByOrganizationId(String organizationId);
+    
     @Query("SELECT d FROM Document d LEFT JOIN FETCH d.chunks WHERE d.id = :id")
     Optional<Document> findByIdWithChunks(@Param("id") Long id);
 

server/document-service/src/main/java/de/tum/team_sigma/document_service/service/DocumentService.java

@@ -178,6 +178,14 @@ public List<DocumentResponse> getAllDocuments() {
             .collect(Collectors.toList());
     }
 
+    @Transactional(readOnly = true)
+    public List<DocumentResponse> getDocumentsByOrganization(String organizationId) {
+        logger.info("Fetching documents for organization: {}", organizationId);
+        return documentRepository.findByOrganizationId(organizationId).stream()
+            .map(DocumentResponse::new)
+            .collect(Collectors.toList());
+    }
+    
     @Transactional(readOnly = true)
     public DocumentResponse getDocumentById(Long id) {
         Document document = documentRepository.findByIdWithChunks(id)