[WorldMoodTracker] Add streaming feature

WorldMoodTracker/js/components/StreamOverlay.js

@@ -0,0 +1,102 @@
+import {Modal} from 'react-overlays';
+import React from 'react';
+import {host} from '../index';
+import styles from '../../../css/bootstrap.min.css';
+
+const modalStyle = {
+    position: 'fixed',
+    zIndex: 10,
+    top: 0, bottom: 0, left: 0, right: 0
+};
+
+const backdropStyle = {
+    position: 'fixed',
+    top: 0, bottom: 0, left: 0, right: 0,
+    zIndex: 'auto',
+    backgroundColor: '#000',
+    opacity: 0.5
+};
+
+const dialogStyle = function () {
+    return {
+        position: 'absolute',
+        width: '100%',
+        top: '5vh',
+        height: '95vh',
+        border: '1px solid #e5e5e5',
+        backgroundColor: 'white',
+        boxShadow: '0 5px 15px rgba(0,0,0,.5)',
+        padding: 20
+    };
+};
+
+function getTweetHtml(json) {
+    return (
+        <div style={{padding: '5px', borderRadius: '3px', border: '1px solid black', margin: '10px'}}>
+            <a href={json.link} target="_blank">
+            <div style={{marginBottom: '5px'}}>
+                <b>@{json['screen_name']}</b>
+            </div>
+            <div style={{overflowX: 'hidden'}}>{json['text']}</div>
+            </a>
+        </div>
+    )
+}
+
+export default class StreamOverlay extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {channel: this.props.channel, country: this.props.country, tweets: []};
+        this.close = this.close.bind(this);
+        this.eventSource = null;
+    };
+
+    close() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+        }
+        this.props.onClose();
+    }
+
+    startEventSource(country) {
+        let channel = 'twitter%2Fcountry%2F' + country;
+        if (this.eventSource) {
+            return;
+        }
+        this.eventSource = new EventSource(host + '/api/stream.json?channel=' + channel);
+        this.eventSource.onmessage = (event) => {
+            let json = JSON.parse(event.data);
+            this.state.tweets.push(json);
+            if (this.state.tweets.length > 250) {
+                this.state.tweets.shift();
+            }
+            this.setState(this.state);
+        };
+    }
+
+    render () {
+        this.startEventSource(this.props.channel);
+        return (
+            <div className={styles.container}>
+                <Modal aria-labelledby='modal-label'
+                    style={modalStyle}
+                    backdropStyle={backdropStyle}
+                    show={true}
+                    onHide={this.close}>
+                    <div style={dialogStyle()}>
+                        <h2 id='modal-label'>Streaming Tweets from&nbsp;
+                            <span  style={{background: '-webkit-linear-gradient(0deg, #D02010 2%, #FFFB20 98%)',
+                            'WebkitTextFillColor': 'transparent',
+                            'WebkitBackgroundClip': 'text',
+                            }}>{this.state.country}</span></h2>
+                        <div className={styles.container} style={{'height': '100%', 'overflowY': 'auto',
+                            'overflowX': 'hidden', maxWidth: '100%'}}>
+                            {this.state.tweets.reverse().map(getTweetHtml)}
+                        </div>
+                    </div>
+                </Modal>
+            </div>
+        )
+    }
+};

WorldMoodTracker/js/components/WorldMap.js

@@ -7,10 +7,11 @@ import {getScores} from '../utils/score';
 import {getColor, getColorsForCountries} from '../utils/color';
 import {host} from '../index';
 import {getFromCache, updateCache} from '../utils/cache';
+import {reverseCountryCode} from "../utils";
 
 export default class WorldMap extends React.Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this.state = {
             map: null
         };
