improved pushstate history and errors

Author: samuelcolvin

config.js

@@ -10,10 +10,12 @@ if (process.env.TRAVIS_TAG) {
   prod_public_path = 'https://cdn.tutorcruncher.com/socket/' + process.env.npm_package_version + '/'
   version = `${process.env.npm_package_version}`
 } else {
-  prod_build_dir = path.resolve(__dirname, 'dist', 'dev', process.env.npm_package_version)
+  console.log('no tag detected, building to dev > branch')
+  prod_build_dir = path.resolve(__dirname, 'dist', 'dev', process.env.TRAVIS_BRANCH || '')
   prod_public_path = 'https://cdn.tutorcruncher.com/socket/dev/' + process.env.npm_package_version + '/'
   version = `${process.env.npm_package_version}-${process.env.TRAVIS_COMMIT}`
 }
+console.log(`build directory: "${prod_build_dir}"`)
 
 module.exports = {
   build: {

src/main.js

@@ -15,12 +15,12 @@ const ConfiguredVueRouter = config => new VueRouter({
   mode: config.router_mode,
   routes: [
     {
-      path: '/',
+      path: config.url_root,
       name: 'index',
       component: grid,
       children: [
         {
-          path: '/:link',
+          path: config.url_root + ':link',
           name: 'modal',
           component: modal,
         }
@@ -31,19 +31,27 @@ const ConfiguredVueRouter = config => new VueRouter({
 
 module.exports = function (public_key, config) {
   config = config || {}
+  let error = null
 
   if (config.api_root === undefined) {
     config.api_root = process.env.SOCKET_API_URL
   }
 
-  if (config.element === undefined) {
-    config.element = '#socket'
+  if (config.url_root === undefined) {
+    config.url_root = '/'
+  } else if (!config.url_root.startsWith('/')) {
+    config.url_root = '/'
+    error = 'the "url_root" config parameter should start (and probably end) with a slash "/"'
   }
 
   if (config.router_mode === undefined) {
     config.router_mode = 'hash'
   }
 
+  if (config.element === undefined) {
+    config.element = '#socket'
+  }
+
   if (config.contact_html === undefined) {
     config.contact_html = 'To request tutoring from {name} please <a href="{contact_link}">get in touch</a> with us.'
   }
@@ -72,7 +80,17 @@ module.exports = function (public_key, config) {
     },
     methods: {
       // get_data is called by components, eg. grid
+      handle_error: function (error_message) {
+        this.error = error_message || 'unknown'
+        console.error(this.error)
+        Raven.captureException(new Error(this.error))
+      },
       get_list: function () {
+        // if an error already exists show that and return
+        if (error !== null) {
+          this.handle_error(error)
+          return
+        }
         let xhr = new window.XMLHttpRequest()
         let url = `${config.api_root}/${public_key}/contractors`
         xhr.open('GET', url)
@@ -87,22 +105,20 @@ module.exports = function (public_key, config) {
             this.contractors.splice(0)
             contractors.forEach(con => this.contractors.push(con))
           } catch (e) {
-            this.error = `\
+            this.handle_error(`\
 ${e.toString()}
 requested url:   "${url}"
 response status: ${xhr.status}
 response text:
-${xhr.responseText}`
-            Raven.captureException(new Error(this.error))
+${xhr.responseText}`)
           }
         }
         xhr.onerror = () => {
-          this.error = `\
+          this.handle_error(`\
 Connection error
 requested url:   "${url}"
 response status: ${xhr.status}
-response text:   "${xhr.responseText}"`
-          Raven.captureException(new Error(this.error))
+response text:   "${xhr.responseText}"`)
         }
         xhr.send()
       },

test/unit/specs/main.js

@@ -2,37 +2,37 @@ import socket from 'src/main'
 
 const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
 
-describe('main.js', done => {
-  let server
-  before(() => {
-    server = sinon.fakeServer.create()
-    server.autoRespond = true
-    server.respondWith(dft_response)
-  })
-  after(() => { server.restore() })
-
-  it('should initialise with different element name', done => {
-    let outer = document.createElement('div')
-    outer.setAttribute('id', 'outer')
-    document.body.appendChild(outer)
-    let el = document.createElement('div')
-    el.setAttribute('id', 'foobar')
-    outer.appendChild(el)
-
-    const vm = socket('public_key', {
-      element: '#foobar'
-    })
-
-    expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
-    // no time for get_data to be called so wont fail
-    expect(vm.contractors).to.be.empty
-
-    setTimeout(() => {
-      expect(vm.contractors).to.have.lengthOf(1)
-      done()
-    }, 50)
-  })
-})
+// describe('main.js', done => {
+//   let server
+//   before(() => {
+//     server = sinon.fakeServer.create()
+//     server.autoRespond = true
+//     server.respondWith(dft_response)
+//   })
+//   after(() => { server.restore() })
+//
+//   it('should initialise with different element name', done => {
+//     let outer = document.createElement('div')
+//     outer.setAttribute('id', 'outer')
+//     document.body.appendChild(outer)
+//     let el = document.createElement('div')
+//     el.setAttribute('id', 'foobar')
+//     outer.appendChild(el)
+//
+//     const vm = socket('public_key', {
+//       element: '#foobar'
+//     })
+//
+//     expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
+//     // no time for get_data to be called so wont fail
+//     expect(vm.contractors).to.be.empty
+//
+//     setTimeout(() => {
+//       expect(vm.contractors).to.have.lengthOf(1)
+//       done()
+//     }, 50)
+//   })
+// })
 
 describe('main.js', () => {
   let server