Put I18n directly into view controllers

app/views/controller.js

@@ -1,7 +1,10 @@
+import { I18n } from '../i18n';
+
 export class ViewController {
   constructor(state, viewName, defaultState = {}) {
     // Store the global app state so it's accessible but out of the way.
     this.appState = state;
+    this.i18n = new I18n(this.appState);
 
     // Give this view its own state within the appState.
     if (!this.appState.viewStates.hasOwnProperty(viewName)) {

app/views/home/index.js

@@ -1,14 +1,13 @@
 import html from 'choo/html';
 
-import { I18n } from '../../i18n';
 import './styles.scss'; // Creates a separate CSS file, but allows better code splitting.
 // We'll see if code splitting is worth it in the end or if we should combine everything into `src/index.scss`
 import { HomeController } from './controller';  // The controller for this view, where processing should happen.
 
 // This is the view function that is exported and used in the view manager.
 export const homeView = (state, emit) => {
-  const i18n = new I18n(state);
   const controller = new HomeController(state);
+  const { i18n } = controller;
 
   // Returning an array in a view allows non-shared parent HTML elements.
   // This one doesn't have the problem right now, but it's good to remember.

app/views/login/controller.js

@@ -0,0 +1,13 @@
+import { ViewController } from '../controller';
+
+export class LoginController extends ViewController {
+  constructor(state) {
+    // Super passes state, view name, and default state to ViewController,
+    // which stores state in this.appState and the view controller's state to this.state
+    super(state, 'login', {});
+
+    // If using controller methods in an input's onchange or onclick instance,
+    // either bind the class's 'this' instance to the method first...
+    // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
+  }
+}

app/views/login/index.js

@@ -1,9 +1,10 @@
 import html from 'choo/html';
 
-import { I18n } from '../../i18n';
+import { LoginController } from './controller';
 
 export const loginView = (state, emit) => {
-  const i18n = new I18n(state);
+  const controller = new LoginController(state);
+  const { i18n } = controller;
 
   return html`<section>
 

app/views/search/index.js

@@ -1,13 +1,12 @@
 import html from 'choo/html';
 
-import { I18n } from '../../i18n';
 import { SearchController } from './controller';  // The controller for this view, where processing should happen.
 import { resultDetails } from './resultDetails';
 
 // This is the view function that is exported and used in the view manager.
 export const searchView = (state, emit) => {
-  const i18n = new I18n(state);
   const controller = new SearchController(state);
+  const { i18n } = controller;
 
   if (controller.state.lastSearch !== state.query.for) {
     console.log('searching!');
@@ -38,7 +37,6 @@ export const searchView = (state, emit) => {
               <div class="third-500">
                 ${resultDetails(
                   controller,
-                  i18n,
                   result,
                   [
                     html`<span data-tooltip=${i18n.__('interaction.heart')}>

app/views/search/resultDetails.js

@@ -2,7 +2,8 @@ import html from 'choo/html';
 
 import { modal } from '../partials/modal';
 
-export const resultDetails = (searchController, i18n, result, buttonHTML) => {
+export const resultDetails = (searchController, result, buttonHTML) => {
+  const { i18n } = searchController;
   const modalId = `result_${result.uri}}`;
   const modalContent = html`<article>
     <span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>