Display errors

src/components/errors/index.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { connect } from "react-redux"
+import { State } from "model"
+
+export interface ErrorDisplayProps {
+  latestError: string | undefined
+}
+
+export class ErrorDisplay extends React.Component<ErrorDisplayProps, void> {
+  public render() {
+    return (
+      <div>
+        {this.props.latestError}
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state: State): ErrorDisplayProps {
+  return {
+    latestError: state.errors.latestError,
+  }
+}
+
+export default connect(mapStateToProps)(ErrorDisplay)

src/index.tsx

@@ -11,6 +11,7 @@ import "./index.styl"
 import CalendarWeek from "components/calendar-week"
 import CalendarInput from "components/input"
 import CalendarSelection from "components/selection"
+import ErrorDisplay from "components/errors"
 
 
 const store = configureStore({})
@@ -26,6 +27,7 @@ class Out extends React.Component<void, void> {
       <div>
         <CalendarInput />
         <CalendarSelection />
+        <ErrorDisplay />
         <CalendarWeek />
       </div>
     )

src/model/modules/calendars.ts

@@ -2,7 +2,8 @@ import { Action as ReduxAction, MiddlewareAPI } from "redux"
 import { Observable } from "rxjs"
 import { ActionsObservable } from "redux-observable"
 import { IcsInterval, URL, SelectionChange, State } from "model"
-import actionCreator, { isType, Action } from "redux-typescript-actions"
+import { errorTranslators } from "./errors"
+import actionCreator, { isType, Action, FailedAction } from "redux-typescript-actions"
 import { ajax } from "rxjs/observable/dom/ajax.js"
 import { parseICS, IcsEntry } from "ical/ical.js"
 import * as moment from "moment"
@@ -17,14 +18,17 @@ export interface CalendarsState {
 export const REQUEST_URL = actionCreator.async<URL, IcsInterval[], Error>("SCHEDULE_REQUEST_URL")
 export const SELECTION_CHANGE = actionCreator<SelectionChange>("SELECTION_CHANGE")
 
+errorTranslators[REQUEST_URL.failed.type] = (x: Action<FailedAction<URL, Error>>) =>
+  `Failed to get ${x.payload.params}: ${JSON.stringify(x.payload.error, ["message", "arguments", "type", "name"])}`
+
 function isDayStart(m: moment.Moment): boolean {
   return m.isSame(moment(m).startOf("day"))
 }
 
-export const requestUrlEpic = (action$: ActionsObservable<URL>, store: MiddlewareAPI<State>) =>
+export const requestUrlEpic = (action$: ActionsObservable<Action<URL>>, store: MiddlewareAPI<State>) =>
   action$
     .ofType(REQUEST_URL.started.type)
-    .mergeMap((action: Action<string>) => {
+    .mergeMap((action: Action<URL>) => {
       if (store.getState().schedule[action.payload]) {
         return Observable.empty()
       }

src/model/modules/errors.ts

@@ -0,0 +1,43 @@
+import { Action as ReduxAction, MiddlewareAPI } from "redux"
+import {
+  State,
+} from "model"
+import actionCreator, { isType, Action } from "redux-typescript-actions"
+import { ActionsObservable } from "redux-observable"
+
+export interface ErrorsState {
+  latestError?: string,
+}
+
+export const NEW_ERROR = actionCreator<string>("NEW_ERROR")
+
+interface ET {
+  [key: string]: (x: ReduxAction) => string | undefined
+}
+
+
+// Add to this object to add more error translations
+export const errorTranslators: ET = {}
+
+export const errorsEpic = (action$: ActionsObservable<ReduxAction>, store: MiddlewareAPI<State>) =>
+  action$
+  .map<ReduxAction, Action<string> | undefined>(x => {
+    const f = errorTranslators[x.type]
+    if (f !== undefined) {
+      const fx = f(x)
+      if (fx !== undefined) {
+        return NEW_ERROR(fx)
+      }
+    }
+  })
+  .filterUndefined()
+
+
+export const errors = (state = {}, action: ReduxAction): ErrorsState => {
+  if (isType(action, NEW_ERROR)) {
+    return {
+      latestError: action.payload,
+    }
+  }
+  return state
+}

src/model/modules/root.ts

@@ -2,18 +2,22 @@ import { combineReducers } from "redux"
 import { combineEpics } from "redux-observable"
 import { requestUrlEpic, schedule, CalendarsState } from "./calendars"
 import { tree, TreeState, toggleEpic } from "./tree"
+import { errors, ErrorsState, errorsEpic } from "./errors"
 
 export const rootEpic = combineEpics(
+  errorsEpic,
   requestUrlEpic,
   toggleEpic
 )
 
 export interface State {
   schedule: CalendarsState
   tree: TreeState
+  errors: ErrorsState
 }
 
 export const rootReducer = combineReducers<State>({
+  errors,
   schedule,
   tree,
 })