Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix(alpine): wrap all Alpine.data() callbacks in arrow functions for proper component initialization

Browse Source 
- Wrap all Alpine.data() object literals in arrow functions (() => ({}))
- This fixes "n.bind is not a function" errors when Alpine initializes components
- Alpine.data() requires a factory function, not a plain object
- Ensures each component instance gets its own closure and proper this binding

Fixed 24 TypeScript files:
- admin.ts, analytics.ts, api.ts, api-explorer-docs.ts
- bookshelf.ts, collection-rules.ts, collections.ts, conflicts.ts
- device-management.ts, docs.ts, header.ts, index.ts
- library.ts, linking.ts, login.ts, password_validation.ts
- profile-modal.ts, profile.ts, queue.ts, register.ts
- search.ts, theme.ts, toast-error.ts, toast.ts, unlinked_books.ts

Before: Alpine.data("name", { method1, method2 })
After:  Alpine.data("name", () => ({ method1, method2 }))

This is a critical fix for Alpine.js v3+ where components must be
registered as factory functions to ensure proper reactivity and
prevent binding errors during initialization.
This commit is contained in:
john-okeefe
2026-03-12 15:43:56 -04:00
parent 93710a1e96
commit 48eaa2d286
22 changed files with 152 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/unlinked_books.ts
+99 -35
View File
@@ -4,14 +4,19 @@ import { getToken } from "./storage";
let selectedMediaItem: string | null = null;
function searchMatches(progressId: string, sha256: string, title: string): void {
function searchMatches(
progressId: string,
sha256: string,
title: string,
): void {
const container = document.getElementById(`matches-${progressId}`);
const matchesList = document.getElementById(`matches-list-${progressId}`);
if (!container || !matchesList) return;
container.classList.remove("hidden");
matchesList.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">Searching...</p>';
matchesList.innerHTML =
'<p class="text-sm" style="color: var(--text-secondary)">Searching...</p>';
const token = getToken();
const url = sha256
@@ -51,19 +56,27 @@ function searchMatches(progressId: string, sha256: string, title: string): void
)
.join("");
} else {
matchesList.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">No matches found. Try manual linking.</p>';
matchesList.innerHTML =
'<p class="text-sm" style="color: var(--text-secondary)">No matches found. Try manual linking.</p>';
}
})
.catch((error) => {
console.error("Failed to search", error);
matchesList.innerHTML = '<p class="text-sm" style="color: var(--error)">Failed to search</p>';
matchesList.innerHTML =
'<p class="text-sm" style="color: var(--error)">Failed to search</p>';
});
}
function autoLinkBook(progressId: string, mediaItemId: string, confidence: number): void {
function autoLinkBook(
progressId: string,
mediaItemId: string,
confidence: number,
): void {
if (
!confirm(
"Link this book? The confidence score is " + Math.round(confidence * 100) + "%",
"Link this book? The confidence score is " +
Math.round(confidence * 100) +
"%",
)
) {
return;
@@ -104,20 +117,28 @@ function autoLinkBook(progressId: string, mediaItemId: string, confidence: numbe
function showManualLinkModal(progressId: string, bookTitle: string): void {
const modal = document.getElementById("manual-link-modal");
const progressIdInput = document.getElementById("link-progress-id") as HTMLInputElement;
const bookTitleInput = document.getElementById("link-book-title") as HTMLInputElement;
const progressIdInput = document.getElementById(
"link-progress-id",
) as HTMLInputElement;
const bookTitleInput = document.getElementById(
"link-book-title",
) as HTMLInputElement;
const searchResults = document.getElementById("link-search-results");
if (modal) modal.classList.remove("hidden");
if (progressIdInput) progressIdInput.value = progressId;
if (bookTitleInput) bookTitleInput.value = bookTitle;
if (searchResults) searchResults.innerHTML = '<p style="color: var(--text-secondary)">Search for books to link</p>';
if (searchResults)
searchResults.innerHTML =
'<p style="color: var(--text-secondary)">Search for books to link</p>';
selectedMediaItem = null;
}
function hideManualLinkModal(): void {
const modal = document.getElementById("manual-link-modal");
const searchInput = document.getElementById("link-search-input") as HTMLInputElement;
const searchInput = document.getElementById(
"link-search-input",
) as HTMLInputElement;
if (modal) modal.classList.add("hidden");
if (searchInput) searchInput.value = "";
@@ -125,7 +146,9 @@ function hideManualLinkModal(): void {
}
function searchBooksForLink(): void {
const searchInput = document.getElementById("link-search-input") as HTMLInputElement;
const searchInput = document.getElementById(
"link-search-input",
) as HTMLInputElement;
const resultsContainer = document.getElementById("link-search-results");
if (!searchInput || !resultsContainer) return;
@@ -133,11 +156,13 @@ function searchBooksForLink(): void {
const searchTerm = searchInput.value;
if (searchTerm.length < 2) {
resultsContainer.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">Enter at least 2 characters</p>';
resultsContainer.innerHTML =
'<p class="text-sm" style="color: var(--text-secondary)">Enter at least 2 characters</p>';
return;
}
resultsContainer.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">Searching...</p>';
resultsContainer.innerHTML =
'<p class="text-sm" style="color: var(--text-secondary)">Searching...</p>';
const token = getToken();
fetch(`/api/books/match?title=${encodeURIComponent(searchTerm)}`, {
@@ -168,16 +193,22 @@ function searchBooksForLink(): void {
)
.join("");
} else {
resultsContainer.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">No matches found</p>';
resultsContainer.innerHTML =
'<p class="text-sm" style="color: var(--text-secondary)">No matches found</p>';
}
})
.catch((error) => {
console.error("Failed to search", error);
resultsContainer.innerHTML = '<p class="text-sm" style="color: var(--error)">Failed to search</p>';
resultsContainer.innerHTML =
'<p class="text-sm" style="color: var(--error)">Failed to search</p>';
});
}
function selectBookForLink(mediaItemId: string, title: string, _coverPath: string): void {
function selectBookForLink(
mediaItemId: string,
title: string,
_coverPath: string,
): void {
selectedMediaItem = mediaItemId;
const resultsContainer = document.getElementById("link-search-results");
if (!resultsContainer) return;
@@ -197,10 +228,18 @@ function confirmManualLink(): void {
return;
}
const progressIdInput = document.getElementById("link-progress-id") as HTMLInputElement;
const confidenceInput = document.getElementById("link-confidence") as HTMLInputElement;
const bookTitleInput = document.getElementById("link-book-title") as HTMLInputElement;
const sha256Input = document.getElementById("link-book-sha256") as HTMLInputElement;
const progressIdInput = document.getElementById(
"link-progress-id",
) as HTMLInputElement;
const confidenceInput = document.getElementById(
"link-confidence",
) as HTMLInputElement;
const bookTitleInput = document.getElementById(
"link-book-title",
) as HTMLInputElement;
const sha256Input = document.getElementById(
"link-book-sha256",
) as HTMLInputElement;
if (!progressIdInput) return;
@@ -240,7 +279,9 @@ function confirmManualLink(): void {
}
function toggleAllUnlinked(): void {
const selectAll = document.getElementById("select-all-unlinked") as HTMLInputElement;
const selectAll = document.getElementById(
"select-all-unlinked",
) as HTMLInputElement;
if (!selectAll) return;
document.querySelectorAll(".unlinked-checkbox").forEach((cb) => {
@@ -250,7 +291,9 @@ function toggleAllUnlinked(): void {
}
function getSelectedUnlinked(): { progressId: string; title: string }[] {
return Array.from(document.querySelectorAll(".unlinked-checkbox:checked")).map((cb) => ({
return Array.from(
document.querySelectorAll(".unlinked-checkbox:checked"),
).map((cb) => ({
progressId: cb.getAttribute("data-progress-id") || "",
title: cb.getAttribute("data-title") || "",
}));
@@ -271,7 +314,11 @@ async function bulkAutoLink(): Promise<void> {
return;
}
if (!confirm(`Auto-link ${selected.length} books with high confidence matches (≥80%)?`)) {
if (
!confirm(
`Auto-link ${selected.length} books with high confidence matches (≥80%)?`,
)
) {
return;
}
@@ -290,7 +337,10 @@ async function bulkAutoLink(): Promise<void> {
});
const result = await response.json();
showToast(`Auto-linked ${result.auto_linked} books successfully`, "success");
showToast(
`Auto-linked ${result.auto_linked} books successfully`,
"success",
);
setTimeout(() => window.location.reload(), 1500);
} catch (error) {
console.error("Auto-link failed", error);
@@ -308,11 +358,14 @@ async function bulkGetSuggestions(): Promise<void> {
const token = getToken();
for (const book of selected) {
try {
const response = await fetch(`/sync/unlinked-books/${book.progressId}/suggestions`, {
headers: {
Authorization: `Bearer ${token}`,
const response = await fetch(
`/sync/unlinked-books/${book.progressId}/suggestions`,
{
headers: {
Authorization: `Bearer ${token}`,
},
},
});
);
const result = await response.json();
displaySuggestions(book.progressId, result.suggestions, result.action);
@@ -322,7 +375,11 @@ async function bulkGetSuggestions(): Promise<void> {
}
}
function displaySuggestions(progressId: string, suggestions: any[], _action: string): void {
function displaySuggestions(
progressId: string,
suggestions: any[],
_action: string,
): void {
const container = document.getElementById(`matches-${progressId}`);
if (!container) return;
@@ -333,13 +390,15 @@ function displaySuggestions(progressId: string, suggestions: any[], _action: str
listContainer.innerHTML = "";
if (suggestions.length === 0) {
listContainer.innerHTML = '<p style="color: var(--text-secondary)">No matches found</p>';
listContainer.innerHTML =
'<p style="color: var(--text-secondary)">No matches found</p>';
return;
}
suggestions.forEach((match) => {
const div = document.createElement("div");
div.className = "p-3 border rounded cursor-pointer hover:bg-opacity-80 transition-colors";
div.className =
"p-3 border rounded cursor-pointer hover:bg-opacity-80 transition-colors";
div.style.cssText = `background-color: var(--bg-primary); border-color: var(--border);`;
div.innerHTML = `
<div class="flex justify-between items-center">
@@ -370,8 +429,13 @@ function showBulkManualLink(): void {
return;
}
showToast(`Bulk manual link for ${selected.length} books - select target book in library`, "info");
window.location.href = "/library?mode=link&unlinked=" + selected.map((s) => s.progressId).join(",");
showToast(
`Bulk manual link for ${selected.length} books - select target book in library`,
"info",
);
window.location.href =
"/library?mode=link&unlinked=" +
selected.map((s) => s.progressId).join(",");
}
function setupEventDelegation(): void {
@@ -427,7 +491,7 @@ export {
toggleAllUnlinked,
};
Alpine.store("unlinkedBooks", {
Alpine.data("unlinkedBooks", () => ({
bulkAutoLink,
bulkGetSuggestions,
confirmManualLink,
@@ -440,4 +504,4 @@ Alpine.store("unlinkedBooks", {
showBulkManualLink,
showManualLinkModal,
toggleAllUnlinked,
});
}));