Improve speed of DOM updating on stars and tags list by using smaller…

…, more targeted responses and mutations where available
astralapp · Nov 13, 2016 · a057137 · a057137
1 parent 7d9ff84
commit a057137
Show file tree

Hide file tree

Showing 18 changed files with 152 additions and 196 deletions.
diff --git a/app/Http/Controllers/GithubController.php b/app/Http/Controllers/GithubController.php
@@ -73,14 +73,15 @@ private function mapStarsToRepos($stars, $autotag)
             }
             if ($star) {
                 $stars['stars'][$i]['tags'] = $star->tags;
+                $stars['stars'][$i]['notes'] = $star->notes;
             } else {
                 $stars['stars'][$i]['tags'] = [];
+                $stars['stars'][$i]['notes'] = '';
             }
         }
 
         return [
             'stars' => $stars,
-            'tags' => Tag::withStars()->get(),
         ];
     }
 }
diff --git a/app/Http/Controllers/StarController.php b/app/Http/Controllers/StarController.php
@@ -43,8 +43,8 @@ public function tag(Request $request)
         }
 
         return [
-            'stars' => Star::withTags()->get(),
-            'tags' => Tag::withStars()->get(),
+            'star' => Star::withTags()->where('id', $star->id)->first(),
+            'tags' => Tag::withStarCount()->get(),
         ];
     }
 
@@ -81,7 +81,7 @@ public function syncTags(Request $request)
         }
 
         return [
-            'stars' => Star::withTags()->get(),
+            'star' => Star::withTags()->where('id', $star->id)->first(),
             'tags' => Tag::withStars()->get(),
         ];
     }
@@ -128,6 +128,6 @@ public function editNotes(Request $request)
         $star->notes = $text;
         $star->save();
 
-        return Star::withTags()->get();
+        return $star;
     }
 }
diff --git a/app/Http/Controllers/TagController.php b/app/Http/Controllers/TagController.php
@@ -33,7 +33,7 @@ public function store(Request $request)
         ]);
         $tag = Tag::create($request->only('name', 'description'));
 
