@@ -1,12 +1,19 @@

+import * as R from "ramda";

 import React from "react";

 import ReactDOM from "react-dom";

 import { Provider, connect } from "react-redux";

 import { createStore, applyMiddleware, compose } from "redux";

 import createSagaMiddleware from "redux-saga";

-import { Root } from "./react";

-import { rootReducer, updateName } from "./redux";

-import { rootSaga, getIp } from "./saga";

+import { withDispatch } from "./redux-utils";

+import { restart, recordError } from "./saga-utils";

+import { take, spawn, delay } from "redux-saga/effects";

+

+import { Root } from "./toplevel-react";

+import { rootReducer, updateName } from "./reducer";

+import { rootSaga, getIp, fail } from "./root-saga";

+

+import { put } from "redux-saga/effects";

 // Store Setup ==============================================================================

@@ -20,29 +27,56 @@ export const store = createStore(

   composeEnhancers(applyMiddleware(sagaMiddleware))

 );

-// Run the root saga

-sagaMiddleware.run(rootSaga);

-

-// Connect Redux to Toplevel Component ======================================================

 const ConnectedRoot = connect(

   // Map the store's state to the toplevel component's props

-  ({ name, ip }) => ({ name, ip }),

+  R.pickAll(["name", "ip", "error"]),

   // Map redux's dispatch function to props that will call it with a specific action

-  dispatch => ({

-    getIp() {

-      dispatch(getIp());

-    },

-    updateName(v) {

-      dispatch(updateName(v));

-    }

-  })

+  withDispatch({ getIp, updateName, fail, restart })

 )(Root);

-// Render Connected Component to the dom at #root ===========================================

-ReactDOM.render(

-  // The Toplevel component is wrapped in a provider, to make the store available to connect

-  <Provider store={store}>

-    <ConnectedRoot />

-  </Provider>,

-  document.getElementById("root")

-);

+function* toplevel() {

+  // Run the root saga

+  let rootTask = yield spawn(rootSaga);

+

+  // Connect Redux to Toplevel Component ======================================================

+  // Render Connected Component to the dom at #root ===========================================

+  yield take("co/fwoar/APP_INIT");

+

+  const reactRender = new Promise(resolve => {

+    ReactDOM.render(

+      // The Toplevel component is wrapped in a provider, to make the store available to connect

+      <Provider store={store}>

+        <ConnectedRoot />

+      </Provider>,

+      document.getElementById("root"),

+      resolve

+    );

+  });

+

+  yield reactRender;

+

+  let quit = false;

+  while (!quit) {

+    try {

+      yield rootTask.toPromise();

+    } catch (err) {

+      console.log("Error!");

+      yield put(recordError(err));

+

+      const { type } = yield take([

+        "co/fwoar/APP_RESTART",

+        "co/fwoar/APP_QUIT"

+      ]);

+      if (type === "co/fwoar/APP_QUIT") {

+        console.log("Quitting!");

+        quit = true;

+      } else if (type === "co/fwoar/APP_RESTART") {

+        console.log("restarting");

+        rootTask = yield spawn(rootSaga);

+      }

+    }

+    yield delay(10);

+  }

+}

+

+sagaMiddleware.run(toplevel);

new file mode 100644

@@ -0,0 +1,22 @@

+import * as R from "ramda";

+import { typeEquals, action, applyAction } from "./redux-utils";

+import { errorReducer } from "./saga-utils";

+

+const UPDATE_NAME = "UPDATE_NAME";

+const UPDATE_IP = "UPDATE_IP";

+

+export const updateName = action(UPDATE_NAME);

+export const updateIp = action(UPDATE_IP);

+

+const initialState = {

+  name: "",

+  ip: "",

+  error: null

+};

+

+export const rootReducer = (state = initialState, action) =>

+  R.cond([

+    [typeEquals(UPDATE_NAME), applyAction("name", state)],

+    [typeEquals(UPDATE_IP), applyAction("ip", state)],

+    [R.T, action => ({ ...state, error: errorReducer(state.error, action) })]

+  ])(action);

new file mode 100644

@@ -0,0 +1,12 @@

+import * as R from "ramda";

+

+export const withDispatch = o => dispatch => R.map(f => v => dispatch(f(v)), o);

+export const typeEquals = R.propEq("type");

+

+export const updateStateFromAction = R.curry(

+  (actionKey, stateKey, state, action) =>

+    R.assoc(stateKey, R.prop(actionKey, action), state)

+);

+

+export const action = type => data => ({ type, data });

+export const applyAction = updateStateFromAction("data");

deleted file mode 100644

@@ -1,22 +0,0 @@

