Merge pull request #257 from PiCiU1221/librarian-lazy-loading-book-display

librarian-lazy-loading-book-display

Author: PiCiU1221

web_app/package-lock.json

@@ -15,6 +15,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.2",
+    "react-toastify": "^11.0.5",
     "swagger-ui": "^5.18.2",
     "swagger-ui-react": "^5.18.2"
   },

web_app/package.json

@@ -36,8 +36,12 @@ import LegalInfoPage from './Utils/LegalInfoPage.tsx';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
 
+import {ToastContainer} from 'react-toastify';
+
 const App: React.FC = () => {
     return (
+        <>
+            <ToastContainer />
         <Router>
             <Routes>
                 <Route path="/" element={<LandingPage />} />
@@ -84,6 +88,7 @@ const App: React.FC = () => {
                 />
             </Routes>
         </Router>
+        </>
     );
 };
 

web_app/src/App.tsx

@@ -90,7 +90,6 @@ const LibrarianAddBook: React.FC = () => {
                 try {
                     const token = localStorage.getItem('access_token');
                     if (!token) {
-                        setError('Brak tokena autoryzacyjnego.');
                         return;
                     }
 
@@ -122,8 +121,10 @@ const LibrarianAddBook: React.FC = () => {
     };
 
     const handleAuthorInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const input = e.target.value;
         setAuthorInput(e.target.value);
         setShowDropdown(true);
+        fetchAuthors(input);
     };
 
     const handleRemoveAuthor = (authorToRemove: string) => {
@@ -220,7 +221,6 @@ const LibrarianAddBook: React.FC = () => {
                 throw new Error(`Błąd ${response.status}: ${errorText}`);
             }
 
-            // alert('Książka dodana');
             navigate('/librarian-dashboard');
         } catch (error) {
             setError((error as Error).message || 'Wystąpił błąd podczas dodawania książki.');

web_app/src/Librarian/LibrarianAddBook.tsx

@@ -68,6 +68,11 @@ const LibrarianHomePage: React.FC = () => {
 
     const navigate = useNavigate();
 
+    // Lazy Loading for the book list display
+    const [page, setPage] = useState(0);
+    const [hasMore, setHasMore] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+
     useEffect(() => {
         fetchAssignedLibrary();
         fetchDropdownData();
@@ -113,6 +118,19 @@ const LibrarianHomePage: React.FC = () => {
         }
     }, [deleteBooksMessage]);
 
+    // Lazy Loading
+    useEffect(() => {
+        const handleScroll = () => {
+            const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000;
+            if (nearBottom && !isLoading && hasMore) {
+                fetchBooks(isUserLibraryChecked, page);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [isLoading, hasMore, page, isUserLibraryChecked]);
+
     const fetchDropdownData = async () => {
         const token = localStorage.getItem('access_token');
 
@@ -201,14 +219,16 @@ const LibrarianHomePage: React.FC = () => {
         }
     };
 
-    const fetchBooks = async (filterByLibrary: boolean) => {
+    const fetchBooks = async (filterByLibrary: boolean, pageToFetch: number = 0) => {
         const token = localStorage.getItem('access_token');
-        if (!token) return;
+        if (!token || isLoading || !hasMore) return;
+
+        setIsLoading(true);
 
         const queryParams = new URLSearchParams();
 
-        if (filterByLibrary && assignedLibrary?.name) {
-            queryParams.append("library", assignedLibrary.name);
+        if (filterByLibrary && assignedLibrary?.id) {
+            queryParams.append("libraryId", assignedLibrary.id.toString());
         }
 
         if (bookSearchInput) queryParams.append("title", bookSearchInput);
@@ -220,8 +240,8 @@ const LibrarianHomePage: React.FC = () => {
         if (releaseYearFrom) queryParams.append("releaseYearFrom", releaseYearFrom.toString());
         if (releaseYearTo) queryParams.append("releaseYearTo", releaseYearTo.toString());
 
-        queryParams.append("page", "0");
-        queryParams.append("size", "20");
+        queryParams.append("page", pageToFetch.toString());
+        queryParams.append("size", "3");
 
         try {
             const response = await fetch(`${API_BASE_URL}/api/books/search?${queryParams.toString()}`, {
@@ -232,22 +252,29 @@ const LibrarianHomePage: React.FC = () => {
                 },
             });
 
-            if (!response.ok) {
-                throw new Error(`Error: ${response.statusText}`);
-            }
+            if (!response.ok) throw new Error(`Error: ${response.statusText}`);
 
             const data = await response.json();
-            setBookSearchResults(data.content);
+            const newBooks = data.content;
+
+            setBookSearchResults(prev => [...prev, ...newBooks]);
+            setPage(pageToFetch + 1);
+            setHasMore(!data.last);
+
         } catch (error) {
             console.error("Error: ", error);
+        } finally {
+            setIsLoading(false);
         }
     };
 
     const handleSearch = (reset: boolean = false) => {
         if (reset) {
             setBookSearchResults([]);
+            setPage(0);
+            setHasMore(true);
         }
-        fetchBooks(isUserLibraryChecked);
+        fetchBooks(isUserLibraryChecked, 0);
     };
 
     const handleRedirectToAddBook = () => {

web_app/src/Librarian/LibrarianHomePage.tsx

@@ -146,18 +146,7 @@ const LibrarianOrders: React.FC = () => {
             if (response.ok) {
                 setPendingMessage('Zamówienie zostało zatwierdzone.');
                 setPendingMessageType('success');
-
-                setTimeout(() => {
-                    window.location.reload();
-                }, 2000);
-
-                setOrderDetails(prev =>
-                    prev.map(order =>
-                        order.orderId === orderId
-                            ? { ...order, status: 'IN_REALIZATION' }
-                            : order
-                    )
-                );
+                await fetchOrderDetails();
             } else {
                 setPendingMessage('Nie udało się zatwierdzić zamówienia.');
                 setPendingMessageType('error');
@@ -194,11 +183,7 @@ const LibrarianOrders: React.FC = () => {
                 setSelectedOrderId(null);
                 setRejectionReason('');
                 setCustomReason('');
-                fetchOrderDetails();
-
-                setTimeout(() => {
-                    window.location.reload();
-                }, 2000);
+                await fetchOrderDetails();
             } else {
                 setPendingMessage('Błąd przy odrzucaniu zamówienia.');
                 setPendingMessageType('error');
@@ -229,16 +214,13 @@ const LibrarianOrders: React.FC = () => {
             if (response.ok) {
                 setRealizationMessage(`Zamówienie ${orderId} zostało przekazane pomyślnie!`);
                 setRealizationMessageType("success");
-
-                setTimeout(() => {
-                    window.location.reload();
-                }, 2000);
+                await fetchOrderDetails();
             } else {
                 setRealizationMessage('Błąd przy przekazywaniu zamówienia.');
                 setRealizationMessageType('error');
             }
         } catch (err) {
-            console.error('Error declining order:', err);
+            console.error('Error handing over order:', err);
         }
     };
 

web_app/src/Librarian/LibrarianOrders.tsx

@@ -1,13 +1,22 @@
 import React, {useEffect, useState} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
+import {useWebSocketNewOrderNotification} from './useWebSocketNewOrderNotification.tsx';
+import {toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 const LibrarianReturns: React.FC = () => {
-    // Success and error messages
     const [message, setMessage] = useState<string | null>(null);
     const [messageType, setMessageType] = useState<'success' | 'error' | null>(null);
 
+    useWebSocketNewOrderNotification('librarian/orders/pending', () => {
+        toast.info("Otrzymano nowe zamówienie!", {
+            position: "bottom-right",
+        });
+        console.log("New order received!");
+    });
+
     // Returns
     interface RentalReturnItem {
         id: number;

web_app/src/Librarian/LibrarianReturns.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from "react";
+
+export function useWebSocketNewOrderNotification(
+    channel: string,
+    onMessage: (msg: string) => void
+) {
+    const wsRef = useRef<WebSocket | null>(null);
+    const keepAliveRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        const token = localStorage.getItem("access_token");
+        if (!token) return;
+
+        const apiBaseUrl = import.meta.env.VITE_API_BASE_URL?.replace(/^https?:\/\//, "") || "localhost";
+        const wsUrl = `wss://${apiBaseUrl}/ws?token=${encodeURIComponent(token)}&channel=${encodeURIComponent(channel)}`;
+
+        console.log("Connecting to:", wsUrl);
+
+        const ws = new WebSocket(wsUrl);
+        wsRef.current = ws;
+
+        ws.onopen = () => {
+            console.log("WebSocket opened:", wsUrl);
+
+            // Keep-alive ping for the established WS connection
+            keepAliveRef.current = setInterval(() => {
+                if (ws.readyState === WebSocket.OPEN) {
+                    ws.send("ping");
+                }
+            }, 30000);
+        };
+
+        ws.onmessage = (event) => {
+            onMessage(event.data);
+        };
+
+        ws.onerror = (err) => {
+            console.error("WebSocket error:", err);
+        };
+
+        ws.onclose = (event) => {
+            console.warn("WebSocket closed", event);
+            if (keepAliveRef.current) {
+                clearInterval(keepAliveRef.current);
+            }
+        };
+
+        return () => {
+            console.log("Cleaning up WebSocket connection");
+            if (keepAliveRef.current) {
+                clearInterval(keepAliveRef.current);
+            }
+            ws.close();
+            wsRef.current = null;
+        };
+    }, [channel]);
+}