Pluralize "times" correctly

2016-07-15 09:22:26 -04:00
parent 17959b8105
commit 9fb124cf1c
12 changed files with 305 additions and 38 deletions
@@ -1,5 +1,6 @@
 const choo = require('../../')
 const html = require('../../html')
+const plur = require('plur')

 const app = choo()
 app.model({
@@ -21,10 +22,12 @@ app.model({
 })

 const mainView = (state, prev, send) => {
+  const count = state.counter;
+
  return html`
    <main class="app">
      <h1>Async counter</h1>
-      <p>Clicked ${state.counter} times!</p>
+      <p>Clicked ${count} ${plur('time', count)}!</p>
      <button onclick=${() => send('increment')}>Increment</button>
      <button onclick=${() => send('decrement')}>Decrement</button>
      <button onclick=${() => send('incrementAsync')}>Increment async</button>
@@ -10,6 +10,7 @@
  "author": "Juan Soto <juan@juansoto.me>",
  "license": "ISC",
  "dependencies": {
-    "budo": "^8.3.0"
+    "budo": "^8.3.0",
+    "plur": "^2.1.2"
  }
 }
@@ -0,0 +1,42 @@
+<html>
+    <head>
+        <title>Vanilla example</title>
+    </head>
+    <body>
+        <script src="../../dist/choo.min.js"></script>
+        <script>
+            const app = choo()
+
+            app.model({
+              namespace: 'counter',
+              state: {
+                  count: 0
+              },
+              reducers: {
+                increment: (data, state) => ({count: state.count + 1}),
+                decrement: (data, state) => ({count: state.count - 1})
+              }
+            })
+
+            const mainView = (state, prev, send) => {
+              return html`
+                <main class="app">
+                  <h1>Counter example</h1>
+                  <div>
+                      Count: ${state.counter.count}
+                      <button onclick=${(e) => send('counter:increment')}>+</button>
+                      <button onclick=${(e) => send('counter:decrement')}>-</button>
+                  </div>
+                </main>
+              `
+            }
+
+            app.router((route) => [
+              route('/', mainView)
+            ])
+
+            const tree = app.start()
+            document.body.appendChild(tree)
+        </script>
+    </body>
+</html>