@@ -181,9 +182,15 @@ export default class WorldMap extends React.Component {
     }
 
     componentDidMount() {
+        let props = this.props;  // Can't be accessed with Datamap's done callback
         this.setState({
             map: new Datamap({
                 element: document.getElementById('map-container'),
+                done: function(datamap) {
+                    datamap.svg.selectAll('.datamaps-subunit').on('click', function (geography) {
+                        props.showStream(geography.properties.name, reverseCountryCode(geography.id));
+                    })
+                },
                 responsive: true,
                 fills: {defaultFill: 'rgba(200,200,200,0.8)'},
                 geographyConfig: {

WorldMoodTracker/js/components/WorldMoodTracker.js

@@ -3,16 +3,47 @@ import Header from './Header';
 import WorldMap from './WorldMap';
 import Footer from './Footer';
 import ScaleBar from './ScaleBar';
+import StreamOverlay from "./StreamOverlay";
 
 export default class WorldMoodTracker extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {enabled: false};
+        this.showStream = this.showStream.bind(this);
+        this.getStreamOverlay = this.getStreamOverlay.bind(this);
+        this.onOverlayClose = this.onOverlayClose.bind(this);
+    }
+
+    onOverlayClose() {
+        this.state.enabled = false;
+        this.setState(this.state);
+    }
+
+    getStreamOverlay() {
+        if (this.state.enabled) {
+            return (<StreamOverlay
+                show={true} channel={this.state.channel}
+                country={this.state.country} onClose={this.onOverlayClose}/>);
+        }
+    }
+
+    showStream(countryName, countryCode) {
+        this.state.channel = countryCode;
+        this.state.country = countryName;
+        this.state.enabled = true;
+        this.setState(this.state);
+    }
+
     render() {
         return (
             <div>
                 <Header/>
-                <WorldMap/>
+                {this.getStreamOverlay()}
+                <WorldMap showStream={this.showStream}/>
                 <ScaleBar/>
                 <Footer/>
             </div>
         )
     }
-}
+    }

WorldMoodTracker/js/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import WorldMoodTracker from './components/WorldMoodTracker.js';
 
-export const host = 'http://api.loklak.org';
+export const host = 'http://162.222.180.38';
 
 ReactDOM.render(
     <WorldMoodTracker/>,

WorldMoodTracker/js/utils/index.js

@@ -26,3 +26,8 @@ export function countryCodeConverter(code)
     }
     return code;
 }
+
+export function reverseCountryCode(code)
+{
+    return iso3166.codes[code];
+}

WorldMoodTracker/package.json

@@ -16,6 +16,7 @@
     "path": "^0.12.7",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-overlays": "^0.8.0",
     "style-loader": "^0.18.2",
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.5"

WorldMoodTracker/yarn.lock

@@ -885,6 +885,10 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+chain-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+
 chalk@^1.1.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -922,6 +926,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 [email protected]:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.4.tgz#eec8811db27457e0078d8ca921fa81b72fa82bf4"
@@ -1353,6 +1361,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.2.0, dom-helpers@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -3073,7 +3085,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10:
+prop-types-extra@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.0.1.tgz#a57bd4810e82d27a3ff4317ecc1b4ad005f79a82"
+  dependencies:
+    warning "^3.0.0"
+
+prop-types@^15.5.10, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -3190,6 +3208,28 @@ react-dom@^15.6.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-overlays@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.8.0.tgz#55359421735da2c0d8e235f780c9f9f3b16bc2f2"
+  dependencies:
+    classnames "^2.2.5"
+    dom-helpers "^3.2.1"
+    prop-types "^15.5.10"
+    prop-types-extra "^1.0.1"
+    react-transition-group "^2.0.0-beta.0"
+    warning "^3.0.0"
+
+react-transition-group@^2.0.0-beta.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.0.tgz#793bf8cb15bfe91b3101b24bce1c1d2891659575"
+  dependencies:
+    chain-function "^1.0.0"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.8"
+    warning "^3.0.0"
+
 react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
@@ -3978,6 +4018,12 @@ [email protected]:
   dependencies:
     indexof "0.0.1"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"