Fix: Mergekonflikt bereinigt & Wort-Highlighting im PDF integriert

project/frontend/src/components/pdfViewer.tsx

@@ -1,162 +1,70 @@
-<<<<<<< HEAD
+import { useEffect, useRef, useState, useCallback } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
-import { useState, useRef, useEffect, useCallback } from 'react';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
-import { Box, IconButton } from '@mui/material';
-import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
-import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
-import testPDF from '/example.pdf';
-
-
-  
-
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-    "pdfjs-dist/build/pdf.worker.min.mjs",
-    import.meta.url,
-).toString();
-
-type Props = {
-    selectedLabel: string | null;
-  };
-  
-  export default function PDFViewer({ selectedLabel }: Props) {
-    const [numPages, setNumPages] = useState<number | null>(null);
-    const [pageNumber, setPageNumber] = useState(1);
-    const [containerWidth, setContainerWidth] = useState<number | null>(null);
-=======
-import { useEffect, useRef, useState } from "react";
-import { Document, Page } from "react-pdf";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
 import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft";
 import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
 import { Box, IconButton } from "@mui/material";
 
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url
+).toString();
+
 interface PDFViewerProps {
   pitchBookId: string;
+  currentPage?: number;
 }
-export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
+
+export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps) {
   const [numPages, setNumPages] = useState<number | null>(null);
-	const [pageNumber, setPageNumber] = useState(1);
+  const [pageNumber, setPageNumber] = useState(currentPage || 1);
   const [containerWidth, setContainerWidth] = useState<number | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const [highlightLabels, setHighlightLabels] = useState<string[]>([]);
+
   const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
     setNumPages(numPages);
   };
->>>>>>> origin/main
 
+  // Aktuelle Containergröße berechnen
   useEffect(() => {
     const updateWidth = () => {
       if (containerRef.current) {
         setContainerWidth(containerRef.current.offsetWidth);
       }
     };
-
     updateWidth();
     window.addEventListener("resize", updateWidth);
     return () => window.removeEventListener("resize", updateWidth);
   }, []);
 
-<<<<<<< HEAD
+  // Seite ändern, wenn prop sich ändert
-    const [highlightLabels, setHighlightLabels] = useState<string[]>([]);
+  useEffect(() => {
+    if (currentPage && currentPage !== pageNumber) {
+      setPageNumber(currentPage);
+    }
+  }, [currentPage]);
+
+  // Highlight-Logik
+  useEffect(() => {
+    setHighlightLabels(["LTV", "Fondsmanager", "Risikoprofil"]);
+  }, []);
 
-    // Funktion zum Einfärben von Text
   function highlightPattern(text: string, patterns: string[]) {
     for (const word of patterns) {
-            const regex = new RegExp(`(${word})`, 'gi');
+      const regex = new RegExp(`(${word})`, "gi");
-            text = text.replace(regex, '<mark>$1</mark>');
+      text = text.replace(regex, "<mark>$1</mark>");
     }
     return text;
   }
 
-    // TextRenderer für PDF 
   const textRenderer = useCallback(
     (textItem: { str: string }) => highlightPattern(textItem.str, highlightLabels),
     [highlightLabels]
   );
 
-    // Beispielanzatz zum Einfärben von Text
-    useEffect(() => {
-        setHighlightLabels(['LTV']);
-    }, []);
-
-
-    useEffect(() => {
-        const updateWidth = () => {
-            if (containerRef.current) {
-                setContainerWidth(containerRef.current.offsetWidth);
-            }
-        };
-
-        updateWidth();
-        window.addEventListener('resize', updateWidth);
-        return () => window.removeEventListener('resize', updateWidth);
-    }, []);
-
-    return (
-        <Box
-            display="flex"
-            flexDirection="column"
-            justifyContent="center"
-            alignItems="center"
-            width="100%"
-            height="100%"
-            p={2}
-        >
-            <Box
-                ref={containerRef}
-                sx={{
-                    width: '100%',
-                    maxHeight: '90vh',
-                    overflow: 'auto',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}
-            >
-                <Document
-                file={testPDF}
-                onLoadSuccess={onDocumentLoadSuccess}
-                onLoadError={(error) => console.error('Fehler beim Laden:', error)}
-                onSourceError={(error) => console.error('Ungültige PDF:', error)}
-                >
-                {containerWidth && (
-                    <Box position="relative">
-                    <Page
-                        pageNumber={pageNumber}
-                        width={containerWidth * 0.8}
-                        customTextRenderer={textRenderer}
-                    />
-
-                    </Box>
-                )}
-                </Document>
-
-            </Box>
-            <Box
-                mt={2}
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                gap={1}
-            >
-                <IconButton disabled={pageNumber <= 1} onClick={() => setPageNumber(p => p - 1)}>
-                    <ArrowCircleLeftIcon fontSize="large" />
-                </IconButton>
-                <span>{pageNumber} / {numPages}</span>
-                <IconButton
-                    disabled={pageNumber >= (numPages || 1)}
-                    onClick={() => setPageNumber(p => p + 1)}
-                >
-                    <ArrowCircleRightIcon fontSize="large" />
-                </IconButton>
-            </Box>
-        </Box>
-    );
-}
-=======
   return (
     <Box
       display="flex"
@@ -187,7 +95,11 @@ export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
           onSourceError={(error) => console.error("Ungültige PDF:", error)}
         >
           {containerWidth && (
-						<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
+            <Page
+              pageNumber={pageNumber}
+              width={containerWidth * 0.8}
+              customTextRenderer={textRenderer}
+            />
           )}
         </Document>
       </Box>
@@ -217,4 +129,3 @@ export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
     </Box>
   );
 }
->>>>>>> origin/main