Added routing and some handshaking from Barrett

.env.example

@@ -0,0 +1,2 @@
+CLIENT_SECRET=
+CLIENT_ID=

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#ignore env files
+.env

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "dependencies": {
     "eventbrite": "^1.0.2",
+    "eventbrite_design_system": "http://packages.evbops.com:8889/package/eventbrite_design_system/66.13.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1"
   },
   "scripts": {

src/App.js

@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { RegisterPage, HomePage } from './pages';
 
-class App extends Component {
+export default class App extends Component {
   render() {
     return (
-      <div className="App">
-        <h1>Hello EB Extension</h1>
-      </div>
+      <Router>
+        <div className="App">
+          <Route path="/register" component={RegisterPage} />
+          <Route exact path="/"  component={HomePage} />
+        </div>
+      </Router>
     );
   }
 }
-
-export default App;

src/pages/HomePage.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+  <h1>Hello HomePage!</h1>
+);

src/pages/RegisterPage.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+var request = require('request');
+var querystring = require('querystring');
+
+const OAUTH_URL = 'https://www.eventbrite.com/oauth/token';
+const CLIENT_SECRET = process.env.CLIENT_SECRET;
+const CLIENT_ID = process.env.CLIENT_ID;
+
+
+export default class Register extends Component {
+  componentDidMount() {
+    console.log(this.props);
+    var url_parts = querystring.parse(this.props.location.search);
+    var _code = url_parts['?code'];
+    var url = OAUTH_URL;
+
+    var form = {
+        code: _code,
+        client_secret: CLIENT_SECRET,
+        client_id: CLIENT_ID,
+        grant_type: 'authorization_code'
+    };
+
+    var formData = querystring.stringify(form);
+    var contentLength = formData.length;
+
+    console.log(url);
+    console.log(_code);
+    console.log(form);
+
+    request({
+        headers: {
+            'Content-Length': contentLength,
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        uri: url,
+        body: formData,
+        method: 'POST'
+    }, function (err, resp, body) {
+       console.log(err, resp, body);
+    });
+  }
+
+  render() {
+    return (
+      <div>
+          <h2>Register</h2>
+          <code>
+            {JSON.stringify(this.props)}
+          </code>
+      </div>
+    );
+  }
+}

src/pages/SomeOtherPage.js

@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import queryString from 'query-string';
+import _ from 'underscore';
+import './App.css';
+import 'eventbrite_design_system/css/eds.css';
+import EVENTS from './events';
+import DataTable from 'eventbrite_design_system/dataTable/DataTable';
+import Button from 'eventbrite_design_system/button/Button';
+
+import { TOKEN } from './config';
+
+export default class SomeOtherPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      access_token: '',
+      token_type: '',
+      user: {
+        name: '',
+      },
+      attendees: [],
+      organizers: [],
+      events: EVENTS,
+      all: false,
+    };
+  }
+
+  handleClick = () => {
+    window.location.href = 'https://www.eventbrite.com/oauth/authorize?response_type=token&client_id='+TOKEN;
+  }
+
+  componentDidMount() {
+    const parsedHash = queryString.parse(window.location.hash);
+    this.setState({
+      ...parsedHash
+    });
+
+    if (parsedHash.access_token) {
+      setTimeout(() => {
+        Promise.all(EVENTS.map((event, key) => {
+          return this.fetchEventAttendees(event.id, key);
+        }))
+          .then(() => {
+            this.props.eb.FrameAPI.init();
+            this.setState({
+              all: true
+            });
+          });
+      }, 0);
+    }
+  }
+
+  fetchEventAttendees(event_id, key) {
+    return fetch(`https://www.eventbriteapi.com/v3/events/${event_id}/attendees/?token=${this.state.access_token}`)
+      .then((response) => (response.json()))
+      .then((s) => {
+        let {
+          events
+        } = this.state;
+        events[key].attendees = s.attendees;
+
+        this.setState({
+          events,
+        });
+      });
+  }
+
+  getAllAttendees() {
+    let { events } = this.state;
+    let attendees = {};
+
+    events.forEach((event) => {
+      if (event.attendees) {
+        event.attendees.forEach((att) => {
+          if (!attendees[att.profile.email]) {
+            attendees[att.profile.email] = 1;
+          } else {
+            attendees[att.profile.email]++;
+          }
+        });
+      }
+    });
+
+    return _.sortBy(Object.keys(attendees).map((key) => {
+      return {
+        name: key,
+        visits: attendees[key]
+      };
+    }), (obj) => obj.visits * -1);
+  }
+
+  renderDataTable(attendees) {
+    if (Object.keys(attendees).length === 0) {
+      return;
+    }
+
+    return (
+      <DataTable
+        items={attendees}
+        columns={[
+          {
+            fieldName: 'name',
+            fieldLabel: 'E-mail',
+            isEditable: false,
+            isSortable: true,
+          },
+          {
+            fieldName: 'visits',
+            fieldLabel: 'Visits',
+            isEditable: false,
+            isSortable: true,
+          }
+        ]}
+      />
+    );
+  }
+
+  render() {
+    let {
+      access_token
+    } = this.state;
+
+    let button = (!access_token) ? (
+        <div>
+          <Button style="fill" onClick={this.handleClick}>
+            Authenticate
+          </Button>
+        </div>
+      ): null;
+
+    let attendees = this.getAllAttendees();
+    let table = this.renderDataTable(attendees)
+
+    return (
+      <div className="eds-g-grid">
+        <div className="eds-g-cell eds-g-cell-12-12">
+          <div className="eds-align--center">
+            <section className="eds-l-pad-all-4">
+              <h2 className="eds-text-hl eds-text--center eds-l-pad-all-2">
+                Top Fans
+              </h2>
+              {button}
+            </section>
+          </div>
+          {table}
+        </div>
+      </div>
+    );
+  }
+}

src/pages/index.js

@@ -0,0 +1,3 @@
+export { default as HomePage } from './HomePage';
+export { default as RegisterPage } from './RegisterPage';
+// export {default as SomeOtherPage} from './SomeOtherPage'