adjusting implementation to redux-elm v2

redux-elm-tomkis1/package.json

@@ -21,17 +21,12 @@
   },
   "dependencies": {
     "babel-runtime": "^6.5.0",
-    "bluebird": "^3.3.4",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.2",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
     "react-redux": "^4.0.0",
-    "react-router": "^2.0.0",
-    "react-router-redux": "^4.0.0",
     "redux": "^3.3.1",
-    "redux-elm": "^1.0.0-alpha",
-    "redux-side-effects": "^1.0.0",
-    "superagent": "^1.8.3",
-    "superagent-bluebird-promise": "^3.0.0"
+    "redux-elm": "^2.1.1",
+    "redux-saga": "^0.10.4"
   },
   "author": "Tomas Weiss <tomasw@salsitasoft.com>",
   "license": "MIT"

redux-elm-tomkis1/src/boilerplate.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { render } from 'react-dom';
 import { createStore, compose } from 'redux';
 import { Provider, connect } from 'react-redux';
-import { createEffectCapableStore } from 'redux-side-effects';
+import reduxElm from 'redux-elm';
 
 export default (containerDomId, View, updater) => {
   const storeFactory = compose(
-    createEffectCapableStore,
+    reduxElm,
     window.devToolsExtension ? window.devToolsExtension() : f => f
   )(createStore);
 

redux-elm-tomkis1/src/button/updater.js

@@ -1,9 +1,9 @@
-import { Updater, Matchers } from 'redux-elm';
+import { Updater } from 'redux-elm';
 
 export const isActive = model => model;
 
-export default new Updater(false, Matchers.exactMatcher)
-  .case('Toggle', function*(model) {
-    return !model;
-  })
-  .toReducer();
+export const initialModel = false;
+
+export default new Updater(initialModel)
+  .case('Toggle', model => !model)
+  .toReducer();

redux-elm-tomkis1/src/button/view.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { view } from 'redux-elm';
 
-export default ({ model, dispatch }) =>
-  <button style={{ color: model ? 'green' : 'red'}} onClick={() => dispatch({ type: 'Toggle'})}>Toggle</button>;
+export default view(({ model, dispatch }) =>
+  <button style={{ color: model ? 'green' : 'red'}} onClick={() => dispatch({ type: 'Toggle'})}>Toggle</button>);

redux-elm-tomkis1/src/counter/updater.js

@@ -1,16 +1,16 @@
-import { Updater, Matchers } from 'redux-elm';
+import { Updater } from 'redux-elm';
 
-export function increment(model) {
-  return model + 1;
-}
+export const increment = model => model + 1;
 
-export function incrementByTwo(model) {
+export const incrementByTwo = model => {
   if (model >= 10) {
     return model + 2;
   } else {
     return model + 1;
   }
 }
 
-export default new Updater(0)
+export const initialModel = 0;
+
+export default new Updater(initialModel)
   .toReducer();

redux-elm-tomkis1/src/counter/view.js

@@ -1,5 +1,6 @@
 import React from 'react';
+import { view } from 'redux-elm';
 
-export default ({ model }) =>
-  <div>Value: {model}</div>;
+export default view(({ model }) =>
+  <div>Value: {model}</div>);
 

redux-elm-tomkis1/src/gif-viewer-pair-of-pairs/updater.js

@@ -1,25 +1,17 @@
-import { Updater, mapEffects, Matchers } from 'redux-elm';
+import { Updater } from 'redux-elm';
+import { takeEvery } from 'redux-saga';
+import { put } from 'redux-saga/effects';
 
-import gifViewerPairUpdater, { init as gifViewerPairInit } from '../gif-viewer-pair/updater';
+import gifViewerUpdater, { initialModel as gifViewerInitialModel } from '../gif-viewer-pair/updater';
 
-export function* init() {
-  return {
-    leftPair: yield* mapEffects(gifViewerPairInit(), 'LeftPair'),
-    rightPair: yield* mapEffects(gifViewerPairInit(), 'RightPair')
-  };
-}
+export const initialModel = {
+  leftPair: gifViewerInitialModel,
+  rightPair: gifViewerInitialModel
+};
 
-export default new Updater(init)
-  .case('LeftPair', function*(model, action) {
-    return {
-      ...model,
-      leftPair: yield* mapEffects(gifViewerPairUpdater(model.leftPair, action), 'LeftPair')
-    };
-  })
-  .case('RightPair', function*(model, action) {
-    return {
-      ...model,
-      rightPair: yield* mapEffects(gifViewerPairUpdater(model.rightPair, action), 'RightPair')
-    };
-  })
-  .toReducer();
+export default new Updater(initialModel)
+  .case('LeftPair', (model, action) =>
+    ({ ...model, leftPair: gifViewerUpdater(model.leftPair, action) }))
+  .case('RightPair', (model, action) =>
+    ({ ...model, rightPair: gifViewerUpdater(model.rightPair, action) }))
+  .toReducer();

redux-elm-tomkis1/src/gif-viewer-pair-of-pairs/view.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { forwardTo } from 'redux-elm';
+import { view, forwardTo } from 'redux-elm';
 
 import GifViewerPair from '../gif-viewer-pair/view';
 
-export default ({ model, dispatch }) => (
+export default view(({ model, dispatch }) => (
   <div>
     <div style={{ float: 'left' }}>
       <GifViewerPair model={model.leftPair} dispatch={forwardTo(dispatch, 'LeftPair')} />
@@ -13,4 +13,4 @@ export default ({ model, dispatch }) => (
     </div>
     <div style={{ clear: 'both' }}></div>
   </div>
-);
+));

redux-elm-tomkis1/src/gif-viewer-pair/updater.js

@@ -1,28 +1,17 @@
-import { Updater, mapEffects, Matchers } from 'redux-elm';
+import { Updater } from 'redux-elm';
+import { takeEvery } from 'redux-saga';
+import { put } from 'redux-saga/effects';
 
-import gifViewerUpdater, { init as gifViewerInit, fetchGif } from '../gif-viewer/updater';
+import gifViewerUpdater, { init as gifViewerInit } from '../gif-viewer/updater';
 
-const funnyCatsGifViewerInit = gifViewerInit('funny cats');
-const funnyDogsGifViewerInit = gifViewerInit('funny dogs');
+export const initialModel = {
+  top: gifViewerInit('funny cats'),
+  bottom: gifViewerInit('funny dogs')
+};
 
-export function* init() {
-  return {
-    top: yield* mapEffects(funnyCatsGifViewerInit(), 'Top'),
-    bottom: yield* mapEffects(funnyDogsGifViewerInit(), 'Bottom')
-  };
-}
-
-export default new Updater(init)
-  .case('Top', function*(model, action) {
-    return {
-      ...model,
-      top: yield* mapEffects(gifViewerUpdater(model.top, action), 'Top')
-    };
-  })
-  .case('Bottom', function*(model, action) {
-    return {
-      ...model,
-      bottom: yield* mapEffects(gifViewerUpdater(model.bottom, action), 'Bottom')
-    };
-  })
+export default new Updater(initialModel)
+  .case('Top', (model, action) =>
+    ({ ...model, top: gifViewerUpdater(model.top, action) }))
+  .case('Bottom', (model, action) =>
+    ({ ...model, bottom: gifViewerUpdater(model.bottom, action) }))
   .toReducer();

redux-elm-tomkis1/src/gif-viewer-pair/view.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { forwardTo } from 'redux-elm';
+import { forwardTo, view } from 'redux-elm';
 
 import GifViewer from '../gif-viewer/view';
 
-export default ({ model, dispatch }) => (
+export default view(({ model, dispatch }) => (
   <div>
     <GifViewer model={model.top} dispatch={forwardTo(dispatch, 'Top')} />
     <GifViewer model={model.bottom} dispatch={forwardTo(dispatch, 'Bottom')} />
   </div>
-);
+));

redux-elm-tomkis1/src/gif-viewer/effects.js

@@ -1,6 +1,12 @@
-import request from 'superagent-bluebird-promise';
+require('isomorphic-fetch');
 
-export const fetchGif = (dispatch, topic) => {
-  request(`http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=${topic}`)
-    .then(response => dispatch({ type: 'NewGif', url: response.body.data.image_url }));
-};
+export const fetchGif = topic => fetch(`http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=${topic}`)
+  .then(response => {
+    if (response.status > 400) {
+      throw new Error('Error while fetching from the server');
+    } else {
+      return response.json();
+    }
+  })
+  .then(body => body.data.image_url);
+

redux-elm-tomkis1/src/gif-viewer/updater.js

@@ -1,34 +1,30 @@
-import { Updater, Matchers } from 'redux-elm';
-import { sideEffect } from 'redux-side-effects';
+import { Updater } from 'redux-elm';
+import { takeEvery } from 'redux-saga';
+import { call, put, select } from 'redux-saga/effects';
 
 import * as Effects from './effects';
 
-export function init(topic) {
-  return function*() {
-    yield sideEffect(Effects.fetchGif, topic);
+const getTopic = model => model.topic;
 
-    return {
-      topic,
-      gifUrl: null
-    };
-  };
-};
+function* fetchGif() {
+  const topic = yield select(getTopic);
+  const url = yield call(Effects.fetchGif, topic);
+  yield put({ type: 'NewGif', url });
+}
 
-export function* fetchGif(model) {
-  yield sideEffect(Effects.fetchGif, model.topic);
+function* saga() {
+  yield* fetchGif();
+  yield* takeEvery('RequestMore', fetchGif);
+}
 
-  return {
-    ...model,
-    gifUrl: null
-  };
-};
+export const requestMore = () => ({ type: 'RequestMore' });
 
-export default new Updater(init('funny cats'), Matchers.exactMatcher)
-  .case('NewGif', function*(model, action) {
-    return {
-      ...model,
-      gifUrl: action.url
-    }
-  })
-  .case('RequestMore', fetchGif)
-  .toReducer();
+export const init = topic => ({
+  topic,
+  gifUrl: null
+});
+
+export default new Updater(init('funny cats'), saga)
+  .case('NewGif', (model, { url }) => ({ ...model, gifUrl: url }))
+  .case('RequestMore', model => ({ ...model, gifUrl: null }))
+  .toReducer();

redux-elm-tomkis1/src/gif-viewer/view.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { view } from 'redux-elm';
 
 const renderGif = url => {
   if (url) {
@@ -8,10 +9,10 @@ const renderGif = url => {
   }
 }
 
-export default ({ model, dispatch }) => (
+export default view(({ model, dispatch }) => (
   <div style={{ width: '200px' }}>
     <h2 style={{ width: '200px', textAlign: 'center' }}>{model.topic}</h2>
     {renderGif(model.gifUrl)}
     <button onClick={() => dispatch({ type: 'RequestMore' })}>More Please!</button>
   </div>
-);
+));