-const initialState = {

-  name: "",

-  ip: ""

-};

-

-export const updateName = newName => {

-  return { type: "UPDATE_NAME", data: newName };

-};

-

-export const updateIp = newIp => {

-  return { type: "UPDATE_IP", data: newIp };

-};

-

-export const rootReducer = (state = initialState, action) => {

-  if (action.type === "UPDATE_NAME") {

-    return { ...state, name: action.data };

-  } else if (action.type === "UPDATE_IP") {

-    return { ...state, ip: action.data };

-  } else {

-    return state;

-  }

-};

new file mode 100644

@@ -0,0 +1,25 @@

+import { takeLatest, take, put } from "redux-saga/effects";

+import { updateIp } from "./reducer";

+

+export function* rootSaga() {

+  yield put({ type: "co/fwoar/APP_INIT" });

+  yield takeLatest("GET_IP", ipWorker);

+  while (true) {

+    yield take("FAIL");

+    throw new Error("FAILURE!");

+  }

+}

+

+export function getIp() {

+  return { type: "GET_IP" };

+}

+

+export function fail() {

+  return { type: "FAIL" };

+}

+

+function* ipWorker() {

+  const ipR = yield fetch("https://api.ipify.org");

+  const ip = yield ipR.text();

+  yield put(updateIp(ip));

+}

new file mode 100644

@@ -0,0 +1,55 @@

+import * as R from "ramda";

+import { take, spawn, delay } from "redux-saga/effects";

+import { action } from "./redux-utils";

+

+export const restart = () => ({

+  type: "co/fwoar/APP_RESTART"

+});

+const RECORD_ERROR = "RECORD_ERROR";

+export const recordError = action(RECORD_ERROR);

+

+export const errorReducer = (state = null, { type, data }) => {

+  if (type === "co/fwoar/APP_RESTART") {

+    return null;

+  } else if (type === "co/fwoar/RECORD_ERROR") {

+    return data;

+  } else {

+    return state;

+  }

+};

+

+export const makeToplevel = (rootSaga, main, onError) =>

+  function* toplevel() {

+    // Run the root saga

+    let rootTask = yield spawn(rootSaga);

+

+    // Connect Redux to Toplevel Component ======================================================

+    // Render Connected Component to the dom at #root ===========================================

+    yield take("co/fwoar/APP_INIT");

+

+    yield main();

+

+    let quit = false;

+    while (!quit) {

+      try {

+        yield rootTask.toPromise();

+      } catch (err) {

+        console.log("Error!");

+        if (onError) {

+          yield* onError(err);

+        }

+        const { type } = yield take([

+          "co/fwoar/APP_RESTART",

+          "co/fwoar/APP_QUIT"

+        ]);

+        if (type === "co/fwoar/APP_QUIT") {

+          console.log("Quitting!");

+          quit = true;

+        } else if (type === "co/fwoar/APP_RESTART") {

+          console.log("restarting");

+          rootTask = yield spawn(rootSaga);

+        }

+      }

+      yield delay(10);

+    }

+  };

deleted file mode 100644

@@ -1,16 +0,0 @@

-import { takeLatest, put } from "redux-saga/effects";

-import { updateIp } from "./redux";

-

-export function* rootSaga() {

-  yield takeLatest("GET_IP", ipWorker);

-}

-

-export function getIp() {

-  return { type: "GET_IP" };

-}

-

-function* ipWorker() {

-  const ipR = yield fetch("https://api.ipify.org");

-  const ip = yield ipR.text();

-  yield put(updateIp(ip));

-}

\ No newline at end of file

similarity index 51%

rename from src/react.js

rename to src/toplevel-react.js

@@ -3,15 +3,26 @@ import PropTypes from "prop-types";

 import { NameControl } from "./NameControl";

 import { IpControl } from "./IpControl";

-export const Root = ({ name, updateName, ip, getIp }) => (

+export const Root = ({ name, updateName, ip, getIp, fail, error, restart }) => (

   <div>

+    {error ? (

+      <div>

+        {error}

+        <button onClick={restart}>Restart</button>

+      </div>

+    ) : null}

     <NameControl name={name} updateName={updateName} />

     <IpControl ip={ip} getIp={getIp} />

+    <button onClick={fail}>Fail</button>

+    <button onClick={restart}>Restart</button>

   </div>

 );

 Root.propTypes = {

+  error: PropTypes.any,

+  fail: PropTypes.func,

+  getIp: PropTypes.func,

   ip: PropTypes.string,

   name: PropTypes.string,

-  getIp: PropTypes.func,

+  restart: PropTypes.func,

   updateName: PropTypes.func

 };

new file mode 100644