From 7582b7d5a060c90b8a5ae9179b4714f276c298b9 Mon Sep 17 00:00:00 2001 From: Paul Sastrasinh Date: Sat, 17 Dec 2016 19:44:38 -0500 Subject: [PATCH] add fetch users to actions / reducer --- package.json | 4 ++-- src/flux/actions/client.ts | 17 ++++++++++++++ src/flux/reducers/client.ts | 23 +++++++++++++++++++ src/flux/reducers/index.ts | 3 +++ src/pages/home/stats.tsx | 24 ++++++++++++++++---- webpack.config.js | 4 ++-- yarn.lock | 45 +++++++++++++++---------------------- 7 files changed, 85 insertions(+), 35 deletions(-) create mode 100644 src/flux/actions/client.ts create mode 100644 src/flux/reducers/client.ts diff --git a/package.json b/package.json index f66c56e..68da3a7 100644 --- a/package.json +++ b/package.json @@ -96,8 +96,8 @@ "tslint": "^4.1.1", "typescript": "^2.1.4", "webdriverio": "^4.4.0", - "webpack": "^2.1.0-beta.27", - "webpack-dev-server": "^2.1.0-beta.12", + "webpack": "^2.2.0-rc.1", + "webpack-dev-server": "^2.2.0-rc.0", "webpack-node-externals": "^1.5.4" }, "dependencies": { diff --git a/src/flux/actions/client.ts b/src/flux/actions/client.ts new file mode 100644 index 0000000..bf902d1 --- /dev/null +++ b/src/flux/actions/client.ts @@ -0,0 +1,17 @@ +import Client from 'src/client'; +import * as NProgress from 'nprogress'; +import { createAction } from 'redux-actions'; + +const chatalyticsHost = process.env.NODE_ENV === 'development' ? 'http://localhost' : ''; +const chatalyticsPort = process.env.NODE_ENV === 'development' ? 8080 : 80; + +const client = new Client(chatalyticsHost, chatalyticsPort); + +export const getUsers = createAction('GET_USERS', async () => { + try { + NProgress.start(); + return await client.users.getUsers(); + } finally { + NProgress.done(); + } +}); \ No newline at end of file diff --git a/src/flux/reducers/client.ts b/src/flux/reducers/client.ts new file mode 100644 index 0000000..4c7533b --- /dev/null +++ b/src/flux/reducers/client.ts @@ -0,0 +1,23 @@ +import { message } from 'antd'; +import { handleActions, ActionMeta } from 'redux-actions'; +import * as Actions from 'src/flux/actions/client'; +import User from 'src/model/user'; + +export class ClientState { + public readonly users: Map; +} + +export const clientReducer = handleActions({ + GET_USERS: (state, action: ActionMeta) => { + if (action.error) { + message.error(`Error fetching users`); + } else { + return Object.assign({}, state, { + users: action.payload, + }); + } + return state; + }, +}, { + users: new Map(), +}); \ No newline at end of file diff --git a/src/flux/reducers/index.ts b/src/flux/reducers/index.ts index a79297c..7315c3a 100644 --- a/src/flux/reducers/index.ts +++ b/src/flux/reducers/index.ts @@ -5,8 +5,10 @@ import { routerReducer } from 'react-router-redux'; import { handleActions, ActionMeta } from 'redux-actions'; import * as request from 'superagent'; import * as moment from 'moment'; +import { clientReducer, ClientState } from './client'; export class State { + public readonly client: ClientState; public readonly data: Object; public readonly dateRange: { end: moment.Moment, start: moment.Moment}; public readonly routing: any; @@ -40,6 +42,7 @@ export const dateRangeReducer = handleActions({ }); export default combineReducers({ + client: clientReducer, data: dataReducer, dateRange: dateRangeReducer, routing: routerReducer, diff --git a/src/pages/home/stats.tsx b/src/pages/home/stats.tsx index 1972bc6..79a8ebd 100644 --- a/src/pages/home/stats.tsx +++ b/src/pages/home/stats.tsx @@ -5,6 +5,8 @@ import Vega from 'src/pages/components/charts/vega'; import Async from 'src/pages/components/async'; import { connect } from 'react-redux'; import { State } from 'src/flux/reducers'; +import { ClientState } from 'src/flux/reducers/client'; +import * as ClientActions from 'src/flux/actions/client'; // tslint:disable-next-line:no-var-requires const example = require('src/assets/chart_examples/area_graph.json'); @@ -12,19 +14,26 @@ const example = require('src/assets/chart_examples/area_graph.json'); const humanize = require('humanize-plus'); interface StatsProps { + client?: ClientState; endDate?: moment.Moment; startDate?: moment.Moment; + fetchUsers?: () => void; } export class Stats extends React.Component { - public render() { - const { startDate, endDate } = this.props; + + public componentWillMount(): void { + this.props.fetchUsers(); + } + + public render(): JSX.Element { + const { startDate, endDate, client } = this.props; return (

Over the past {startDate.from(endDate, true)} there have been

- {humanize.intComma(543977)} chat messages across {humanize.intComma(353)} + {humanize.intComma(543977)} chat messages across {humanize.intComma(client.users.size)}  active users in {humanize.intComma(45)} active rooms

@@ -40,9 +49,16 @@ export class Stats extends React.Component { const mapStateToProps = (state: State, props: StatsProps): StatsProps => { return { + client: state.client, endDate: state.dateRange.end, startDate: state.dateRange.start, }; }; -export default connect(mapStateToProps)(Stats); \ No newline at end of file +const mapDispatchToProps = (dispatch): StatsProps => { + return { + fetchUsers: () => dispatch(ClientActions.getUsers()), + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Stats); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index b99892d..23d514b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,7 +12,7 @@ module.exports = { devtool: "source-map", entry: [ "./src/index.tsx", - "webpack-dev-server/client?http://127.0.0.1:8080", + "webpack-dev-server/client?http://localhost:3000", "webpack/hot/only-dev-server", ], @@ -49,7 +49,7 @@ module.exports = { output: { filename: "bundle.js", - publicPath: "http://127.0.0.1:8080/", + publicPath: "http://localhost:3000/", }, plugins: [ diff --git a/yarn.lock b/yarn.lock index 7570947..75bc42b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2508,15 +2508,6 @@ end-of-stream@^1.0.0: dependencies: once "~1.3.0" -enhanced-resolve@^2.2.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-2.3.0.tgz#a115c32504b6302e85a76269d7a57ccdd962e359" - dependencies: - graceful-fs "^4.1.2" - memory-fs "^0.3.0" - object-assign "^4.0.1" - tapable "^0.2.3" - enhanced-resolve@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.0.2.tgz#0fa709f29e59ee23e6bbcb070c85f992d6247cd1" @@ -4279,16 +4270,16 @@ media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" -memory-fs@^0.3.0, memory-fs@~0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20" +memory-fs@^0.4.0, memory-fs@~0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" dependencies: errno "^0.1.3" readable-stream "^2.0.1" -memory-fs@^0.4.0, memory-fs@~0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" +memory-fs@~0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20" dependencies: errno "^0.1.3" readable-stream "^2.0.1" @@ -6310,7 +6301,7 @@ select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" -selenium-standalone@^5.8.0: +selenium-standalone@^5.9.0: version "5.9.0" resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-5.9.0.tgz#988c89da94277e5b8f236718f28e9eecccde99bd" dependencies: @@ -6836,7 +6827,7 @@ tap-xunit@^1.4.0: xmlbuilder "~4.1.0" xtend "~4.0.0" -tapable@^0.2.3, tapable@^0.2.5, tapable@~0.2.3: +tapable@^0.2.5, tapable@~0.2.5: version "0.2.5" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.5.tgz#1ff6ce7ade58e734ca9bfe36ba342304b377a4d0" @@ -7356,7 +7347,7 @@ webidl-conversions@^3.0.0, webidl-conversions@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" -webpack-dev-middleware@^1.4.0: +webpack-dev-middleware@^1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa" dependencies: @@ -7365,9 +7356,9 @@ webpack-dev-middleware@^1.4.0: path-is-absolute "^1.0.0" range-parser "^1.0.3" -webpack-dev-server@^2.1.0-beta.12: - version "2.1.0-beta.12" - resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.1.0-beta.12.tgz#f717e7b69214dae0e7a2061c12d128432d7520ef" +webpack-dev-server@^2.2.0-rc.0: + version "2.2.0-rc.0" + resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.2.0-rc.0.tgz#ea8a11e211d9524b8999945fe5645481a51fdf46" dependencies: chokidar "^1.6.0" compression "^1.5.2" @@ -7382,7 +7373,7 @@ webpack-dev-server@^2.1.0-beta.12: spdy "^3.4.1" strip-ansi "^3.0.0" supports-color "^3.1.1" - webpack-dev-middleware "^1.4.0" + webpack-dev-middleware "^1.9.0" yargs "^6.0.0" webpack-node-externals@^1.5.4: @@ -7396,16 +7387,16 @@ webpack-sources@^0.1.0: source-list-map "~0.1.0" source-map "~0.5.3" -webpack@^2.1.0-beta.27: - version "2.1.0-beta.28" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.1.0-beta.28.tgz#8f9402c05bae04ab8d3918489b3547544a2e2641" +webpack@^2.2.0-rc.1: + version "2.2.0-rc.1" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.0-rc.1.tgz#5a85e73942b6ecc23ce6bc9e6d0883883e692e29" dependencies: acorn "^4.0.3" acorn-dynamic-import "^2.0.0" ajv "^4.7.0" ajv-keywords "^1.1.1" async "^2.1.2" - enhanced-resolve "^2.2.0" + enhanced-resolve "^3.0.0" interpret "^1.0.0" json-loader "^0.5.4" loader-runner "^2.2.0" @@ -7416,7 +7407,7 @@ webpack@^2.1.0-beta.27: object-assign "^4.0.1" source-map "^0.5.3" supports-color "^3.1.0" - tapable "~0.2.3" + tapable "~0.2.5" uglify-js "~2.7.3" watchpack "^1.0.0" webpack-sources "^0.1.0"