WIP

ui/src/status/actions/index.js

@@ -1,3 +1,5 @@
+import {getJSONFeed as getJSONFeedAJAX} from 'src/status/apis'
+
 import {errorThrown} from 'shared/actions/errors'
 
 import {actionTypes} from 'src/status/constants'
@@ -7,16 +9,23 @@ const getJSONFeedRequested = url => ({
   payload: {url},
 })
 
-const getJSONFeedSuccess = url => ({
-  type: actionTypes.GET_JSON_FEED_SUCCESS,
+const getJSONFeedCompleted = (url, data) => ({
+  type: actionTypes.GET_JSON_FEED_COMPLETED,
+  payload: {url, data},
+})
+
+const getJSONFeedFailed = url => ({
+  type: actionTypes.GET_JSON_FEED_FAILED,
   payload: {url},
 })
 
 export const getJSONFeedAsync = url => async dispatch => {
   dispatch(getJSONFeedRequested(url))
   try {
-    dispatch(getJSONFeedSuccess(url))
+    const {data} = await getJSONFeedAJAX(url)
+    dispatch(getJSONFeedCompleted(url, data))
   } catch (error) {
+    dispatch(getJSONFeedFailed(url))
     dispatch(errorThrown(error, `Failed to get news feed from ${url}`))
   }
 }

ui/src/status/apis/index.js

@@ -0,0 +1,3 @@
+import {get} from 'utils/ajax'
+
+export const getJSONFeed = url => get

ui/src/status/components/JSONFeedPoller.js

@@ -1,15 +0,0 @@
-import React, {PropTypes} from 'react'
-
-import {getJSONFeedAsync} from 'src/status/actions'
-
-url
-
-const JSONFeedPoller = async EnhancedComponent => {
-  // TODO: use setState on fetch since otherwise need to track news feed by id in redux state
-  try {
-    const {data} = getJSONFeedAsync(url)
-  }
-  return <EnhancedComponent />
-}
-
-export default JSONFeedPoller

ui/src/status/components/withIntervalPolling.js

@@ -0,0 +1,47 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
+import {getJSONFeedAsync} from 'src/status/actions'
+
+import {errorThrown as errorThrownAction} from 'shared/actions/errors'
+
+const url = 'https://daringfireball.net/feeds/json'
+
+const withIntervalPolling = ComposedComponent => {
+  return class extends Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        isFetching: false,
+      }
+    }
+
+    async componentWillReceiveProps() {
+      this.setState({isFetching: true})
+      await getJSONFeedAsync(url)
+      this.setState({isFetching: false})
+    }
+
+    shouldComponentUpdate(nextProps) {
+      // only update if data updated, a la AutoRefresh
+    }
+
+    render() {
+      return <ComposedComponent data={data} {...this.props} />
+    }
+  }
+}
+
+// don't store in redux state?
+const mapStateToProps = ({status: {JSONFeed}}) => ({
+  JSONFeed,
+  // throw error from thunk and put errorThrown here
+})
+
+const mapDispatchToProps = dispatch => ({
+  errorThrown: bindActionCreators(errorThrownAction, dispatch),
+})
+
+export default connect(null, mapDispatchToProps)(withIntervalPolling)

ui/src/status/constants/actionTypes.js

@@ -1,2 +1,3 @@
 export const GET_JSON_FEED_REQUESTED = 'GET_JSON_FEED_REQUESTED'
-export const GET_JSON_FEED_SUCCESS = 'GET_JSON_FEED_SUCCESS'
+export const GET_JSON_FEED_COMPLETED = 'GET_JSON_FEED_COMPLETED'
+export const GET_JSON_FEED_FAILED = 'GET_JSON_FEED_FAILED'

ui/src/utils/ajax.js

@@ -53,3 +53,15 @@ export default async function AJAX({
     throw {...response, auth: {links: auth}, logout: links.logout} // eslint-disable-line no-throw-literal
   }
 }
+
+export const get = async url => {
+  try {
+    return await AJAX({
+      method: 'GET',
+      url,
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}