#38: start adding data fetching for stakeholders and commits

ui/src/visualizations/team-awareness/chart/chart.js

@@ -3,11 +3,13 @@
 import React from 'react';
 
 export default class TeamArwareness extends React.Component {
-    constructor(props) {
-        super(props);
-    }
+  constructor(props) {
+    super(props);
+  }
 
-    render() {
-        return (<h1>Hello World</h1>);
-    }
-}
+  render() {
+    console.log('Chraph state');
+    console.log(this.props);
+    return <h1>Hello World</h1>;
+  }
+}

ui/src/visualizations/team-awareness/chart/index.js

@@ -1,5 +1,19 @@
 'use strict';
 
-import chart from './chart.js';
+import { connect } from 'react-redux';
+import { getState } from '../util/util.js';
+import Chart from './chart.js';
 
-export default chart;
+const mapStateToProps = (appState /*, chartState */) => {
+  const vizState = getState(appState);
+  return {
+    data: {
+      stakeholders: vizState.data.data.stakeholders,
+      activity: vizState.data.data.activity
+    }
+  };
+};
+
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Chart);

ui/src/visualizations/team-awareness/config.js

@@ -1,13 +1,45 @@
-import React from "react"
+'use strict';
 
+import React from 'react';
+import { connect } from 'react-redux';
+import { setSelectActivity } from './sagas';
 
-
-export default class ConfigComponent extends React.Component {
-    constructor(props) {
-        super(props);
+const mapStateToProps = (appState /*, ownProps*/) => {
+  const awarenessState = appState.visualizations.teamAwareness.state.config;
+  return {
+    config: {
+      selectedActivity: awarenessState.selectedActivity
     }
+  };
+};
+const mapDispatchToProps = dispatch => {
+  return {
+    onSelectActivity: selectActivity => dispatch(setSelectActivity(selectActivity))
+  };
+};
 
-    render() {
-        return (<h1>Team Arwareness Config</h1>);
-    }
-}
+class ConfigComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          <div>Activity:</div>
+          <div>
+            <select value={this.props.config.selectedActivity} onChange={value => this.props.onSelectActivity(value)}>
+              <option value="commits">Commits</option>
+              <option value="activity">Additions & Deletions</option>
+              <option value="additions">Additions</option>
+              <option value="deletions">Deletions</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfigComponent);

ui/src/visualizations/team-awareness/help.js

@@ -2,15 +2,12 @@
 
 import React from 'react';
 
-
 export default class HelpComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
+  constructor(props) {
+    super(props);
+  }
 
-    render() {
-        return (
-            <h1 className="title">Team Arwareness Help 1</h1>
-        );
-    }
+  render() {
+    return <h1 className="title">Team Awareness Help 1</h1>;
+  }
 }

ui/src/visualizations/team-awareness/index.js

@@ -1,17 +1,27 @@
 'use strict';
 
-import ChartComponent from './chart';
+import TeamAwarenessComponent from './chart';
 import ConfigComponent from './config';
 import HelpComponent from './help';
 import saga from './sagas';
 import reducer from './reducers';
+import { connect } from 'react-redux';
+
+const mapStateToProps = () => {
+  return {};
+};
+const mapDispatchToProps = () => {
+  return {};
+};
+
+const ChartComponent = connect(mapStateToProps, mapDispatchToProps)(TeamAwarenessComponent);
 
 export default {
-    id: "teamArwareness",
-    label: "Team Arwareness",
-    saga,
-    reducer,
-    ChartComponent,
-    ConfigComponent,
-    HelpComponent
-};
+  id: 'teamAwareness',
+  label: 'Team Awareness',
+  saga,
+  reducer,
+  ChartComponent,
+  ConfigComponent,
+  HelpComponent
+};

ui/src/visualizations/team-awareness/reducers/config.js

@@ -0,0 +1,10 @@
+'use strict';
+
+import { handleActions } from 'redux-actions';
+
+export default handleActions(
+  {},
+  {
+    selectedActivity: 'commits'
+  }
+);

ui/src/visualizations/team-awareness/reducers/data.js

@@ -0,0 +1,24 @@
+'use strict';
+
+import _ from 'lodash';
+import { handleActions } from 'redux-actions';
+
+export default handleActions(
+  {
+    REQUEST_TEAM_AWARENESS_DATA: state => {
+      return _.assign({}, state, { isFetching: true });
+    },
+    RECEIVE_TEAM_AWARENESS_DATA: (state, action) => {
+      return _.assign({}, state, {
+        data: action.payload,
+        isFetching: false,
+        receivedAt: action.meta.receivedAt
+      });
+    }
+  },
+  {
+    data: {},
+    lastFetched: null,
+    isFetching: null
+  }
+);

