Refactor app initialization flowmain

1 files changed, 26 insertions, 10 deletions

diff --git a/js/app.js b/js/app.js
index a8602f0..ea6bcbd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -28,9 +28,22 @@ const elements = {
 // Initialize the application
 async function init() {
   cacheElements();
-  await loadBooks();
+  setupUI();
+  await initializeBooks();
+}
+
+function setupUI() {
   setupFilters();
   setupModal();
+}
+
+async function initializeBooks() {
+  const books = await loadBooks();
+  if (!books) return;
+
+  state.books = books;
+  state.filteredBooks = [...books];
+  populateAuthorFilter();
   renderBooks();
 }
 
@@ -51,19 +64,22 @@ async function loadBooks() {
     const response = await fetch('data/books.json');
     if (!response.ok) throw new Error('Failed to load books');
     const data = await response.json();
-    state.books = sortBooksByYear(data.books);
-    state.filteredBooks = [...state.books];
-    populateAuthorFilter();
+    return sortBooksByYear(data.books);
   } catch (error) {
-    console.error('Error loading books:', error);
-    elements.booksGrid.innerHTML = `
-      <div class="error-message">
-        <p>Failed to load books. Please try refreshing the page.</p>
-      </div>
-    `;
+    renderLoadError(error);
+    return null;
   }
 }
 
+function renderLoadError(error) {
+  console.error('Error loading books:', error);
+  elements.booksGrid.innerHTML = `
+    <div class="error-message">
+      <p>Failed to load books. Please try refreshing the page.</p>
+    </div>
+  `;
+}
+
 function sortBooksByYear(books) {
   return [...books].sort((a, b) => {
     if (a.year !== b.year) return a.year - b.year;