From 6377d650fb0ec0577671969778c54e1efcd595d0 Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 09:50:47 +0200 Subject: [PATCH 01/18] package json added --- package.json | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..8b17690 --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "ReactJS-Hackathon-App", + "version": "1.0", + "description": "ReactJS Hackathon App", + "author": "Nca-Team", + "license": "open-source", + "main": "app/js/index.jsx", + "repository": { + "type": "git", + "url": "https://github.com/oliverlaz/hackathon" + }, + "dependencies": { + "babel-runtime": "^4.7.16", + "classnames": "^2.1.2", + "immutable": "^3.7.2", + "react": "^0.13.3", + "superagent": "^0.21.0" + }, + "devDependencies": { + "babelify": "^5.0.5", + "browserify": "^10.2.4", + "gulp": "^3.8.11", + "gulp-help": "^1.6.0" + } +} From 2fc81f16c59458aa2f87bcf2378ac718ae34d48d Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 09:53:07 +0200 Subject: [PATCH 02/18] gitignore added --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dd3e4be --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +# IntelliJ +.idea +*.iml From 521527257f941c56cc913b03d343445399dd4d50 Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 10:01:27 +0200 Subject: [PATCH 03/18] added npm to gitignore, changed version in package json --- .gitignore | 4 ++++ package.json | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index dd3e4be..f91993c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ # IntelliJ .idea *.iml + +# Node +node_modules +npm-debug.log \ No newline at end of file diff --git a/package.json b/package.json index 8b17690..9c20f4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ReactJS-Hackathon-App", - "version": "1.0", + "version": "1.0.0", "description": "ReactJS Hackathon App", "author": "Nca-Team", "license": "open-source", @@ -20,6 +20,7 @@ "babelify": "^5.0.5", "browserify": "^10.2.4", "gulp": "^3.8.11", - "gulp-help": "^1.6.0" + "gulp-help": "^1.6.0", + "del": "^1.1.1" } } From d546863b6b3fbb07994ae8c60bcb05e9f1f23c64 Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 10:36:24 +0200 Subject: [PATCH 04/18] added http with superagent --- app/js/http.jsx | 43 +++++++++++++++++++++++++++++++++++++++++++ app/js/index.jsx | 4 ++++ package.json | 1 + 3 files changed, 48 insertions(+) create mode 100644 app/js/http.jsx create mode 100644 app/js/index.jsx diff --git a/app/js/http.jsx b/app/js/http.jsx new file mode 100644 index 0000000..9fc93ce --- /dev/null +++ b/app/js/http.jsx @@ -0,0 +1,43 @@ +"use strict"; + +var objectAssign = require('object-assign'); +var request = require('superagent'); +var Immutable = require('immutable'); + +/** + * @constructor + */ +var Http = function () { + this.displayName = "Http"; +}; + +objectAssign(Http.prototype, { + + /** + * Gets JSON data from a given URL. + * + * @param url The URL to be used for getting the data. + * @param callback Callback function that will be called after successful fetching of the data. + */ + get(url, callback) { + request + .get(url) + .end(function (result) { + if (result.ok) { + var pageData; + if (result.body) { + pageData = Immutable.fromJS(result.body); + } else { + // if the type was text/html (but json is returned) + // we try to parse it manually + pageData = Immutable.fromJS(JSON.parse(result.text)); + } + } + if (pageData) { + callback(pageData); + } + }); + } +}); + +module.exports = Http; \ No newline at end of file diff --git a/app/js/index.jsx b/app/js/index.jsx new file mode 100644 index 0000000..91ba5bd --- /dev/null +++ b/app/js/index.jsx @@ -0,0 +1,4 @@ +"use strict"; + +import React from 'react'; + diff --git a/package.json b/package.json index 9c20f4c..5e3cb00 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "babel-runtime": "^4.7.16", "classnames": "^2.1.2", "immutable": "^3.7.2", + "object-assign": "^3.0.0", "react": "^0.13.3", "superagent": "^0.21.0" }, From a0a7b151d4c3b511c606a874fce0542b75c3bee5 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 10:49:30 +0200 Subject: [PATCH 05/18] ReactJS project setup, gulpfile, browserify --- Gulpfile.js | 48 +++++++++++++++++++++++++++++++++++++++++++++ app/index.html | 26 ++++++++++++++++++++++++ app/js/app.jsx | 0 app/styles/main.css | 0 package.json | 15 ++++++++++---- 5 files changed, 85 insertions(+), 4 deletions(-) create mode 100644 Gulpfile.js create mode 100644 app/index.html create mode 100644 app/js/app.jsx create mode 100644 app/styles/main.css diff --git a/Gulpfile.js b/Gulpfile.js new file mode 100644 index 0000000..17bb423 --- /dev/null +++ b/Gulpfile.js @@ -0,0 +1,48 @@ +var gulp = require('gulp'); +var reactify = require('reactify'); +var browserify = require('browserify'); +var source = require('vinyl-source-stream'); +var del = require('del'); +var pkg = require('./package.json'); + +var paths = { + main: "./" + pkg.main, + js: ['app/js/**/*.js'], + statics: ['app/images', 'app/styles/**/*.*', 'app/index.html'], + dist: './dist' +}; + +var config = { + browserify: { + entries: [paths.main], + debug: true, + standalone: pkg.name, + extensions: ['.jsx', '.js'] + } +}; + +gulp.task('clean', function(done) { + del(['dist'], done); +}); + +gulp.task('copy', function() { + gulp.src(paths.statics) + .pipe(gulp.dest(paths.dist)) +}); + +gulp.task('js', function() { + browserify(config.browserify) + .transform(reactify) + .bundle() + .pipe(source('bundle.js')) + .pipe(gulp.dest(paths.dist + "/js/")); +}); + +gulp.task('watch', function() { + gulp.watch(paths.js, ['js']); + gulp.watch(paths.statics, ['copy']); +}); + +gulp.task('dist', ['js', 'copy']); + +gulp.task('default', ['watch', 'dist']); diff --git a/app/index.html b/app/index.html new file mode 100644 index 0000000..468c9c0 --- /dev/null +++ b/app/index.html @@ -0,0 +1,26 @@ + + + + React Hackathon + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/app/js/app.jsx b/app/js/app.jsx new file mode 100644 index 0000000..e69de29 diff --git a/app/styles/main.css b/app/styles/main.css new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 5e3cb00..1b10397 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,15 @@ "type": "git", "url": "https://github.com/oliverlaz/hackathon" }, + "browserify": { + "transform": [ + ["reactify", { "es6": true }] + ] + }, "dependencies": { "babel-runtime": "^4.7.16", "classnames": "^2.1.2", - "immutable": "^3.7.2", + "immutable": "^3.7.4", "object-assign": "^3.0.0", "react": "^0.13.3", "superagent": "^0.21.0" @@ -20,8 +25,10 @@ "devDependencies": { "babelify": "^5.0.5", "browserify": "^10.2.4", - "gulp": "^3.8.11", - "gulp-help": "^1.6.0", - "del": "^1.1.1" + "del": "~1.2.0", + "gulp": "^3.9", + "gulp-babel": "5.1.0", + "reactify": "^1.1.1", + "vinyl-source-stream": "^1.1.0" } } From 0c564752290f4f66d604cbf66ca64c5546b1d868 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 10:51:15 +0200 Subject: [PATCH 06/18] ReactJS project setup, gulpfile, browserify --- .gitignore | 5 ++++- app/js/app.jsx | 11 +++++++++++ app/js/index.jsx | 9 ++++++++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index f91993c..aff4c32 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,7 @@ # Node node_modules -npm-debug.log \ No newline at end of file +npm-debug.log + +#Project +dist diff --git a/app/js/app.jsx b/app/js/app.jsx index e69de29..c0a8b79 100644 --- a/app/js/app.jsx +++ b/app/js/app.jsx @@ -0,0 +1,11 @@ +"use strict"; + +var React = require("react"); + +module.exports = React.createClass({ + displayName: 'App', + + render() { + return
it works
+ } +}); diff --git a/app/js/index.jsx b/app/js/index.jsx index 91ba5bd..caad3af 100644 --- a/app/js/index.jsx +++ b/app/js/index.jsx @@ -1,4 +1,11 @@ "use strict"; -import React from 'react'; +var React = require("react"); +var App = require("./app"); +React.initializeTouchEvents(true); + +React.render( + , + document.getElementById("app") +); From aa98266c8a28936dcfdb0c8d246b667b0e411268 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 11:29:42 +0200 Subject: [PATCH 07/18] export http module as object --- app/js/http.jsx | 42 ++++++++++++++++-------------------------- package.json | 1 - 2 files changed, 16 insertions(+), 27 deletions(-) diff --git a/app/js/http.jsx b/app/js/http.jsx index 9fc93ce..1c78f1e 100644 --- a/app/js/http.jsx +++ b/app/js/http.jsx @@ -1,17 +1,9 @@ "use strict"; -var objectAssign = require('object-assign'); var request = require('superagent'); var Immutable = require('immutable'); -/** - * @constructor - */ -var Http = function () { - this.displayName = "Http"; -}; - -objectAssign(Http.prototype, { +var Http = { /** * Gets JSON data from a given URL. @@ -21,23 +13,21 @@ objectAssign(Http.prototype, { */ get(url, callback) { request - .get(url) - .end(function (result) { - if (result.ok) { - var pageData; - if (result.body) { - pageData = Immutable.fromJS(result.body); - } else { - // if the type was text/html (but json is returned) - // we try to parse it manually - pageData = Immutable.fromJS(JSON.parse(result.text)); - } + .get(url) + .end(function(result) { + if (result.ok) { + var pageData; + if (result.body) { + pageData = Immutable.fromJS(result.body); + } else { + pageData = Immutable.fromJS(JSON.parse(result.text)); } - if (pageData) { - callback(pageData); - } - }); + } + if (pageData) { + callback(pageData); + } + }); } -}); +}; -module.exports = Http; \ No newline at end of file +module.exports = Http; diff --git a/package.json b/package.json index 1b10397..6876494 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "babel-runtime": "^4.7.16", "classnames": "^2.1.2", "immutable": "^3.7.4", - "object-assign": "^3.0.0", "react": "^0.13.3", "superagent": "^0.21.0" }, From d503651d56e52d4dac781d439ed0bb62bee1df3c Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 13:07:24 +0200 Subject: [PATCH 08/18] google maps added --- .gitignore | 3 +++ app/index.html | 3 +++ app/js/app.jsx | 6 +++++- app/js/map.jsx | 28 ++++++++++++++++++++++++++++ app/styles/main.css | 6 ++++++ 5 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 app/js/map.jsx diff --git a/.gitignore b/.gitignore index aff4c32..aa5cf50 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,6 @@ npm-debug.log #Project dist + +#Project sensitive info +app/js/config.jsx \ No newline at end of file diff --git a/app/index.html b/app/index.html index 468c9c0..72d6c9c 100644 --- a/app/index.html +++ b/app/index.html @@ -20,6 +20,9 @@
+ diff --git a/app/js/app.jsx b/app/js/app.jsx index c0a8b79..eca84b2 100644 --- a/app/js/app.jsx +++ b/app/js/app.jsx @@ -2,10 +2,14 @@ var React = require("react"); +var GoogleMap = require('./map'); + module.exports = React.createClass({ displayName: 'App', render() { - return
it works
+ return ( + + ) } }); diff --git a/app/js/map.jsx b/app/js/map.jsx new file mode 100644 index 0000000..a64e270 --- /dev/null +++ b/app/js/map.jsx @@ -0,0 +1,28 @@ +"use strict"; + +var React = require('react'); + +module.exports = React.createClass({ + displayName: 'GoogleMapsChart', + + componentDidMount: function () { + var mapOptions = { + center: {lat: 48.8721388, lng: 2.3411542}, // Mozilla Paris HQ + zoom: 12 + }; + var map = new google.maps.Map( + React.findDOMNode(this), + mapOptions + ); + + //google.maps.event.addDomListener(window, 'load', initialize); + + }, + + render() { + return ( +
+
+ ) + } +}); \ No newline at end of file diff --git a/app/styles/main.css b/app/styles/main.css index e69de29..1bd5cf4 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -0,0 +1,6 @@ +.google-maps-chart { + height: 651px; + width: 367px; + margin: 0; + padding: 0; +} From c5435b9a5fb375aff6a33e244a7de744c31a890e Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 14:19:59 +0200 Subject: [PATCH 09/18] search for meetup groups by location --- app/js/app.jsx | 25 ++++++++++++++++++++++--- app/js/config.jsx | 7 +++++++ app/js/http.jsx | 11 +++++++---- app/js/results.jsx | 40 ++++++++++++++++++++++++++++++++++++++++ app/js/search.jsx | 37 +++++++++++++++++++++++++++++++++++++ app/styles/main.css | 28 ++++++++++++++++++++++++++++ 6 files changed, 141 insertions(+), 7 deletions(-) create mode 100644 app/js/config.jsx create mode 100644 app/js/results.jsx create mode 100644 app/js/search.jsx diff --git a/app/js/app.jsx b/app/js/app.jsx index eca84b2..7a317ed 100644 --- a/app/js/app.jsx +++ b/app/js/app.jsx @@ -1,15 +1,34 @@ "use strict"; var React = require("react"); +var Http = require("./http"); -var GoogleMap = require('./map'); +var Search = require("./search"); +var Results = require("./results"); module.exports = React.createClass({ displayName: 'App', + getInitialState() { + return { }; + }, + + updateResults(results) { + this.setState({ results: results }); + }, + render() { + var resultsComponent; + if (this.state.results) { + resultsComponent = ; + } + return ( - - ) +
+
ReactJS Meetups
+ + {resultsComponent} +
+ ); } }); diff --git a/app/js/config.jsx b/app/js/config.jsx new file mode 100644 index 0000000..3a0ee6f --- /dev/null +++ b/app/js/config.jsx @@ -0,0 +1,7 @@ +"use strict"; + +module.exports = { + meetup: { + searchUrl: "http://api.meetup.com/find/groups?key=f2f14303864524413516c4327452b2c" + } +}; diff --git a/app/js/http.jsx b/app/js/http.jsx index 1c78f1e..3bdf688 100644 --- a/app/js/http.jsx +++ b/app/js/http.jsx @@ -7,13 +7,16 @@ var Http = { /** * Gets JSON data from a given URL. - * - * @param url The URL to be used for getting the data. - * @param callback Callback function that will be called after successful fetching of the data. */ - get(url, callback) { + get(url, params, callback) { + if (!callback) { + callback = params; + params = {}; + } + request .get(url) + .query(params) .end(function(result) { if (result.ok) { var pageData; diff --git a/app/js/results.jsx b/app/js/results.jsx new file mode 100644 index 0000000..682206d --- /dev/null +++ b/app/js/results.jsx @@ -0,0 +1,40 @@ +"use strict"; + +var React = require("react"); + +module.exports = React.createClass({ + + displayName: "Results", + + propTypes: { + data: React.PropTypes.object.isRequired + }, + + + render() { + if (this.props.data) { + var results = this.props.data.map((result, index) => { + return ( +
+
+ +
+
+
{result.get("name")}
+
+ {result.get("city")} + {result.get("country")} +
+
+
+ ); + }); + } + + return ( +
+ {results} +
+ ); + } +}); diff --git a/app/js/search.jsx b/app/js/search.jsx new file mode 100644 index 0000000..56ecd31 --- /dev/null +++ b/app/js/search.jsx @@ -0,0 +1,37 @@ +"use strict"; + +var React = require("react"); +var Http = require("./http"); +var config = require("./config"); + +module.exports = React.createClass({ + displayName: "Search", + + propTypes: { + onSearchResultsReceived: React.PropTypes.func + }, + + handleSearchChange() { + var value = React.findDOMNode(this.refs.search).value; + if (value && value.length > 3) { + Http.get(config.meetup.searchUrl, { "location": value }, response => { + var callback = this.props.onSearchResultsReceived; + + callback && callback(response); + }); + } + }, + + render() { + return ( +
+
Keywords:
+
+ + +
+
+ ); + } +}); diff --git a/app/styles/main.css b/app/styles/main.css index 1bd5cf4..985f71f 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -1,3 +1,31 @@ + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.main .head { + font-size: large; + font-weight: bold; + text-align: center; +} + +.search .keywords { + font-size: small; +} + +.result { + display: flex; +} + +.result .thumb { + width: 50px; + height: 50px; +} + +.result .details { + flex: 1 +} + .google-maps-chart { height: 651px; width: 367px; From 88e28c8f5efeda7812186f0998b35a16f90787af Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 14:26:45 +0200 Subject: [PATCH 10/18] styling improvements --- app/styles/main.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/styles/main.css b/app/styles/main.css index 985f71f..70383ee 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -17,13 +17,20 @@ body { display: flex; } -.result .thumb { +.result .thumb img { width: 50px; height: 50px; } .result .details { - flex: 1 + flex: 1; + padding-left: 5px; +} + +.result .city, .result .country { + color: #666; + font-size: small; + padding: 0 3px 0 0; } .google-maps-chart { From d9fff78fdd6987d166cbc83cd86e0466f683da98 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 14:30:14 +0200 Subject: [PATCH 11/18] extracted smaller components --- app/js/results.jsx | 52 ++++++++++++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/app/js/results.jsx b/app/js/results.jsx index 682206d..e0ab1a8 100644 --- a/app/js/results.jsx +++ b/app/js/results.jsx @@ -2,9 +2,36 @@ var React = require("react"); -module.exports = React.createClass({ +var Result = React.createClass({ - displayName: "Results", + displayName: "Result", + + propTypes: { + data: React.PropTypes.object.isRequired + }, + + render() { + var data = this.props.data; + return ( +
+
+ +
+
+
{data.get("name")}
+
+ {data.get("city")} + {data.get("country")} +
+
+
+ ); + } +}); + +var ResultList = React.createClass({ + + displayName: "ResultList", propTypes: { data: React.PropTypes.object.isRequired @@ -13,22 +40,9 @@ module.exports = React.createClass({ render() { if (this.props.data) { - var results = this.props.data.map((result, index) => { - return ( -
-
- -
-
-
{result.get("name")}
-
- {result.get("city")} - {result.get("country")} -
-
-
- ); - }); + var results = this.props.data.map( + (result, index) => + ); } return ( @@ -38,3 +52,5 @@ module.exports = React.createClass({ ); } }); + +module.exports = ResultList; From 82ce9a9999449338b2d841f61e5aca443e1b8823 Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 15:03:27 +0200 Subject: [PATCH 12/18] added "npm start" to project --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 6876494..e6c0273 100644 --- a/package.json +++ b/package.json @@ -29,5 +29,8 @@ "gulp-babel": "5.1.0", "reactify": "^1.1.1", "vinyl-source-stream": "^1.1.0" + }, + "scripts": { + "start": "gulp clean && gulp" } } From c3322b774c6bf45f0373b1e2ecea4f7cee2463bf Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 15:05:34 +0200 Subject: [PATCH 13/18] google map component - refactored --- app/js/map.jsx | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/app/js/map.jsx b/app/js/map.jsx index a64e270..7d6d8e8 100644 --- a/app/js/map.jsx +++ b/app/js/map.jsx @@ -5,21 +5,57 @@ var React = require('react'); module.exports = React.createClass({ displayName: 'GoogleMapsChart', + getInitialState: function() { + return { + map: undefined + }; + }, + componentDidMount: function () { + this._initMap(); + }, + + _initMap() { var mapOptions = { center: {lat: 48.8721388, lng: 2.3411542}, // Mozilla Paris HQ - zoom: 12 + zoom: 10 }; var map = new google.maps.Map( React.findDOMNode(this), mapOptions ); - //google.maps.event.addDomListener(window, 'load', initialize); + this.setState({ + map: map + }); + }, + + _insertMarkers(data) { + var map = this.state.map; + if (map) { + data.forEach((member) => { + this._addMarkerToMap(member); + }); + } + }, + /** + * required properties in markerData + * lat: marker latitude + * lon: marker longitude + * name: onHover string for the marker + */ + _addMarkerToMap(markerData, map) { + new google.maps.Marker({ + position: new google.maps.LatLng(markerData.get('lat'), markerData.get('lon')), + map: map, + title: markerData.get('name') + }); }, render() { + this._insertMarkers(this.props.data); + return (
From 1e35fc0f7ad66ffcbb66559adf8d1d94107f6ff0 Mon Sep 17 00:00:00 2001 From: Gorjan Zajkovski Date: Wed, 1 Jul 2015 15:20:37 +0200 Subject: [PATCH 14/18] added google-maps api-key --- .gitignore | 3 --- app/index.html | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index aa5cf50..aff4c32 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,3 @@ npm-debug.log #Project dist - -#Project sensitive info -app/js/config.jsx \ No newline at end of file diff --git a/app/index.html b/app/index.html index 72d6c9c..aa422cc 100644 --- a/app/index.html +++ b/app/index.html @@ -21,7 +21,7 @@
From 39fa8595003aae0cb5ac2c11f79d4b5c990d36e9 Mon Sep 17 00:00:00 2001 From: Emilija Andreevska Date: Wed, 1 Jul 2015 15:43:54 +0200 Subject: [PATCH 15/18] members --- app/js/app.jsx | 1 + app/js/config.jsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/js/app.jsx b/app/js/app.jsx index 7a317ed..fe16d91 100644 --- a/app/js/app.jsx +++ b/app/js/app.jsx @@ -5,6 +5,7 @@ var Http = require("./http"); var Search = require("./search"); var Results = require("./results"); +var Members = require("./members"); module.exports = React.createClass({ displayName: 'App', diff --git a/app/js/config.jsx b/app/js/config.jsx index 3a0ee6f..f37a776 100644 --- a/app/js/config.jsx +++ b/app/js/config.jsx @@ -2,6 +2,7 @@ module.exports = { meetup: { - searchUrl: "http://api.meetup.com/find/groups?key=f2f14303864524413516c4327452b2c" + searchUrl: "http://api.meetup.com/find/groups?key=1d35494328415c587da4d2956653f18c", + membersUrl: "https://api.meetup.com/2/members?key=1d35494328415c587da4d2956653f18" } }; From e76e2ee0a355e4ce14d2ebbfdae9ff637fd3d182 Mon Sep 17 00:00:00 2001 From: Emilija Andreevska Date: Wed, 1 Jul 2015 15:45:12 +0200 Subject: [PATCH 16/18] members --- app/js/members.jsx | 55 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 app/js/members.jsx diff --git a/app/js/members.jsx b/app/js/members.jsx new file mode 100644 index 0000000..c59d1e0 --- /dev/null +++ b/app/js/members.jsx @@ -0,0 +1,55 @@ +"use strict"; + +var React = require("react"); +var Http = require("./http"); +var config = require("./config"); + +module.exports = React.createClass({ + displayName: 'App', + + propTypes: { + cities: React.PropTypes.func + }, + + getInitialState() { + return {}; + }, + + + componentDidMount() { + Http.get(config.meetup.membersUrl, {"group_id": "13980992"}, response => { + + this.setState({ + cities: response + .get('results') + .groupBy((member) => member.get('city')) + .map((m, c) => { + return { + city: c, + total: m.count() + } + }) + }) + }) + }, + + render(){ + var cities = this.state.cities; + if (cities) { + var stats = cities.map((c, i) => +
+ {c.city} + {c.lon} + {c.lat} + {c.total} +
+ ); + } + + return ( +
+ {stats} +
+ ); + } +}); From fa6bd0c3336c6b9b218bd2e0c07690f2672292e8 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 16:10:22 +0200 Subject: [PATCH 17/18] general fixes --- app/js/app.jsx | 30 ++++++++++++++++++++++++------ app/js/config.jsx | 4 ++-- app/js/map.jsx | 6 +++--- app/js/members.jsx | 12 +++++------- app/js/results.jsx | 16 ++++++++++++---- app/styles/main.css | 9 +++++++++ 6 files changed, 55 insertions(+), 22 deletions(-) diff --git a/app/js/app.jsx b/app/js/app.jsx index fe16d91..2403044 100644 --- a/app/js/app.jsx +++ b/app/js/app.jsx @@ -4,31 +4,49 @@ var React = require("react"); var Http = require("./http"); var Search = require("./search"); -var Results = require("./results"); +var ResultList = require("./results"); +var Map = require("./map"); var Members = require("./members"); module.exports = React.createClass({ displayName: 'App', getInitialState() { - return { }; + return {}; }, updateResults(results) { this.setState({ results: results }); }, + resultSelected(result) { + this.setState({ + showResult: true, + result: result + }); + }, + render() { - var resultsComponent; - if (this.state.results) { - resultsComponent = ; + var comp; + if (this.state.showResult) { + comp = ( +
+ + +
+ ); + + } else if (this.state.results) { + + comp = ; } return (
ReactJS Meetups
- {resultsComponent} + {comp}
); } diff --git a/app/js/config.jsx b/app/js/config.jsx index f37a776..f878820 100644 --- a/app/js/config.jsx +++ b/app/js/config.jsx @@ -2,7 +2,7 @@ module.exports = { meetup: { - searchUrl: "http://api.meetup.com/find/groups?key=1d35494328415c587da4d2956653f18c", - membersUrl: "https://api.meetup.com/2/members?key=1d35494328415c587da4d2956653f18" + searchUrl: "http://api.meetup.com/find/groups?key=f2f14303864524413516c4327452b2c", + membersUrl: "https://api.meetup.com/2/members?key=f2f14303864524413516c4327452b2c" } }; diff --git a/app/js/map.jsx b/app/js/map.jsx index 7d6d8e8..1c9b286 100644 --- a/app/js/map.jsx +++ b/app/js/map.jsx @@ -13,6 +13,7 @@ module.exports = React.createClass({ componentDidMount: function () { this._initMap(); + this._insertMarkers(this.props.data); }, _initMap() { @@ -32,7 +33,7 @@ module.exports = React.createClass({ _insertMarkers(data) { var map = this.state.map; - if (map) { + if (map && data) { data.forEach((member) => { this._addMarkerToMap(member); }); @@ -54,11 +55,10 @@ module.exports = React.createClass({ }, render() { - this._insertMarkers(this.props.data); return (
) } -}); \ No newline at end of file +}); diff --git a/app/js/members.jsx b/app/js/members.jsx index c59d1e0..c6c0497 100644 --- a/app/js/members.jsx +++ b/app/js/members.jsx @@ -8,7 +8,7 @@ module.exports = React.createClass({ displayName: 'App', propTypes: { - cities: React.PropTypes.func + groupId: React.PropTypes.object.isRequired }, getInitialState() { @@ -17,7 +17,7 @@ module.exports = React.createClass({ componentDidMount() { - Http.get(config.meetup.membersUrl, {"group_id": "13980992"}, response => { + Http.get(config.meetup.membersUrl, { "group_id": this.props.groupId }, response => { this.setState({ cities: response @@ -37,11 +37,9 @@ module.exports = React.createClass({ var cities = this.state.cities; if (cities) { var stats = cities.map((c, i) => -
- {c.city} - {c.lon} - {c.lat} - {c.total} +
+ {c.city} + {c.total}
); } diff --git a/app/js/results.jsx b/app/js/results.jsx index e0ab1a8..7ce9347 100644 --- a/app/js/results.jsx +++ b/app/js/results.jsx @@ -7,13 +7,19 @@ var Result = React.createClass({ displayName: "Result", propTypes: { - data: React.PropTypes.object.isRequired + data: React.PropTypes.object.isRequired, + resultSelected: React.PropTypes.func + }, + + onClick() { + var callback = this.props.resultSelected; + callback && callback(this.props.data); }, render() { var data = this.props.data; return ( -
+
@@ -34,14 +40,16 @@ var ResultList = React.createClass({ displayName: "ResultList", propTypes: { - data: React.PropTypes.object.isRequired + data: React.PropTypes.object.isRequired, + resultSelected: React.PropTypes.func }, render() { if (this.props.data) { var results = this.props.data.map( - (result, index) => + (result, index) => ); } diff --git a/app/styles/main.css b/app/styles/main.css index 70383ee..0b54972 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -33,6 +33,15 @@ body { padding: 0 3px 0 0; } +.member .city { + float: left; +} + +.member .total { + float: right; + font-weight: bold; +} + .google-maps-chart { height: 651px; width: 367px; From 676cff7c9a662ce9aafc99d33f5b3686fbfaefd8 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 1 Jul 2015 16:14:57 +0200 Subject: [PATCH 18/18] css fixes, floats --- app/js/members.jsx | 4 ++-- app/styles/main.css | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/js/members.jsx b/app/js/members.jsx index c6c0497..417baf4 100644 --- a/app/js/members.jsx +++ b/app/js/members.jsx @@ -38,8 +38,8 @@ module.exports = React.createClass({ if (cities) { var stats = cities.map((c, i) =>
- {c.city} - {c.total} +
{c.city}
+
{c.total}
); } diff --git a/app/styles/main.css b/app/styles/main.css index 0b54972..4dad067 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -33,6 +33,10 @@ body { padding: 0 3px 0 0; } +.member { + clear: both; +} + .member .city { float: left; }