add small wrapper around fetch for requesting API

assets/js/components/CountWidget.js

@@ -2,6 +2,7 @@
 
 import { h, render, Component } from 'preact';
 import * as numbers from '../lib/numbers.js';
+import Client from '../lib/client.js';
 const dayInSeconds = 60 * 60 * 24;
 
 class CountWidget extends Component {
@@ -27,26 +28,14 @@ class CountWidget extends Component {
     const before = Math.round((+new Date() ) / 1000);
     const after = before - ( period * dayInSeconds );
 
-    fetch(`/api/${this.props.endpoint}/count?before=${before}&after=${after}`, {
-      credentials: 'include'
-    }).then((r) => {
-        if( r.ok ) { return r.json(); }
-        throw new Error();
-     }).then((data) => {
-        this.setState({ count: data })
-    });
+    Client.request(`${this.props.endpoint}/count?before=${before}&after=${after}`)
+      .then((d) => { this.setState({ count: d })})
 
     // query previous period
     const previousBefore = after;
     const previousAfter = previousBefore - ( period * dayInSeconds );
-    fetch(`/api/${this.props.endpoint}/count?before=${previousBefore}&after=${previousAfter}`, {
-      credentials: 'include'
-    }).then((r) => {
-        if( r.ok ) { return r.json(); }
-        throw new Error();
-     }).then((data) => {
-        this.setState({ previousCount: data })
-    });
+    Client.request(`${this.props.endpoint}/count?before=${previousBefore}&after=${previousAfter}`)
+      .then((d) => { this.setState({ previousCount: d })})
   }
 
   renderPercentage() {

assets/js/components/Graph.js

@@ -1,10 +1,11 @@
 'use strict';
 
 import { h, render, Component } from 'preact';
-import * as d3 from 'd3';
-import tip from 'd3-tip';
+import Client from '../lib/client.js';
 import * as numbers from '../lib/numbers.js';
 
+import * as d3 from 'd3';
+import tip from 'd3-tip';
 d3.tip = tip;
 
 const dayInSeconds = 60 * 60 * 24;
@@ -159,32 +160,19 @@ class Graph extends Component {
     const after = before - ( period * dayInSeconds );
     const group = period > 90 ? 'month' : 'day';
 
-    // fetch visitor data
-    fetch(`/api/visits/count/group/${group}?before=${before}&after=${after}`, {
-      credentials: 'include'
-    }).then((r) => {
-      if( r.ok ) {
-        return r.json();
-      }
-      throw new Error();
-    }).then((data) => {
-      this.data.visitors = data;
-      window.requestAnimationFrame(this.refreshChart);
-    });
-
-    // fetch pageview data
-    fetch(`/api/pageviews/count/group/${group}?before=${before}&after=${after}`, {
-      credentials: 'include'
-    }).then((r) => {
-      if( r.ok ) {
-        return r.json();
-      }
-
-      throw new Error();
-    }).then((data) => {
-        this.data.pageviews = data;
+    Client
+      .request(`pageviews/count/group/${group}?before=${before}&after=${after}`)
+      .then((d) => {
+        this.data.pageviews = d;
         window.requestAnimationFrame(this.refreshChart);
-    });
+      })
+
+    Client
+      .request(`visits/count/group/${group}?before=${before}&after=${after}`)
+      .then((d) => {
+        this.data.visitors = d;
+        window.requestAnimationFrame(this.refreshChart);
+      })
   }
 
   render() {

assets/js/components/LoginForm.js

@@ -1,35 +1,29 @@
 'use strict';
 
 import { h, render, Component } from 'preact';
+import Client from '../lib/client.js';
 
 class LoginForm extends Component {
 
   constructor(props) {
     super(props)
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.setState({
+    this.state = {
       email: '',
       password: '',
-    })
+    }
   }
 
   handleSubmit(e) {
     e.preventDefault();
 
-    fetch('/api/session', {
+    Client.request('session', {
       method: "POST",
       data: {
         email: this.state.email,
         password: this.state.password,
-      },
-      credentials: 'include'
-    }).then((r) => {
-      if( r.status == 200 ) {
-        this.props.onSuccess();
       }
-
-      // TODO: Handle errors
-    });
+    }).then((r) => { this.props.onSuccess() })
   }
 
   render() {

assets/js/components/LogoutButton.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import { h, render, Component } from 'preact';
+import Client from '../lib/client.js';
 
 class LogoutButton extends Component {
 
@@ -12,15 +13,9 @@ class LogoutButton extends Component {
   handleSubmit(e) {
     e.preventDefault();
 
-    fetch('/api/session', {
+    Client.request('session', {
       method: "DELETE",
-      credentials: 'include',
-    }).then((r) => {
-      if( r.status == 200 ) {
-        this.props.onSuccess();
-        console.log("No longer authenticated!");
-      }
-    });
+    }).then((r) => { this.props.onSuccess() })
   }
 
   render() {

assets/js/components/Pageviews.js

@@ -2,6 +2,7 @@
 
 import { h, render, Component } from 'preact';
 import * as numbers from '../lib/numbers.js';
+import Client from '../lib/client.js';
 
 const dayInSeconds = 60 * 60 * 24;
 
@@ -14,6 +15,9 @@ class Pageviews extends Component {
       records: []
     }
     this.fetchRecords = this.fetchRecords.bind(this);
+  }
+
+  componentDidMount() {
     this.fetchRecords(props.period);
   }
 
@@ -27,24 +31,16 @@ class Pageviews extends Component {
     const before = Math.round((+new Date() ) / 1000);
     const after = before - ( period * dayInSeconds );
 
-    return fetch(`/api/pageviews?before=${before}&after=${after}`, {
-      credentials: 'include'
-    }).then((r) => {
-      if( r.ok ) {
-        return r.json();
-      }
-
-      throw new Error();
-    }).then((data) => {
-      this.setState({ records: data })
-    });
+    Client.request(`/pageviews?before=${before}&after=${after}`)
+    .then((d) => { this.setState({ records: d })})
+    .catch((e) => { console.log(e) })
   }
 
   render() {
     const tableRows = this.state.records.map( (p, i) => (
       <tr>
         <td class="muted">{i+1}</td>
-        <td><a href={p.Path}>{p.Path}</a></td>
+        <td><a href={p.Path}>{p.Path.substring(0, 50)}{p.Path.length > 50 ? '..' : ''}</a></td>
         <td>{numbers.formatWithComma(p.Count)}</td>
         <td>{numbers.formatWithComma(p.CountUnique)}</td>
       </tr>

assets/js/components/Realtime.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import { h, render, Component } from 'preact';
+import Client from '../lib/client.js';
 
 class Realtime extends Component {
 
@@ -16,14 +17,8 @@ class Realtime extends Component {
   }
 
   fetchData() {
-    return fetch('/api/visits/count/realtime', {
-      credentials: 'include'
-    }).then((r) => {
-        if( r.ok ) { return r.json(); }
-        throw new Error();
-     }).then((data) => {
-        this.setState({ count: data })
-    });
+    Client.request(`visits/count/realtime`)
+      .then((d) => { this.setState({ count: d })})
   }
 
   render() {

assets/js/components/Table.js

@@ -2,6 +2,7 @@
 
 import { h, render, Component } from 'preact';
 import * as numbers from '../lib/numbers.js';
+import Client from '../lib/client.js';
 const dayInSeconds = 60 * 60 * 24;
 
 class Table extends Component {
@@ -17,7 +18,10 @@ class Table extends Component {
     this.tableHeaders = props.headers.map(heading => <th>{heading}</th>)
     this.fetchRecords = this.fetchRecords.bind(this)
     this.handleLimitChoice = this.handleLimitChoice.bind(this)
-    this.fetchRecords(props.period, this.state.limit)
+  }
+
+  componentDidMount() {
+      this.fetchRecords(props.period, this.state.limit)
   }
 
   labelCell(p) {
@@ -45,25 +49,9 @@ class Table extends Component {
     const before = Math.round((+new Date() ) / 1000);
     const after = before - ( period * dayInSeconds );
 
-    return fetch(`/api/${this.props.endpoint}?before=${before}&after=${after}&limit=${limit}`, {
-      credentials: 'include'
-    }).then((r) => {
-      if( r.ok ) {
-        return r.json();
-      }
-
-      // TODO: Make this pretty.
-      if( r.status == 401 ) {
-        this.props.onAuthError();
-      }
-
-      // TODO: do something with error
-      throw new Error();
-    }).then((data) => {
-      this.setState({ records: data })
-    }).catch((e) => {
-
-    });
+    Client.request(`${this.props.endpoint}?before=${before}&after=${after}&limit=${limit}`)
+      .then((d) => { this.setState({ records: d })})
+      .catch((e) => { console.log(e) })
   }
 
   render() {

assets/js/lib/client.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var Client = {};
+
+Client.request = function(resource, args) {
+  args = args || {};
+  args.credentials = 'include'
+
+  return fetch(`/api/${resource}`, args).then((r) => {
+    if( r.ok ) {
+      return r.json();
+    }
+
+    throw new Error(r);
+  })
+}
+
+export default Client