converting some things to choo/component

cyberflamingo · Nov 15, 2018 · 037c797 · 037c797
1 parent a576d54
commit 037c797
Show file tree

Hide file tree

Showing 16 changed files with 272 additions and 383 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ dist
 .nyc_output
 .tox
 .pytest_cache
+*.iml
 android/app/src/main/assets
 ios/send-ios/assets/ios.js
 ios/send-ios/assets/vendor.js

diff --git a/android/android.iml b/android/android.iml
diff --git a/android/android.js b/android/android.js
@@ -24,7 +24,7 @@ import html from 'choo/html';
 import Raven from 'raven-js';
 
 import assets from '../common/assets';
-import header from '../app/ui/header';
+import Header from '../app/ui/header';
 import locale from '../common/locales';
 import storage from '../app/storage';
 import controller from '../app/controller';
@@ -59,7 +59,7 @@ function body(main) {
         >
           <img src="${assets.get('preferences.png')}" />
         </a>
-        ${header(state, emit)} ${main(state, emit)}
+        ${state.cache(Header, 'header').render()} ${main(state, emit)}
       </body>
     `;
 

diff --git a/android/app/app.iml b/android/app/app.iml
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -35,8 +35,7 @@ dependencies {
 }
 
 task generateAndLinkBundle(type: Exec, description: 'Generate the android.js bundle and link it into the assets directory') {
-    commandLine 'node'
-    args '../generateAndLinkBundle.js'
+    commandLine './buildAssets.sh'
 }
 
 tasks.withType(JavaCompile) {

diff --git a/android/app/buildAssets.sh b/android/app/buildAssets.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+npm run build
+rm -rf src/main/assets
+mkdir -p src/main/assets
+cp -R ../../dist/* src/main/assets
+sed -i '' 's/url(/url(\/android_asset/g' src/main/assets/app.*.css
diff --git a/android/generateAndLinkBundle.js b/android/generateAndLinkBundle.js
diff --git a/app/main.js b/app/main.js
@@ -1,5 +1,7 @@
 import 'fast-text-encoding'; // MS Edge support
 import 'fluent-intl-polyfill';
+import choo from 'choo';
+import nanotiming from 'nanotiming';
 import routes from './routes';
 import capabilities from './capabilities';
 import locale from '../common/locales';
@@ -14,7 +16,10 @@ import './main.css';
 import User from './user';
 
 (async function start() {
-  const app = routes();
+  const app = routes(choo());
+  if (process.env.NODE_ENV === 'production') {
+    nanotiming.disabled = true;
+  }
   if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
     Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
   }

diff --git a/app/routes.js b/app/routes.js
@@ -1,37 +1,8 @@
 const choo = require('choo');
-const html = require('choo/html');
-const nanotiming = require('nanotiming');
 const download = require('./ui/download');
-const footer = require('./ui/footer');
-const fxPromo = require('./ui/fxPromo');
-const header = require('./ui/header');
+const body = require('./ui/body');
 
-nanotiming.disabled = true;
-
-function banner(state, emit) {
-  if (state.promo && !state.route.startsWith('/unsupported/')) {
-    return fxPromo(state, emit);
-  }
-}
-
-function body(main) {
-  return function(state, emit) {
-    const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
-    ${banner(state, emit)}
-    ${header(state, emit)}
-    ${main(state, emit)}
-    ${footer(state)}
-    </body>`;
-    if (state.layout) {
-      // server side only
-      return state.layout(state, b);
-    }
-    return b;
-  };
-}
-
-module.exports = function() {
-  const app = choo();
+module.exports = function(app = choo()) {
   app.route('/', body(require('./ui/home')));
   app.route('/download/:id', body(download));
   app.route('/download/:id/:key', body(download));

diff --git a/app/ui/account.js b/app/ui/account.js
@@ -1,58 +1,101 @@
 const html = require('choo/html');
+const Component = require('choo/component');
 
-module.exports = function(state, emit) {
-  if (!state.capabilities.account) {
-    return null;
-  }
-  const user = state.user;
-  if (!user.loggedIn) {
-    return html`<button
-      class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
-      onclick=${login}>
-        ${state.translate('signInMenuOption')}
-      </button>`;
-  }
-  return html`<div class="relative h-8">
-    <input
-      type="image"
-      alt="${user.email}"
-      class="w-8 h-8 rounded-full text-white"
-      src="${user.avatar}"
-      onclick=${avatarClick}/>
-    <ul
-      id="accountMenu"
-      class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
-      onblur="${hideMenu}"
-      tabindex="-1">
-      <li class="p-2 text-grey-dark">${user.email}</li>
-      <li>
-        <a class="block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer" onclick=${logout}>
-          ${state.translate('logOut')}
-        </a>
-      </li>
-    </ul>
-  </div>`;
-
-  function avatarClick(event) {
+class Account extends Component {
+  constructor(name, state, emit) {
+    super(name);
+    this.state = state;
+    this.emit = emit;
+    this.enabled = state.capabilities.account;
+    this.local = state.components[name] = {};
+    this.setState();
+  }
+
+  avatarClick(event) {
     event.preventDefault();
     const menu = document.getElementById('accountMenu');
     menu.classList.toggle('invisible');
     menu.focus();
   }
 
-  function hideMenu(event) {
+  hideMenu(event) {
     event.stopPropagation();
     const menu = document.getElementById('accountMenu');
     menu.classList.add('invisible');
   }
 
-  function login(event) {
+  login(event) {
     event.preventDefault();
-    emit('login');
+    this.emit('login');
   }
 
-  function logout(event) {
+  logout(event) {
     event.preventDefault();
-    emit('logout');
+    this.emit('logout');
+  }
+
+  changed() {
+    return this.local.loggedIn !== this.state.user.loggedIn;
+  }
+
+  setState() {
+    const changed = this.changed();
+    if (changed) {
+      this.local.loggedIn = this.state.user.loggedIn;
+    }
+    return changed;
   }
-};
+
+  update() {
+    return this.setState();
+  }
+
+  createElement() {
+    if (!this.enabled) {
+      return null;
+    }
+    const user = this.state.user;
+    const translate = this.state.translate;
+    if (!this.local.loggedIn) {
+      return html`
+      <div>
+        <button
+          class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
+          onclick="${e => this.login(e)}"
+        >
+          ${translate('signInMenuOption')}
+        </button>
+      </div>
+      `;
+    }
+    return html`
+      <div class="relative h-8">
+        <input
+          type="image"
+          alt="${user.email}"
+          class="w-8 h-8 rounded-full text-white"
+          src="${user.avatar}"
+          onclick="${e => this.avatarClick(e)}"
+        />
+        <ul
+          id="accountMenu"
+          class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
+          onblur="${e => this.hideMenu(e)}"
+          tabindex="-1"
+        >
+          <li class="p-2 text-grey-dark">${user.email}</li>
+          <li>
+            <a
+              class="block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer"
+              onclick="${e => this.logout(e)}"
+            >
+              ${translate('logOut')}
+            </a>
+          </li>
+        </ul>
+      </div>
+    `;
+  }
+}
+
+module.exports = Account;
diff --git a/app/ui/body.js b/app/ui/body.js
@@ -0,0 +1,28 @@
+const html = require('choo/html');
+const Promo = require('./promo');
+const Header = require('./header');
+const Footer = require('./footer');
+
+function banner(state) {
+  if (state.promo && !state.route.startsWith('/unsupported/')) {
+    return state.cache(Promo, 'promo').render();
+  }
+}
+
+module.exports = function body(main) {
+  return function(state, emit) {
+    const b = html`
+      <body
+        class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest"
+      >
+        ${banner(state, emit)} ${state.cache(Header, 'header').render()}
+        ${main(state, emit)} ${state.cache(Footer, 'footer').render()}
+      </body>
+    `;
+    if (state.layout) {
+      // server side only
+      return state.layout(state, b);
+    }
+    return b;
+  };
+};