Fix loading indicator

src/components/Hackmap.vue

@@ -3,6 +3,7 @@
     <left
       @toggleForm="toggleForm" @updateSelectedProject="updateSelectedProject"
       @drag="leftDrag"
+      :state="state"
       :form="form" :projects="projects"
       :selectedProject="selectedProject" :username="username" :isHasIssue="isHasIssue">
     </left>
@@ -39,6 +40,7 @@ export default {
   },
   data () {
     return {
+      state: '',
       helpText: '',
       projects: [],
       mapWidth: 0,
@@ -191,6 +193,7 @@ export default {
       onAuthenticationRequired: auth.getOAuthToken,
       pollIntervalSeconds: 60,
       onProjectsUpdated: projects => {
+        this.$set(this.$data, 'state', 'running')
         this.projects = projects
         const loggingInUserComment = this.projects.find(comment => comment.userId === this.userId)
         if (loggingInUserComment !== undefined) {
@@ -204,9 +207,12 @@ export default {
         this.username = response.data.login
         this.userId = response.data.id
       },
-      issueNumber: this.issueNumber,
+      issueNumber: '38', // this.issueNumber,
       onError: errMsg => {
         this.notifyError(errMsg)
+      },
+      onInit: () => {
+        this.$set(this.$data, 'state', 'init')
       }
     })
     // we need to calculate map dimensions in order to place the avatars

src/components/Left.vue

@@ -20,21 +20,22 @@
     <img v-bind:src="project.avatar_thumbnail" width="36" v-bind:alt="project.username" draggable="false" />
     {{project.title}}
     </div>
-    <div class="details" v-if="projects.length === 0">
-      No hacks yet! You can be first!
+    <div class="details" v-if="state === 'running' && projects.length === 0">
+      <p>No hacks yet! You can be first!</p>
     </div>
-    <div class="loader" v-if="projects.loading">
+    <div class="loader" v-if="state === 'init'">
       <div class="loader1"></div>
       <div class="loader2"></div>
       <div class="loader3"></div>
+      <p>No comments because we're loading</p>
     </div>
   </div>
 </template>
 
 <script>
   export default {
     name: 'left',
-    props: ['form', 'projects', 'selectedProject', 'username', 'isHasIssue'],
+    props: ['form', 'projects', 'selectedProject', 'username', 'isHasIssue', 'state'],
     methods: {
       toggleForm () {
         this.$emit('toggleForm')

src/github-issues.js

@@ -29,10 +29,12 @@ export default class GitHubIssueService {
       this.ensureAuthenticatedClient()
     }
 
+    this.config.onInit()
+
     // issue ajax requests to load data from github
     // the model will be updated periodically from the callbacks
     this.getIssues()
-      .then((issues) => { this.getMainThread(issues) } )
+      .then((issues) => { this.getMainThread(issues) })
       .then(() => this.pollIssueForComments())
       .catch((err) => {
         this.reportError(err)
@@ -43,13 +45,16 @@ export default class GitHubIssueService {
   /**
    * @returns {Promise}
    */
-  getIssues() {
+  getIssues () {
     return this.github.repo.get('issues', { params: { labels: this.config.label } })
                            .then((response) => response.data)
-                           .catch((err) => { throw new Error('Unable get issues data') })
+                           .catch((err) => {
+                             this.reportError(err)
+                             throw new Error('Unable get issues data')
+                           })
   }
 
-  getMainThread(issues) {
+  getMainThread (issues) {
     if (!issues.length) {
       throw new Error('Could not find an open issue labeled: ' + this.config.label)
     }
@@ -76,7 +81,7 @@ export default class GitHubIssueService {
           .post('issues/' + this.issueNumber + '/comments', { body: body })
       })
       .then((response) => {
-        return serialization.deserializeCommentToProject(issues)
+        return serialization.deserializeCommentToProject(response)
       })
   }
 
@@ -87,7 +92,7 @@ export default class GitHubIssueService {
         return this.github.repo.patch('issues/comments/' + project.id, { body: body })
       })
       .then(response => {
-        return serialization.deserializeCommentToProject(issues)
+        return serialization.deserializeCommentToProject(response)
       })
   }
 

test/github-issues.test.js

@@ -26,7 +26,8 @@ let validConfig = () => {
     pollIntervalSeconds: 1,
     onAuthenticationRequired: () => {},
     onProjectsUpdated: () => {},
-    onError: (error) => {}
+    onError: (error) => {},
+    onInit: () => {}
   }
 }
 
@@ -102,5 +103,15 @@ describe('GitHubIssueService', () => {
       instance(cfg)
     })
   })
+
+  describe('.onInit callback ', () => {
+    it('will be fired when starting the service', (done) => {
+      let cfg = validConfig()
+      cfg.onInit = () => {
+        done()
+      }
+      instance(cfg)
+    })
+  })
 })