Skip to content

Resolve #278 - Library book search API integration issues #280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PiCiU1221 merged 2 commits into from
Dec 16, 2025
Merged

Resolve #278 - Library book search API integration issues #280

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39f8140
Fix minor library book search glitch and API integration issues.
jpie02 Dec 16, 2025
a366a05
Fix minor library book search glitch and API integration issues.
jpie02 Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 51 additions & 15 deletions web_app/src/Librarian/LibrarianHomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,19 @@ const LibrarianHomePage: React.FC = () => {
name: string;
}

// UPDATED: Matches your new JSON structure
interface LibraryAddress {
street: string;
city: string;
postalCode: string;
}

interface Library {
id: number;
name: string;
phoneNumber: string;
email: string;
address: LibraryAddress;
}

// Books
Expand Down Expand Up @@ -71,11 +81,12 @@ const LibrarianHomePage: React.FC = () => {

const navigate = useNavigate();

// Lazy Loading for the book list display
// Lazy Loading
const [page, setPage] = useState(0);
const [hasMore, setHasMore] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const isFetchingRef = useRef(false);
const listRef = useRef<HTMLUListElement>(null);

useEffect(() => {
fetchAssignedLibrary();
Expand All @@ -84,7 +95,14 @@ const LibrarianHomePage: React.FC = () => {

useEffect(() => {
if (assignedLibrary !== null) {
fetchBooks(isUserLibraryChecked);
setBookSearchResults([]);
setPage(0);
setHasMore(true);

const timeoutId = setTimeout(() => {
fetchBooks(isUserLibraryChecked, 0);
}, 0);
return () => clearTimeout(timeoutId);
}
}, [isUserLibraryChecked, assignedLibrary]);

Expand Down Expand Up @@ -125,14 +143,25 @@ const LibrarianHomePage: React.FC = () => {
// Lazy Loading
useEffect(() => {
const handleScroll = () => {
const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000;
if (nearBottom && !isLoading && hasMore) {
fetchBooks(isUserLibraryChecked, page);
if (listRef.current) {
const { scrollTop, scrollHeight, clientHeight } = listRef.current;
if (scrollTop + clientHeight >= scrollHeight - 50) {
if (!isLoading && hasMore) {
fetchBooks(isUserLibraryChecked, page);
}
}
}
};

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
const listElement = listRef.current;
if (listElement) {
listElement.addEventListener('scroll', handleScroll);
}
return () => {
if (listElement) {
listElement.removeEventListener('scroll', handleScroll);
}
};
}, [isLoading, hasMore, page, isUserLibraryChecked]);

useWebSocketNotification('librarian/orders/pending', () => {
Expand Down Expand Up @@ -232,15 +261,16 @@ const LibrarianHomePage: React.FC = () => {

const fetchBooks = async (filterByLibrary: boolean, pageToFetch: number = 0) => {
const token = localStorage.getItem('access_token');
if (!token || isFetchingRef.current || isLoading || !hasMore) return;
if (!token || isFetchingRef.current || (isLoading && pageToFetch !== 0) || (!hasMore && pageToFetch !== 0))
return;

isFetchingRef.current = true;
setIsLoading(true);

const queryParams = new URLSearchParams();

if (filterByLibrary && assignedLibrary?.id) {
queryParams.append("libraryId", assignedLibrary.id.toString());
if (filterByLibrary && assignedLibrary?.name) {
queryParams.append("library", assignedLibrary.name);
}

if (bookSearchInput) queryParams.append("title", bookSearchInput);
Expand All @@ -253,7 +283,7 @@ const LibrarianHomePage: React.FC = () => {
if (releaseYearTo) queryParams.append("releaseYearTo", releaseYearTo.toString());

queryParams.append("page", pageToFetch.toString());
queryParams.append("size", "2");
queryParams.append("size", "10");

try {
const response = await fetch(`${API_BASE_URL}/api/books/search?${queryParams.toString()}`, {
Expand All @@ -269,9 +299,10 @@ const LibrarianHomePage: React.FC = () => {
const data = await response.json();
const newBooks = data.content;

setBookSearchResults(prev => [...prev, ...newBooks]);
setBookSearchResults(prev => pageToFetch === 0 ? newBooks : [...prev, ...newBooks]);
setPage(pageToFetch + 1);
setHasMore(!data.last);

setHasMore(data.currentPage < data.totalPages - 1);

} catch (error) {
console.error("Error: ", error);
Expand All @@ -286,8 +317,10 @@ const LibrarianHomePage: React.FC = () => {
setBookSearchResults([]);
setPage(0);
setHasMore(true);
fetchBooks(isUserLibraryChecked, 0);
} else {
fetchBooks(isUserLibraryChecked, 0);
}
fetchBooks(isUserLibraryChecked, 0);
};

const handleRedirectToAddBook = () => {
Expand Down Expand Up @@ -636,7 +669,10 @@ const LibrarianHomePage: React.FC = () => {
</div>

{searchResults.length > 0 ? (
<ul className="mt-12 bg-white p-3 rounded max-h-[40vw] overflow-y-auto">
<ul
ref={listRef}
className="mt-12 bg-white p-3 rounded max-h-[40vw] overflow-y-auto"
>
{searchResults.map((book, index) => (
<li
key={index}
Expand Down