refactor(profile): migrate profile page to redux

frontend/src/main/web/package.json

@@ -63,20 +63,16 @@
     "classnames": "^2.1.3",
     "defined": "^1.0.0",
     "dom-helpers": "^2.4.0",
-    "es6-promise": "^2.0.1",
-    "events": "^1.0.2",
     "fixed-data-table": "^0.5.0",
     "flat": "^1.6.0",
-    "flux": "^2.0.3",
     "history": "^2.0.0",
     "immutable": "^3.7.6",
     "isomorphic-fetch": "^2.2.1",
     "keymirror": "^0.1.1",
-    "lodash": "^4.0.1",
+    "lodash": "4.13.1",
     "moment": "^2.12.0",
     "moment-range": "^2.2.0",
     "normalizr": "^2.0.0",
-    "object-assign": "^2.0.0",
     "react": "^0.14.7",
     "react-a11y": "^0.2.8",
     "react-addons-pure-render-mixin": "^0.14.6",
@@ -96,7 +92,6 @@
     "redux-api-middleware": "^1.0.0-beta3",
     "redux-logger": "^2.5.0",
     "redux-thunk": "^1.0.3",
-    "superagent": "^0.21.0",
     "warning": "^2.1.0",
     "webfontloader": "^1.6.21"
   },
@@ -107,10 +102,7 @@
       "./node_modules/react-dom",
       "./node_modules/react-addons-test-utils",
       "./node_modules/fbjs",
-      "./node_modules/object-assign",
-      "./node_modules/es6-promise",
       "./node_modules/lodash",
-      "./node_modules/events",
       "./src"
     ],
     "moduleFileExtensions": [

frontend/src/main/web/src/actions/profile.js

@@ -0,0 +1,121 @@
+import { createAction } from 'redux-actions'
+import { CALL_API } from 'redux-api-middleware'
+import { isEmpty, includes } from 'lodash'
+import utilsDate from '../utils/DateHelper'
+
+import {
+  getJsonHeaders,
+  buildAPIRequest
+} from './common'
+
+export const FILTER_UPDATE = 'FILTER_UPDATE'
+export const DATE_RANGE_UPDATE = 'DATE_RANGE_UPDATE'
+export const SELECT_DAY_UPDATE = 'SELECT_DAY_UPDATE'
+
+export const LOAD_USER_REQUEST = 'LOAD_USER_REQUEST'
+export const LOAD_USER_SUCCESS = 'LOAD_USER_SUCCESS'
+export const LOAD_USER_FAILURE = 'LOAD_USER_FAILURE'
+
+export const USER_STATS_REQUEST = 'USER_STATS_REQUEST'
+export const USER_STATS_SUCCESS = 'USER_STATS_SUCCESS'
+export const USER_STATS_FAILURE = 'USER_STATS_FAILURE'
+
+export const updateDateRange = createAction(DATE_RANGE_UPDATE)
+export const updateFilter = createAction(FILTER_UPDATE)
+export const updateSelectDay = createAction(SELECT_DAY_UPDATE)
+
+const getStatsEndPoint = (username, fromDate, toDate) => {
+  return window.config.baseUrl + window.config.apiRoot +
+    '/stats/user/' + username + '/' + fromDate + '..' + toDate
+}
+
+const getUserStatistics = (username, fromDate, toDate) => {
+  const endpoint = getStatsEndPoint(username, fromDate, toDate)
+  const apiTypes = [
+    USER_STATS_REQUEST,
+    {
+      type: USER_STATS_SUCCESS,
+      payload: (action, state, res) => {
+        const contentType = res.headers.get('Content-Type')
+        if (contentType && includes(contentType, 'json')) {
+          return res.json().then((json) => {
+            return json
+          })
+        }
+      },
+      meta: {
+        receivedAt: Date.now()
+      }
+    },
+    USER_STATS_FAILURE
+  ]
+  return {
+    [CALL_API]: buildAPIRequest(endpoint, 'GET', getJsonHeaders(), apiTypes)
+  }
+}
+
+const loadUserStats = (username, dateRangeOption) => {
+  return (dispatch, getState) => {
+    const dateRange = utilsDate.getDateRangeFromOption(dateRangeOption)
+    dispatch(getUserStatistics(username, dateRange.fromDate, dateRange.toDate))
+  }
+}
+
+const getUserInfo = (dispatch, username, dateRangeOption) => {
+  const endpoint = window.config.baseUrl + window.config.apiRoot + '/user' +
+    (isEmpty(username) ? '' : '/' + username)
+
+  const apiTypes = [
+    LOAD_USER_REQUEST,
+    {
+      type: LOAD_USER_SUCCESS,
+      payload: (action, state, res) => {
+        const contentType = res.headers.get('Content-Type')
+        if (contentType && includes(contentType, 'json')) {
+          return res.json().then((json) => {
+            dispatch(loadUserStats(username, dateRangeOption))
+            return json
+          })
+        }
+      },
+      meta: {
+        receivedAt: Date.now()
+      }
+    },
+    LOAD_USER_FAILURE
+  ]
+  return {
+    [CALL_API]: buildAPIRequest(endpoint, 'GET', getJsonHeaders(), apiTypes)
+  }
+}
+
+export const profileInitialLoad = (username) => {
+  return (dispatch, getState) => {
+    dispatch(getUserInfo(dispatch, username || window.config.user.username,
+      getState().profile.dateRangeOption))
+  }
+}
+
+export const dateRangeChanged = (dataRangeOption) => {
+  return (dispatch, getState) => {
+    const username = getState().profile.user.username
+    dispatch(updateDateRange(dataRangeOption))
+    dispatch(loadUserStats(username, dataRangeOption))
+  }
+}
+
+export const filterUpdate = (contentState) => {
+  return (dispatch, getState) => {
+    if (getState().profile.contentStateOption !== contentState) {
+      dispatch(updateFilter(contentState))
+    }
+  }
+}
+
+export const selectDayChanged = (day) => {
+  return (dispatch, getState) => {
+    // click the same day again will cancel selection
+    const selectedDay = getState().profile.selectedDay !== day ? day : null
+    dispatch(updateSelectDay(selectedDay))
+  }
+}

frontend/src/main/web/src/constants/Options.js

@@ -1,6 +1,6 @@
-var ContentStates = ['Total', 'Approved', 'Translated', 'Needs Work']
-var ContentStateStyles = ['plain', 'primary', 'success', 'unsure']
-var DateRanges = [
+export const ContentStates = ['Total', 'Approved', 'Translated', 'Needs Work']
+export const ContentStateStyles = ['plain', 'primary', 'success', 'unsure']
+export const DateRanges = [
   {
     value: 'thisWeek',
     label: 'This Week'
@@ -18,7 +18,3 @@ var DateRanges = [
     label: 'Last Month'
   }
 ]
-
-exports.ContentStates = ContentStates
-exports.ContentStateStyles = ContentStateStyles
-exports.DateRanges = DateRanges

frontend/src/main/web/src/containers/Root.js

@@ -25,7 +25,7 @@ export default class Root extends Component {
                 onEnter={() => store.dispatch(glossaryInitialLoad())} />
               <Route path='profile/:username' component={UserProfile} />
               <Route path='explore' component={Explore}
-                onEnter={() => store.dispatch(searchPageInitialLoad())}/>
+                onEnter={() => store.dispatch(searchPageInitialLoad())} />
               <Redirect from='profile' to={`profile/${username}`} />
               <Redirect from='/' to={`profile/${username}`} />
             </Route>