-        return Tag::withStarCount()->get();
+        return $tag;
     }
 
     /**

diff --git a/public/build/js/app-f44dd68c0b.bundle.js → public/build/js/app-ab203a237f.bundle.js b/public/build/js/app-f44dd68c0b.bundle.js → public/build/js/app-ab203a237f.bundle.js
diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json
@@ -1,4 +1,4 @@
 {
   "css/app.css": "css/app-a1e36fe960.css",
-  "js/app.bundle.js": "js/app-f44dd68c0b.bundle.js"
+  "js/app.bundle.js": "js/app-ab203a237f.bundle.js"
 }
diff --git a/public/css/app.css.map b/public/css/app.css.map
diff --git a/public/js/app.bundle.js b/public/js/app.bundle.js
diff --git a/resources/assets/js/components/dashboard-star-list.vue b/resources/assets/js/components/dashboard-star-list.vue
@@ -23,12 +23,10 @@
 </template>
 <script>
 import { user } from "../store/getters/userGetters"
-import { githubStars } from "../store/getters/githubGetters"
-import { stars, currentStar } from "../store/getters/starsGetters"
+import { githubStars, currentStar } from "../store/getters/githubGetters"
 import { currentTag, tagFilter } from "../store/getters/tagsGetters"
 import { tokenizedSearchQuery } from "../store/getters/galileoGetters"
 import {
-  fetchStars,
   fetchGithubStars,
   setCurrentStar,
   setCurrentTag
@@ -49,11 +47,9 @@ export default {
       currentTag,
       tagFilter,
       currentStar,
-      stars,
       searchQuery: tokenizedSearchQuery
     },
     actions: {
-      fetchStars,
       fetchGithubStars,
       setCurrentStar,
       setCurrentTag
@@ -66,7 +62,6 @@ export default {
   },
   ready () {
     this.$root.$broadcast("STATUS", "Loading stars...")
-    this.fetchStars()
     this.fetchGithubStars().then((res) => {
       this.$root.$broadcast("STATUS", "")
     }).catch((errors) => {

diff --git a/resources/assets/js/components/star-info.vue b/resources/assets/js/components/star-info.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="dashboard-repo-details">
-    <!-- <div class="empty-placeholder" v-show="star.hasOwnProperty('id') && !readme" v-show="!readme">No Readme For {{ star.full_name }}</div> -->
-    <div class="empty-placeholder" v-show="!star.hasOwnProperty('id')">No Repo Selected</div>
-    <div class="manage-star" v-if="star.hasOwnProperty('id')">
+    <div class="empty-placeholder" v-show="!currentStar.hasOwnProperty('id')">No Repo Selected</div>
+    <div class="manage-star" v-if="currentStar.hasOwnProperty('id')">
       <div class="edit-star-tags">
           <div class="dropdown-wrap">
             <button class="toggle-tag-editor" @click="tagEditorShowing = !tagEditorShowing"><i class="fa fa-tag"></i> Edit Tags</button>
@@ -14,7 +13,7 @@
       <button class="toggle-notes-editor" @click="noteEditorShowing = !noteEditorShowing"><i class="fa fa-sticky-note"></i> Notes</button>
       <div class="clone-url">
         <label for="txtGitHubCloneURL" @click="focusCloneInput">Clone:</label>
-        <input type="text" id="txtGitHubCloneURL" :value="star.ssh_url" @focus="focusCloneInput" readonly/>
+        <input type="text" id="txtGitHubCloneURL" :value="currentStar.ssh_url" @focus="focusCloneInput" readonly/>
       </div>
     </div>
     <div class="readme-error-overlay" :class="{ 'active': readmeError }">
@@ -30,13 +29,12 @@
       {{{ readme }}}
     </div>
     <div>
-      <star-notes-editor :notes="notes" v-if="star.hasOwnProperty('id') && noteEditorShowing"></star-notes-editor>
+      <star-notes-editor :notes="notes" v-if="currentStar.hasOwnProperty('id') && noteEditorShowing"></star-notes-editor>
     </div>
   </div>
 </template>
 <script>
-import { readme } from "../store/getters/githubGetters"
-import { stars, currentStar } from "../store/getters/starsGetters"
+import { readme, currentStar } from "../store/getters/githubGetters"
 import { tags } from "../store/getters/tagsGetters"
 import { editStarNotes, syncTags, fetchReadme } from "../store/actions"
 import TagEditor from "./tag-editor.vue"
@@ -48,10 +46,9 @@ export default {
   mixins: [clickaway],
   vuex: {
     getters: {
-      readme: readme,
-      stars: stars,
-      star: currentStar,
-      tags: tags
+      readme,
+      currentStar,
+      tags
     },
     actions: {
       editStarNotes,
@@ -71,22 +68,17 @@ export default {
   },
   computed: {
     notes () {
-      if (this.userStar && this.userStar.hasOwnProperty("id")) {
-        return this.userStar.notes
+      if (this.currentStar && this.currentStar.hasOwnProperty("id")) {
+        return this.currentStar.notes
       } else {
         return ""
       }
     },
-    userStar () {
-      return this.stars.filter((star) => {
-        return this.star.id === star.repo_id
-      })[0]
-    },
     tagList () {
       return this.tags.map((tag) => {
         var isSelected = false
-        if (this.userStar && this.star.tags.length) {
-          isSelected = this.star.tags.map(function (starTag) {
+        if (this.currentStar.tags.length) {
+          isSelected = this.currentStar.tags.map(function (starTag) {
             return starTag.id
           }).indexOf(tag.id) > -1
         }
@@ -107,17 +99,15 @@ export default {
       }
     },
     syncTags (tags) {
-      if (tags.length) {
-        this.sync(this.star, tags).then((res) => {
-          this.$root.$broadcast("NOTIFICATION", `Tags for ${this.star.full_name} updated.`)
-        }).catch((errors) => {
-          this.$root.$broadcast("NOTIFICATION", "There was an error saving these tags.", "error")
-        })
-      }
+      this.sync(this.currentStar, tags).then((res) => {
+        this.$root.$broadcast("NOTIFICATION", `Tags for ${this.currentStar.full_name} updated.`)
+      }).catch((errors) => {
+        this.$root.$broadcast("NOTIFICATION", "There was an error saving these tags.", "error")
+      })
       this.hideTagEditor()
     },
     saveNotes (notes) {
-      this.editStarNotes(this.star, notes).catch((errors) => {
+      this.editStarNotes(this.currentStar, notes).catch((errors) => {
         this.$root.$broadcast("NOTIFICATION", "There was an error saving your notes for this star.", "error")
       })
     },
@@ -138,7 +128,7 @@ export default {
     "STAR_CHANGED": function () {
       this.noteEditorShowing = false
       this.readmeLoading = true
-      this.fetchReadme(this.star.full_name).then(() => {
+      this.fetchReadme(this.currentStar.full_name).then(() => {
         this.readmeError = false
         this.readmeLoading = false
         this.readmeNotFound = false

diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
@@ -54,7 +54,6 @@ export const fetchGithubStars = ({ dispatch, state, actions }, page = 1, autotag
         dispatch(types.SET_GITHUB_STARS, [])
       }
       data = response.data.message
-      dispatch(types.SET_TAGS, data.tags)
       if (data.stars.page_count) {
         dispatch(types.SET_TOTAL_PAGES, data.stars.page_count)
       }
@@ -162,7 +161,7 @@ export const addTag = ({ dispatch, state }) => {
         "Authorization": `Bearer ${ls("jwt")}`
       }
     }).then((response) => {
-      dispatch(types.SET_TAGS, response.data.message)
+      dispatch(types.ADD_TAG, response.data.message)
       dispatch(types.RESET_NEW_TAG)
       resolve(response.data.message)
     }, (response) => {
@@ -187,8 +186,8 @@ export const syncTags = ({ dispatch, state }, repo, tags) => {
         "Authorization": `Bearer ${ls("jwt")}`
       }
     }).then((response) => {
-      fetchGithubStars({ dispatch, state }, 1, 0)
-      dispatch(types.SET_STARS, response.data.message.stars)
+      dispatch(types.SET_CURRENT_STAR, state.github.githubStars.find(repo => repo.id === response.data.message.star.repo_id))
+      dispatch(types.SET_REPO_TAGS, response.data.message.star.repo_id, response.data.message.star.tags)
       dispatch(types.SET_TAGS, response.data.message.tags)
       resolve(response.data.message)
     }, (response) => {
@@ -209,11 +208,12 @@ export const editTagName = ({ dispatch, state }, tagId, name) => {
         "Authorization": `Bearer ${ls("jwt")}`
       }
     }).then((response) => {
-      fetchGithubStars({ dispatch, state }, 1, 0)
-      fetchStars({ dispatch })
       dispatch(types.SET_TAGS, response.data.message.tags)
       setCurrentTag({ dispatch }, response.data.message.tag)
-      resolve(response.data.message.tag)
+      setTimeout(() => {
+        dispatch(types.EDIT_TAG_NAMES_ON_STARS, tagId, response.data.message.tag)
+        resolve(response.data.message.tag)
+      }, 0)
     }, (response) => {
       reject(response.data)
     })
@@ -228,8 +228,7 @@ export const deleteTag = ({ dispatch, state }, tagId) => {
         "Authorization": `Bearer ${ls("jwt")}`
       }
     }).then((response) => {
-      fetchGithubStars({ dispatch, state }, 1, 0)
-      fetchStars({ dispatch })
+      dispatch(types.REMOVE_TAG_FROM_STARS, tagId)
       dispatch(types.SET_TAGS, response.data.message)
       resolve(response.data.message)
     }, (response) => {
@@ -247,25 +246,9 @@ export const tagStar = ({ dispatch, state }, starData) => {
         "Authorization": `Bearer ${ls("jwt")}`
       }
     }).then((response) => {
-      fetchGithubStars({ dispatch, state })
+      dispatch(types.SET_CURRENT_STAR, state.github.githubStars.find(repo => repo.id === response.data.message.star.repo_id))
       dispatch(types.SET_TAGS, response.data.message.tags)
-      dispatch(types.SET_STARS, response.data.message.stars)
-      resolve(response.data.message)
-    }, (response) => {
-      reject(response.data)
-    })
-  })
-  return promise
-}
-
-export const fetchStars = ({ dispatch }) => {
-  const promise = new Promise((resolve, reject) => {
-    Vue.http.get("/api/stars", null, {
-      headers: {
-        "Authorization": `Bearer ${ls("jwt")}`
-      }
-    }).then((response) => {
-      dispatch(types.SET_STARS, response.data.message)
+      dispatch(types.SET_REPO_TAGS, response.data.message.star.repo_id, response.data.message.star.tags)
       resolve(response.data.message)
     }, (response) => {
       reject(response.data)
@@ -281,7 +264,7 @@ export const editStarNotes = ({ dispatch }, star, text) => {
         "Authorization": `Bearer ${ls("jwt")}`
       }
     }).then((response) => {
-      dispatch(types.SET_STARS, response.data.message)
+      dispatch(types.SET_REPO_NOTES, response.data.message.repo_id, response.data.message.notes)
       resolve(response.data.message)
     }, (response) => {
       reject(response.data)
@@ -307,16 +290,10 @@ export const setSearchQuery = ({ dispatch }, query) => {
   }).map((s) => {
     return s.toLowerCase()
   })
-  const languages = searchArray.filter((s) => {
-    return s[0] === "@"
-  }).map((s) => {
-    return s.toLowerCase()
-  })
   const tokenizedQuery = {
     "query": query,
     "tags": tags,
-    "strings": strings,
-    "languages": languages
+    "strings": strings
   }
   dispatch(types.SET_TOKENIZED_SEARCH, tokenizedQuery)
 }
diff --git a/resources/assets/js/store/getters/githubGetters.js b/resources/assets/js/store/getters/githubGetters.js
@@ -5,3 +5,7 @@ export const githubStars = state => {
 export const readme = state => {
   return state.github.readme
 }
+
+export const currentStar = state => {
+  return state.github.currentStar
+}
diff --git a/resources/assets/js/store/getters/starsGetters.js b/resources/assets/js/store/getters/starsGetters.js