From 4997463229257c2fe56dc66de73efad0e4e7d0c5 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Tue, 28 Feb 2017 14:16:37 -0700
Subject: [PATCH] Add Users container page.

---
 ui/.eslintrc                         |  2 +-
 ui/src/index.js                      |  2 ++
 ui/src/store/configureStore.js       |  2 ++
 ui/src/users/actions/index.js        | 13 ++++++++
 ui/src/users/apis/index.js           | 12 +++++++
 ui/src/users/containers/UsersPage.js | 48 ++++++++++++++++++++++++++++
 ui/src/users/index.js                |  2 ++
 ui/src/users/reducers/users.js       |  8 +++++
 8 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/users/actions/index.js
 create mode 100644 ui/src/users/apis/index.js
 create mode 100644 ui/src/users/containers/UsersPage.js
 create mode 100644 ui/src/users/index.js
 create mode 100644 ui/src/users/reducers/users.js

diff --git a/ui/.eslintrc b/ui/.eslintrc
index c86aa2eea..833ab1ce6 100644
--- a/ui/.eslintrc
+++ b/ui/.eslintrc
@@ -230,7 +230,7 @@
     'react/no-string-refs': 0, // TODO: 2
     'react/no-unknown-property': 2,
     'react/prop-types': 2,
-    'react/prefer-es6-class': [2, 'never'],
+    'react/prefer-es6-class': 0,
     'react/react-in-jsx-scope': 2,
     'react/require-extension': 0,
     'react/self-closing-comp': 0, // TODO: we can re-enable this if some brave soul wants to update the code (mostly spans acting as icons)
diff --git a/ui/src/index.js b/ui/src/index.js
index c2a8f4cd3..fb0e7cdf3 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -14,6 +14,7 @@ import {KapacitorPage, KapacitorRulePage, KapacitorRulesPage, KapacitorTasksPage
 import DataExplorer from 'src/data_explorer';
 import {DashboardsPage, DashboardPage} from 'src/dashboards';
 import {CreateSource, SourcePage, ManageSources} from 'src/sources';
+import {UsersPage} from 'src/users';
 import NotFound from 'src/shared/components/NotFound';
 import configureStore from 'src/store/configureStore';
 import {getMe, getSources} from 'shared/apis';
@@ -127,6 +128,7 @@ const Root = React.createClass({
               <Route path="alert-rules" component={KapacitorRulesPage} />
               <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
               <Route path="alert-rules/new" component={KapacitorRulePage} />
+              <Route path="users" component={UsersPage} />
             </Route>
           </Route>
           <Route path="*" component={NotFound} />
diff --git a/ui/src/store/configureStore.js b/ui/src/store/configureStore.js
index 44b03fa66..6c9bda148 100644
--- a/ui/src/store/configureStore.js
+++ b/ui/src/store/configureStore.js
@@ -7,12 +7,14 @@ import * as dataExplorerReducers from 'src/data_explorer/reducers';
 import * as sharedReducers from 'src/shared/reducers';
 import rulesReducer from 'src/kapacitor/reducers/rules';
 import dashboardUI from 'src/dashboards/reducers/ui';
+import usersReducer from 'src/users/reducers/users';
 import persistStateEnhancer from './persistStateEnhancer';
 
 const rootReducer = combineReducers({
   ...sharedReducers,
   ...dataExplorerReducers,
   rules: rulesReducer,
+  users: usersReducer,
   dashboardUI,
 });
 
diff --git a/ui/src/users/actions/index.js b/ui/src/users/actions/index.js
new file mode 100644
index 000000000..43061298e
--- /dev/null
+++ b/ui/src/users/actions/index.js
@@ -0,0 +1,13 @@
+import {getUsers} from 'src/users/apis'
+
+export const loadUsers = (users) => ({
+  type: 'LOAD_USERS',
+  payload: {
+    users,
+  },
+})
+
+export const loadUsersAsync = (url) => async (dispatch) => {
+  const users = await getUsers(url)
+  dispatch(loadUsers(users))
+}
diff --git a/ui/src/users/apis/index.js b/ui/src/users/apis/index.js
new file mode 100644
index 000000000..b2aba16e1
--- /dev/null
+++ b/ui/src/users/apis/index.js
@@ -0,0 +1,12 @@
+import AJAX from 'src/utils/ajax'
+
+export const getUsers = async (url) => {
+  try {
+    return await AJAX({
+      method: 'GET',
+      url,
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+}
diff --git a/ui/src/users/containers/UsersPage.js b/ui/src/users/containers/UsersPage.js
new file mode 100644
index 000000000..3d1a870a6
--- /dev/null
+++ b/ui/src/users/containers/UsersPage.js
@@ -0,0 +1,48 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {loadUsersAsync} from 'src/users/actions'
+
+class UsersPage extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    const {source, loadUsers} = this.props
+    loadUsers(source.links.users)
+  }
+
+  render() {
+    return (
+      <div>Hello Users</div>
+    )
+  }
+}
+
+const {
+  func,
+  shape,
+  string,
+} = PropTypes
+
+UsersPage.propTypes = {
+  source: shape({
+    id: string.isRequired,
+    links: shape({
+      users: string.isRequired,
+    }),
+  }).isRequired,
+  users: shape(),
+  loadUsers: func,
+}
+
+const mapStateToProps = ({users}) => ({
+  users,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  loadUsers: bindActionCreators(loadUsersAsync, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(UsersPage);
diff --git a/ui/src/users/index.js b/ui/src/users/index.js
new file mode 100644
index 000000000..366e4d3d3
--- /dev/null
+++ b/ui/src/users/index.js
@@ -0,0 +1,2 @@
+import UsersPage from './containers/UsersPage';
+export {UsersPage};
diff --git a/ui/src/users/reducers/users.js b/ui/src/users/reducers/users.js
new file mode 100644
index 000000000..77bf7c16e
--- /dev/null
+++ b/ui/src/users/reducers/users.js
@@ -0,0 +1,8 @@
+export default function users(state = {}, action) {
+  switch (action.type) {
+    case 'LOAD_USERS': {
+      return {...state, ...action.payload}
+    }
+  }
+  return state
+}