Move addItemToShelf into an event instead of class method

app/appListeners.js

@@ -1,8 +1,9 @@
 export const appListeners = (app, state, emitter) => {
-  emitter.on('DOMContentLoaded', () => {
-    document.title = app.siteConfig.siteName;
+  emitter.on(state.events.DOMCONTENTLOADED, () => {
+    emitter.emit(state.events.DOMTITLECHANGE, app.siteConfig.siteName);
+    
     // Emitter listeners
-    emitter.on('render', callback => {
+    emitter.on(state.events.RENDER, callback => {
       // This is a dirty hack to get the callback to call *after* re-rendering.
       if (callback && typeof callback === "function") {
         setTimeout(() => {
@@ -11,17 +12,50 @@ export const appListeners = (app, state, emitter) => {
       }
     });
 
-    emitter.on('set-language', newLanguage => {
+    emitter.on(state.events.SET_LANGUAGE, newLanguage => {
       app.setSettingsItem('lang', newLanguage);
       state.language = newLanguage;
       state.i18n.fetchLocaleUI().then(() => {
-        emitter.emit('render');
+        emitter.emit(state.events.RENDER);
       });
     });
 
+    emitter.on(state.events.ADD_TO_SHELF, async (book, shelfId, callback = () => {}) => {
+      let bookId;
+      if(typeof book.source !== 'undefined' && typeof book.uri !== 'undefined') {
+        const bookSearchResult = await fetch('/api/books/getId', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(book),
+        }).then(response => response.json());
+
+        if (typeof bookSearchResult.error !== 'undefined') {
+          console.error(bookSearchResult);
+          return bookSearchResult;
+        }
+
+        bookId = bookSearchResult;
+      } else {
+        bookId = book.id;
+      }
+
+      return fetch('/api/shelf/addItem', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          shelfId,
+          bookId,
+        }),
+      }).then(result => callback(result));
+    });
+
     state.i18n.fetchLocaleUI().then(() => {
       app.checkIfLoggedIn(state).then(isLoggedIn => {
-        emitter.emit('render'); // This should hopefully only run once after the DOM is loaded. It prevents routing issues where 'render' hasn't been defined yet
+        emitter.emit(state.events.RENDER); // This should hopefully only run once after the DOM is loaded. It prevents routing issues where 'render' hasn't been defined yet
       });
     })
   });

app/appState.js

@@ -1,6 +1,9 @@
 import { I18n } from "./i18n";
 
 export const appState = (app, state, emitter) => {
+  state.events.SET_LANGUAGE = 'setLanguage';
+  state.events.ADD_TO_SHELF = 'addToShelf';
+  
   state.language = app.getSettingsItem('lang') ? app.getSettingsItem('lang') : (navigator.language || navigator.userLanguage).split('-')[0];
   state.viewStates = {};
   state.isLoggedIn = false;

app/views/about.js

@@ -13,7 +13,7 @@ export const aboutView = (state, emit, i18n) => {
     community.innerHTML = i18n.pages.community;
   }
   if (promises.length > 0) {
-    Promise.all(promises).then(fulfilled => emit('render'));
+    Promise.all(promises).then(fulfilled => emit(state.events.RENDER));
   }
   return [
     content,

app/views/login/controller.js

@@ -34,7 +34,7 @@ export class LoginController extends ViewController {
     this.state.fieldValues.loginEmail = '';
     this.state.fieldValues.loginPassword = '';
     
-    this.emit('render');
+    this.emit(this.appState.events.RENDER);
   }
 
   clearCreateAccountForm () {
@@ -44,7 +44,7 @@ export class LoginController extends ViewController {
     this.state.fieldValues.createPassword = '';
     this.state.fieldValues.createConfirm = '';
     
-    this.emit('render');
+    this.emit(this.appState.events.RENDER);
   }
 
   validateLogin () {
@@ -52,7 +52,7 @@ export class LoginController extends ViewController {
     this.state.loginError = '';
     this.state.isChecking = true;
 
-    this.emit('render', () => {
+    this.emit(this.appState.events.RENDER, () => {
       const {
         loginEmail,
         loginPassword
@@ -64,7 +64,7 @@ export class LoginController extends ViewController {
       ].includes('')) {
         this.state.loginError = __('login.login_required_field_blank');
         this.state.isChecking = false;
-        this.emit('render');
+        this.emit(this.appState.events.RENDER);
         return;
       }
 
@@ -77,7 +77,7 @@ export class LoginController extends ViewController {
     this.state.createError = '';
     this.state.isChecking = true;
 
-    this.emit('render', () => {
+    this.emit(this.appState.events.RENDER, () => {
       const {
         createEmail,
         createUsername,
@@ -93,14 +93,14 @@ export class LoginController extends ViewController {
       ].includes('')) {
         this.state.createError = __('login.create_required_field_blank');
         this.state.isChecking = false;
-        this.emit('render');
+        this.emit(this.appState.events.RENDER);
         return;
       }
 
       if (createPassword !== createConfirm) {
         this.state.createError = __('login.create_password_confirm_mismatch');
         this.state.isChecking = false;
-        this.emit('render');
+        this.emit(this.appState.events.RENDER);
         return;
       }
 
@@ -130,7 +130,7 @@ export class LoginController extends ViewController {
         console.error(response);
         this.state.loginError = __(response.message);
         this.state.isChecking = false;
-        this.emit('render');
+        this.emit(this.appState.events.RENDER);
         return;
       }
 
@@ -169,7 +169,7 @@ export class LoginController extends ViewController {
         console.error(response);
         this.state.createError = __(response.message);
         this.state.isChecking = false;
-        this.emit('render');
+        this.emit(this.appState.events.RENDER);
         return;
       }
 

app/views/search/controller.js

@@ -66,7 +66,7 @@ export class SearchController extends ViewController {
   search() {
     if (this.hasQuery) {
       this.state.done = false;
-      this.emit('render', () => {
+      this.emit(this.appState.events.RENDER, () => {
         this.state.lastSearch = this.appState.query.for;
         this.state.lastSource = this.state.searchSource;
         this.state.lastBy = this.state.searchBy;
@@ -79,7 +79,7 @@ export class SearchController extends ViewController {
             this.state.results = responseJSON;
             this.state.done = true;
           })
-          .then(() => this.emit('render'));
+          .then(() => this.emit(this.appState.events.RENDER));
       });
     }
   }
@@ -143,16 +143,16 @@ export class SearchController extends ViewController {
     shelvesPromise.then(() => {
       console.log(shelfController.state.myShelves);
       this.showShelves = true;
-      this.emit('render');
+      this.emit(this.appState.events.RENDER);
     });
   }
 
   addToShelf(bookData, shelfId) {
-    const shelfController = new ShelvesController(this.appState, this.i18n);
-    shelfController.addItemToShelf(bookData, shelfId).then(result => {
+    const { ADD_TO_SHELF, RENDER } = this.appState.events;
+    this.emit(ADD_TO_SHELF, bookData, shelfId, (result) => {
       console.log(result);
       this.showShelves = false;
-      this.emit('render');
+      this.emit(RENDER);
     });
   }
 }

app/views/shelves/controller.js

@@ -42,37 +42,4 @@ export class ShelvesController extends ViewController {
       this.state.loadedShelves[this.targetShelf] = shelf;
     });
   }
-
-  async addItemToShelf (book, shelfId) {
-    let bookId;
-    if (typeof book.source !== 'undefined' && typeof book.uri !== 'undefined') {
-      const bookSearchResult = await fetch('/api/books/getId', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(book),
-      }).then(response => response.json());
-      
-      if (typeof bookSearchResult.error !== 'undefined') {
-        console.error(bookSearchResult);
-        return bookSearchResult;
-      }
-
-      bookId = bookSearchResult;
-    } else {
-      bookId = book.id;
-    }
-
-    return fetch('/api/shelf/addItem', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        shelfId,
-        bookId,
-      }),
-    })
-  }
 }

app/views/shelves/shelf.js

@@ -24,7 +24,7 @@ export const shelfView = (shelvesController, emit) => {
 
   if (typeof shelvesController.state.loadedShelves[shelvesController.targetShelf] === 'undefined') {
     shelvesController.getTargetShelf().then(() => {
-      emit('render');
+      emit(shelvesController.appState.events.RENDER);
     });
   }
 
@@ -77,7 +77,7 @@ export const shelfView = (shelvesController, emit) => {
         <div class="third sixth-700">
           <button class="pseudo" onclick=${() => {
             delete shelvesController.state.loadedShelves[shelvesController.targetShelf];
-            emit('render');
+            emit(shelvesController.appState.events.RENDER);
           }}>
             Reload <i class="icon-reload"></i>
           </button>

app/views/shelves/userShelves/index.js

@@ -22,7 +22,7 @@ export const userShelvesView = (shelvesController, emit) => {
 
   if (shelvesController.state.myShelves.length <= 0) {
     shelvesController.getUserShelves().then(() => {
-      emit('render');
+      emit(shelvesController.appState.events.RENDER);
     });
   }