codeforfrankfurt · jschirrmacher · Sep 22, 2017 · Sep 22, 2017 · Sep 22, 2017 · Sep 22, 2017
diff --git a/.gitignore b/.gitignore
@@ -12,5 +12,17 @@ dev_*.ipynb
 .DS_Store
 node_modules/
 polbotcheck/dump/
-web/Release.key
+Release.key
 polbotcheck/__pycache__/
+
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/Procfile b/Procfile
@@ -1 +1 @@
-web: FLASK_ENV=production webapi/run_analytics_server.sh
+web: bin/boot
diff --git a/web/json/Achim_P.json → json/Achim_P.json b/web/json/Achim_P.json → json/Achim_P.json
diff --git a/web/json/agnieszka_mdb.json → json/agnieszka_mdb.json b/web/json/agnieszka_mdb.json → json/agnieszka_mdb.json
diff --git a/web/json/parties.json → json/parties.json b/web/json/parties.json → json/parties.json
diff --git a/web/json/politicians.json → json/politicians.json b/web/json/politicians.json → json/politicians.json
diff --git a/web/json/topics.json → json/topics.json b/web/json/topics.json → json/topics.json
diff --git a/web/package.json → package.json b/web/package.json → package.json
@@ -4,14 +4,14 @@
   "private": true,
   "dependencies": {
     "chart.js": "^2.5.0",
-    "react": "^15.4.2",
-    "react-bootstrap": "^0.30.7",
-    "react-chartjs-2": "^2.0.5",
-    "react-dom": "^15.4.2",
-    "react-router": "^2.8.1"
+    "react": "^16.0.0",
+    "react-bootstrap": "^0.31.3",
+    "react-chartjs-2": "^2.6.4",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
-    "react-scripts": "0.9.3"
+    "react-scripts": "^1.0.14"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/polbotcheck/db.py b/polbotcheck/db.py
@@ -8,7 +8,7 @@
 
 from config.db_credentials import db_credentials
 
-CANDIDATES_PATH = '../web/public/candidates.json'
+CANDIDATES_PATH = '../public/candidates.json'
 
 
 # Configure your ArangoDB server connection here

diff --git a/web/public/candidates.json → public/candidates.json b/web/public/candidates.json → public/candidates.json
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/web/public/index.html → public/index.html b/web/public/index.html → public/index.html
@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>BotOrNot hessische BTW-Kandidaten 2017</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,106 @@
+@import '//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css';
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+
+.App-logo {
+    float: left;
+}
+
+.App, h3 {
+    text-align: center;
+}
+
+.App h2 {
+    font-size: 28px;
+}
+
+.jumbotron p {
+    font-size: 16px;
+}
+
+.dl, .dd {
+    display: inline;
+}
+
+.dd {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.dt {
+    display: none;
+    position: absolute;
+    background: #ffe;
+    font-size: 13px;
+    font-weight: normal;
+    text-align: left;
+    padding: 5px;
+    max-width: 320px;
+}
+
+.dl:hover .dt {
+    display: inline-block;
+}
+
+.App-header {
+    background-color: #222;
+    padding: 20px;
+    color: white;
+}
+
+.Profile-picture {
+    display: inline-block;
+    max-width: 240px;
+    max-height: 240px;
+    vertical-align: top;
+}
+
+.App-profile {
+    display: inline-block;
+    margin-left: 20px;
+    min-width: 300px;
+}
+
+.App-info {
+    margin: 1em -5px;
+    padding: 0;
+}
+
+.App-info > div {
+    padding: 5px;
+}
+
+.App-info > div > div {
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+img {
+    max-width: 100%;
+}
+
+ul {
+    text-align: left;
+}
+
+.Info-diagram {
+    padding: 2em;
+}
+
+.Info-diagram img {
+    max-width: 66%;
+}
+
+.number {
+    float: right;
+}
+
+#footer {
+    margin-top: 3em;
+    text-align: left;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,147 @@
+import React, {Component} from 'react'
+import { Link } from 'react-router-dom'
+import {Grid, Row, Col, Jumbotron, Panel} from 'react-bootstrap'
+
+import './App.css'
+import Title from './Title'
+import { parties, getFullName } from './Utils'
+
+class App extends Component {
+
+  state = {
+      politicians: [],
+      parties: parties,
+      districts: {districts: []}
+  };
+
+  load(what, url) {
+      let self = this;
+      fetch(url)
+          .then(res => res.json())
+          .then(data => {
+              self.state[what] = data.data || data;
+              self.setState(self.state);
+          })
+          .catch(e => console.log(e))
+  }
+
+  componentWillMount() {
+    this.load('districts', 'https://botornot-hessen-api.herokuapp.com/pbc/districts');
+    this.load('politicians', '/candidates.json');
+  }
+
+  getCandidateEntry(candidate) {
+    const fullName = getFullName(candidate.name);
+    return fullName.concat(" (" + this.state.parties[candidate.election.party] + ")");
+  }
+
+  render() {
+    const politicians = this.state.politicians.sort((a, b) => a.name.surname.localeCompare(b.name.surname));
+    const parties = this.state.parties;
+    const districts = this.state.districts.districts;
+    return (
+      <Grid className="App">
+        <Title />
+        <Row>
+          <Jumbotron>
+            <h2>
+                Wer folgt unseren Bundestagswahl-Kandidaten wirklich?
+            </h2>
+            <p>Sind es Bots oder echte Menschen, die den Kandidaten folgen? Das finden wir hier für euch heraus,
+                damit klar wird, was echt ist und was nicht.
+            </p>
+
+            <h3>Was sind das für Bots, um die es geht?</h3>
+            <p>
+                Twitter Bots sind computergesteuerte Programme die sich automatisiert auf dem Social Network bewegen
+                und verschiedene Ziele verfolgen. Die meisten betreiben Marketing und folgen allen möglichen
+                Accounts und erzeugen so Aufmerksamkeit. Andere sorgen mit Retweets für eine größere
+                Reichweite anderer Accounts, die sie voranbringen wollen.
+            </p>
+            <p>
+                Eigentlich ist es noch kein Problem, wenn Bots dem Account eines Kandidaten folgen. Problematisch wird
+                es, wenn wir als Wähler die Meldungen eines Kandidaten häufiger zu sehen bekommen, weil sie angeblich
+                viele andere interessieren (und daher auch mich interessieren könnten), aber hauptsächlich Bots diese
+                Retweets erzeugt haben.
+            </p>
+
+            <h3>Und wie erkenne ich, welche Retweets "echt" sind, und was von Bots künstlich erzeugt wird?</h3>
+            <p>
+                Wir geben dir einen Einblick, wieviele Retweets der Politiker von Bots sind, um besser einschätzen zu können,
+                ob nachgeholfen wird. Zur Erkennung ob ein Twitter Account ein Bot ist, verlassen wir uns auf die
+                mehrjährige Recherche-Arbeit des <span className="dl"><span className="dd">Projekts&nbsp;
+                <a href="http://truthy.indiana.edu/botornot/">Botometer</a></span><span className="dt">früher Truthy BotOrNot</span></span>.
+                Es wurde 2014 von der Indiana University aus den USA ins Leben gerufen. Über deren Web-Dienst kann man die
+                Wahrscheinlichkeit einholen, mit der ein Twitter Account ein Bot ist.
+            </p>
+            <p>
+                Wir gehen ab 70% Prozent davon aus, dass es sich um einen Bot handelt.
+            </p>
+            <p>
+                Für jeden <span className="dl"><span className="dd">Politiker, zu dem wir die Daten einholen konnten</span>
+                <span className="dt">die Datenlage ist recht
+                eingeschränkt, siehe Quellen ganz unten, daher auch die fehlenden Parteien und Wahlkreise</span></span>&nbsp;
+                zeigen wir hier nun den <strong>Anteil der Follower die Bots sind, den Anteil der Retweets die von Bots
+                stammen und wieviel Prozent der Retweeter Bots sind.</strong>
+            </p>
+          </Jumbotron>
+        </Row>
+          <Row>
+              <Col md={4}>
+                  <h3>Politiker</h3>
+                  <ul>
+                    {politicians.map(function(value) {
+                        return <li key={value.id}>
+                          <Link to={'/politicians/' + value.slug}>
+                            {this.getCandidateEntry(value)}</Link></li>
+                    },this)}
+                  </ul>
+              </Col>
+              <Col md={4}>
+                  <h3>Parteien</h3>
+                  <ul>
+                      {Object.keys(parties).map(function(key) {
+                            const value = parties[key];
+                            return <li key={key}><Link to={'/parties/' + key}>{value}</Link></li>;
+                      })}
+                  </ul>
+              </Col>
+              <Col md={4}>
+                  <h3>Wahlkreise</h3>
+                  <ul>
+                      {districts.map(function(districtObject) {
+                          return <li key={districtObject.id}><Link to={'/districts/' + districtObject.id}>{districtObject.name}</Link></li>;
+                      })}
+                  </ul>
+              </Col>
+        </Row>
+        <Row>
+          <Panel id="footer" header="Quellen">
+            <p>
+                Die Liste der Politiker und die Infos über sie, u.a. die Account-Namen der Twitter-Profile haben wir über&nbsp;
+                <a href="https://github.com/okfde/wahldaten/tree/master/kandidierende">github.com/okfde/wahldaten</a> eingeholt.
+            </p>
+            <p>
+                Die Wahrscheinlichkeit ob ein Account ein Bot ist, holen wir uns über&nbsp;
+                <a href="http://truthy.indiana.edu/botornot/">Botometer</a> (früher Truthy BotOrNot) von der
+                Indiana University aus den USA ein.
+            </p>
+            <p>
+                Die Follower und Retweet Daten sind über die <a href="https://dev.twitter.com/rest/public">Twitter-API</a>
+                &nbsp;von Twitter selbst eingeholt worden.
+            </p>
+            <p>
+                Die Namen der Wahlkreise haben wir über die&nbsp;
+                <a href="https://www.abgeordnetenwatch.de/api/">Abgeordnetenwatch API</a> abgerufen.
+            </p>
+            <p>Der Quellcode dieses Projekts ist zu finden auf&nbsp;
+                <a href="https://github.com/codeforfrankfurt/PolBotCheck">github</a>.
+            </p>
+          </Panel>
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+export default App;
diff --git a/web/src/App.test.js → src/App.test.js b/web/src/App.test.js → src/App.test.js
diff --git a/web/src/BarChart.js → src/BarChart.js b/web/src/BarChart.js → src/BarChart.js
diff --git a/src/Breadcrumbs.css b/src/Breadcrumbs.css
@@ -0,0 +1,3 @@
+.breadcrumbs {
+    margin-bottom: 1em;
+}
diff --git a/src/Breadcrumbs.js b/src/Breadcrumbs.js
@@ -0,0 +1,14 @@
+import React, {Component} from 'react'
+import { withRouter } from 'react-router-dom'
+import './Breadcrumbs.css'
+
+class Breadcrumbs extends Component {
+  render() {
+    return (<div className="breadcrumbs">
+      <button onClick={this.props.history.goBack} className="btn btn-default">« Zurück</button>
+    </div>
+    )
+  }
+}
+
+export default withRouter(Breadcrumbs)
diff --git a/src/DistrictPage.js b/src/DistrictPage.js
@@ -0,0 +1,59 @@
+import React, {Component} from 'react'
+import Breadcrumbs from './Breadcrumbs'
+import { Link } from 'react-router-dom'
+import {Row, Col, Panel} from 'react-bootstrap'
+import Title from './Title'
+import { parties, getFullName } from './Utils'
+
+class DistrictPage extends Component {
+    state = {
+        district: {
+            name: '',
+            candidates: []
+        }
+    }
+
+    componentWillMount() {
+        let self = this;
+        const url = 'https://botornot-hessen-api.herokuapp.com/pbc/districts/' + this.props.match.params.slug;
+        fetch(url, {mode: 'cors', headers: {'Accept': 'application/json'}})
+            .then(res => {
+                return res.json().then(data => {
+                    self.state = data;
+                    console.log(data);
+                    self.setState(self.state);
+                });
+            })
+            .catch(e => console.log("error fetching " + url, e));
+    }
+
+    render() {
+        let candidates = this.state.district.candidates.map(candidate => {
+            const fullName = getFullName(candidate.name);
+            const party = parties[candidate.election.party];
+            return (
+                <li key={candidate.id}>
+                    <Link to={'/politicians/' + candidate.slug}>{fullName + " (" + party + ") "}</Link>
+                </li>
+            );
+        }, this)
+
+        return (<div className="container">
+            <Title />
+            <Breadcrumbs />
+
+            <Panel bsStyle="primary" className="App-profile" bsSize="large">
+                <p>Wahlkreis: {this.state.district.name ? this.state.district.name : '-'}</p>
+            </Panel>
+
+            <Row className="App-info">
+                <Col xs={12}>
+                    <h3>Mitglieder im Wahlkreis</h3>
+                    {candidates}
+                </Col>
+            </Row>
+        </div>)
+    }
+}
+
+export default DistrictPage;