ui/src/visualizations/team-awareness/reducers/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
-import { handleActions } from 'redux-actions';
+import { combineReducers } from 'redux';
+import data from './data';
+import config from './config';
 
-export default handleActions({},{});
+export default combineReducers({ config, data });

ui/src/visualizations/team-awareness/sagas/getCommits.js

@@ -0,0 +1,33 @@
+import { graphQl, traversePages } from '../../../utils';
+
+/**
+ * Fetches commit data via GraphQL API from the data source.
+ */
+export default () => {
+  const buildList = [];
+  return traversePages(getCommits, build => buildList.push(build)).then(() => buildList);
+};
+
+const getCommits = (page, perPage) => {
+  return graphQl
+    .query(
+      `
+    query($page:Int, $perPage:Int) {
+        commits(page:$page, perPage:$perPage) {
+          data {
+                  date
+            stakeholder {
+              id
+            }
+            stats {
+              additions
+              deletions
+            }
+          }
+        }
+      }`,
+      page,
+      perPage
+    )
+    .then(result => result.commits);
+};

ui/src/visualizations/team-awareness/sagas/getStakeholders.js

@@ -0,0 +1,34 @@
+import { graphQl, traversePages } from '../../../utils';
+
+/**
+ * Fetches stakeholder data via GraphQL API from the data source.
+ */
+export default () => {
+  const buildList = [];
+  return traversePages(getStakeholders, build => buildList.push(build)).then(() => buildList);
+};
+
+/**
+ * Fetches paginated stakeholder data via GraphQL API from the data source.
+ * 
+ * @param {Number} page The page number to fetch.
+ * @param {Number} perPage The number of items per page.
+ * @returns {[]} An array of stakeholder data.
+ */
+const getStakeholders = (page, perPage) => {
+  return graphQl
+    .query(
+      `
+    query($page:Int, $perPage:Int){
+        stakeholders(page:$page, perPage: $perPage) {
+              data {
+            id
+            gitSignature
+          }
+        }
+      }`,
+      page,
+      perPage
+    )
+    .then(result => result.stakeholders);
+};

ui/src/visualizations/team-awareness/sagas/index.js

@@ -1,8 +1,49 @@
 'use strict';
 
-import { put } from "redux-saga/effects";
+import { createAction } from 'redux-actions';
+import { fork, takeEvery, throttle } from 'redux-saga/effects';
+import { fetchFactory, mapSaga, timestampedActionFactory } from '../../../sagas/utils';
+import getCommits from './getCommits';
+import getStakeholders from './getStakeholders';
 
+export const setSelectActivity = createAction('SET_SELECT_ACTIVITY');
+
+export const requestTeamAwarenessData = createAction('REQUEST_TEAM_AWARENESS_DATA');
+export const receiveTeamAwarenessData = timestampedActionFactory('RECEIVE_TEAM_AWARENESS_DATA');
+export const receiveTeamAwarenessDataError = timestampedActionFactory('RECEIVE_TEAM_AWARENESS_DATA');
+
+export const requestRefresh = createAction('REQUEST_REFRESH');
+const refresh = createAction('REFRESH');
 
 export default function*() {
-    yield put();
-};
+  yield* fetchAwarenessData();
+
+  yield fork(watchRefreshRequests);
+  yield fork(watchMessages);
+  yield fork(watchRefresh);
+}
+
+function* watchRefreshRequests() {
+  yield throttle(2000, 'REQUEST_REFRESH', mapSaga(refresh));
+}
+function* watchRefresh() {
+  yield takeEvery('REFRESH', fetchAwarenessData);
+}
+function* watchMessages() {
+  yield takeEvery('message', mapSaga(requestRefresh));
+}
+
+export const fetchAwarenessData = fetchFactory(
+  function*() {
+    //const state = getState(yield select());
+    return yield Promise.all([getStakeholders(), getCommits()]).then(result => {
+      return {
+        stakeholders: result[0],
+        activity: result[1]
+      };
+    });
+  },
+  requestTeamAwarenessData,
+  receiveTeamAwarenessData,
+  receiveTeamAwarenessDataError
+);

ui/src/visualizations/team-awareness/util/util.js

@@ -0,0 +1,7 @@
+/**
+ * Returns current state of the visualization.
+ * 
+ * @param {any} appState State of the application.
+ * @returns State of Team Awareness Visualization.
+ */
+export const getState = appState => appState.visualizations.teamAwareness.state;