Random gif example

kaleidos · Feb 10, 2016 · 4035614 · 4035614
1 parent 0296728
commit 4035614
Show file tree

Hide file tree

Showing 9 changed files with 329 additions and 0 deletions.
diff --git a/assets/waiting.gif b/assets/waiting.gif
diff --git a/examples/05-random-gif-viewer/README.md b/examples/05-random-gif-viewer/README.md
@@ -0,0 +1,4 @@
+This is the first example showing how to handle external effects. Basically the signature for your `init` and `update` function changes:
+
+* `init` returns the tuple `[model, effect]`.
+* `update` returns the tuple `[model, effect]`.
diff --git a/examples/05-random-gif-viewer/app.js b/examples/05-random-gif-viewer/app.js
@@ -0,0 +1,39 @@
+import StartApp from 'olmo/start-app';
+import Signal from 'olmo/signal';
+import Task from 'olmo/task';
+
+import snabbdom from 'snabbdom';
+import snabbdomProps from 'snabbdom/modules/props';
+import snabbdomEvents from 'snabbdom/modules/eventlisteners';
+
+import RandomGif from './random-gif';
+
+
+const patch = snabbdom.init([snabbdomProps, snabbdomEvents]);
+
+function render([oldHtml, newHtml]) {
+  return Task.of(() => patch(oldHtml, newHtml));
+}
+
+export default function App() {
+  var {html, model, tasks} = StartApp.App({
+    init: RandomGif.init(),
+    update: RandomGif.update,
+    view: RandomGif.view,
+    inputs: []
+  });
+
+  return {
+    html,
+    model,
+    // tasks perform side-effects
+    tasks: Signal.merge(
+      tasks,
+      // rendering is just a side-effect
+      html
+        .startWith(document.getElementById('root'))
+        .pairwise()
+        .flatMap(render)
+    )
+  };
+}
diff --git a/examples/05-random-gif-viewer/assets/waiting.gif b/examples/05-random-gif-viewer/assets/waiting.gif
diff --git a/examples/05-random-gif-viewer/bundle.js b/examples/05-random-gif-viewer/bundle.js
diff --git a/examples/05-random-gif-viewer/index.html b/examples/05-random-gif-viewer/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+
+    <title>Elm Architecture Tutorial</title>
+    <style>
+     html,head,body { padding:0; margin:0; }
+     body { font-family: calibri, helvetica, arial, sans-serif; }
+    </style>
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/05-random-gif-viewer/index.js b/examples/05-random-gif-viewer/index.js
@@ -0,0 +1,4 @@
+import { runApp } from 'olmo/start-app';
+import App from './app';
+
+runApp(App());
diff --git a/examples/05-random-gif-viewer/random-gif.js b/examples/05-random-gif-viewer/random-gif.js
@@ -0,0 +1,77 @@
+import { html } from 'snabbdom-jsx';
+
+import Http from 'olmo/http';
+import Task from 'olmo/task';
+import Events from 'olmo/html-events';
+import Effects from 'olmo/effects';
+import ActionType from 'olmo/actions';
+import Json from 'olmo/json';
+
+
+// init
+export function init(topic='funny cats') {
+  const model = {topic, url: 'assets/waiting.gif'};
+  const eff = getRandomGif(topic);
+  return [model, eff];
+}
+
+function getRandomGif(topic) {
+  return Effects.fromTask(
+    Http.get(decodeImageUrl, getRandomUrl(topic)),
+    Action.NewGif,
+    Action.GifError
+  );
+}
+
+function getRandomUrl(topic) {
+  return Http.url('http://api.giphy.com/v1/gifs/random', [
+    ['api_key', 'dc6zaTOxFJmzC'],
+    ['tag', topic]
+  ]);
+}
+
+function decodeImageUrl(resp) {
+  return Json.at(['data', 'image_url'], Json.string, resp.value);
+}
+
+
+// action
+const Action = ActionType({
+  RequestMore: [],
+  NewGif: ['url'],
+  GifError: ['error']
+});
+
+
+// update
+export const update = Action.case('RandomGif', {
+  RequestMore: (action, model) => {
+    return [model, getRandomGif(model.topic)];
+  },
+
+  NewGif: (action, model) => {
+    const newModel = {...model, url: action.url};
+    return [newModel, Effects.none()];
+  },
+
+  GifError: (action, model) => {
+    console.log('I got error ', action);
+    return [model, Effects.none()];
+  }
+});
+
+
+// view
+function view(address, model) {
+  console.log(model.url);
+  return (
+    <div>
+      <h1>{model.topic}</h1>
+      <p><button on-click={Events.message(address, Action.RequestMore())}>More Please!</button></p>
+      <img src={model.url}/>
+    </div>
+  );
+}
+
+
+export default {init, update, view};
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "ex3:build": "webpack ./examples/03-list-of-counters/index.js && cp bundle.js index.html ./examples/03-list-of-counters",
     "ex4": "webpack-dev-server --inline --entry ./examples/04-list-of-counters/index.js",
     "ex4:build": "webpack ./examples/04-list-of-counters/index.js && cp bundle.js index.html ./examples/04-list-of-counters",
+    "ex5": "webpack-dev-server --inline --entry ./examples/05-random-gif-viewer/index.js",
+    "ex5:build": "webpack ./examples/05-random-gif-viewer/index.js && cp bundle.js index.html ./examples/05-random-gif-viewer && cp -r assets ./examples/05-random-gif-viewer",
     "test": "babel-tape-runner test/**/*.js | faucet",
     "test:watch": "watch 'npm test' src/ test/ -d"
   },