move vuex history logic into module

yyx990803 · yyx990803 · commit 30e764122c33 · 2017-01-04T17:55:17.000-05:00
diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
@@ -3,7 +3,7 @@
     <action-header slot="header">
       <div class="search">
         <i class="material-icons">search</i>
-        <input :class="{ invalid: invalidRegex }" placeholder="Filter mutations" v-model="userInputFilter">
+        <input :class="{ invalid: filterRegexInvalid }" placeholder="Filter mutations" v-model="filter">
       </div>
       <a class="button commit-all" :class="{ disabled: !history.length }" @click="commitAll" title="Commit All">
         <i class="material-icons">get_app</i>
@@ -68,57 +68,35 @@ import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 
 import keyNavMixin from '../../mixins/key-nav'
-import { mapState, mapActions } from 'vuex'
-
-const REGEX_RE = /^\/(.*?)\/(\w*)/
+import { mapState, mapGetters, mapActions } from 'vuex'
 
 export default {
   mixins: [keyNavMixin],
   components: {
     ActionHeader,
     ScrollPane
   },
-  data () {
-    return {
-      userInputFilter: '',
-      invalidRegex: false
-    }
-  },
   computed: {
+    filter: {
+      get () {
+        return this.$store.state.vuex.filter
+      },
+      set (filter) {
+        this.$store.dispatch('vuex/updateFilter', filter)
+      }
+    },
     ...mapState('vuex', [
       'enabled',
       'history',
       'lastCommit',
       'inspectedIndex',
-      'activeIndex'
+      'activeIndex',
+      'filterRegex',
+      'filterRegexInvalid'
     ]),
-    compiledFilter () {
-      const regexParts = this.userInputFilter.match(REGEX_RE)
-      if (regexParts !== null) {
-        // looks like it might be a regex -> try to compile it
-        try {
-          const re = new RegExp(regexParts[1], regexParts[2])
-          this.invalidRegex = false
-          return re
-        } catch (e) {
-          this.invalidRegex = true
-          return new RegExp('.*', 'i')
-        }
-      }
-      // simple case-insensitve search
-      this.invalidRegex = false
-      return new RegExp(this.escapeStringForRegExp(this.userInputFilter), 'i')
-    },
-    filteredHistory () {
-      return this.history.filter((entry) => {
-        return this.compiledFilter.test(entry.mutation.type)
-      })
-    }
-  },
-  filters: {
-    formatTime (timestamp) {
-      return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
-    }
+    ...mapGetters('vuex', [
+      'filteredHistory'
+    ])
   },
   methods: {
     ...mapActions('vuex', [
@@ -128,7 +106,8 @@ export default {
       'commitSelected',
       'revertSelected',
       'step',
-      'timeTravelToSelected'
+      'timeTravelToSelected',
+      'updateFilter'
     ]),
     isActive (entry) {
       return this.activeIndex === this.history.indexOf(entry)
@@ -142,9 +121,11 @@ export default {
       } else if (dir === 'down') {
         this.step(this.inspectedIndex + 1)
       }
-    },
-    escapeStringForRegExp (str) {
-      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')
+    }
+  },
+  filters: {
+    formatTime (timestamp) {
+      return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
     }
   }
 }
diff --git a/src/devtools/views/vuex/actions.js b/src/devtools/views/vuex/actions.js
@@ -48,6 +48,10 @@ export function importState ({ commit, dispatch }, importedState) {
   dispatch('reset')
 }
 
+export function updateFilter ({ commit }, filter) {
+  commit('UPDATE_FILTER', filter)
+}
+
 function travelTo (state, commit) {
   const { history, inspectedIndex, base } = state
   const targetState = inspectedIndex > -1
diff --git a/src/devtools/views/vuex/module.js b/src/devtools/views/vuex/module.js
@@ -2,6 +2,8 @@ import { parse } from 'src/util'
 import * as actions from './actions'
 import storage from 'storage'
 
+const REGEX_RE = /^\/(.*?)\/(\w*)/
+const ANY_RE = new RegExp('.*', 'i')
 const ENABLED_KEY = 'VUEX_ENABLED'
 const enabled = storage.get(ENABLED_KEY)
 
@@ -14,7 +16,10 @@ const state = {
   activeIndex: -1,
   history: [],
   initialCommit: Date.now(),
-  lastCommit: Date.now()
+  lastCommit: Date.now(),
+  filter: '',
+  filterRegex: ANY_RE,
+  filterRegexInvalid: false
 }
 
 const mutations = {
@@ -25,7 +30,9 @@ const mutations = {
   },
   'RECEIVE_MUTATION' (state, entry) {
     state.history.push(entry)
-    state.inspectedIndex = state.activeIndex = state.history.length - 1
+    if (!state.filter) {
+      state.inspectedIndex = state.activeIndex = state.history.length - 1
+    }
   },
   'COMMIT_ALL' (state) {
     state.base = state.history[state.history.length - 1].state
@@ -39,17 +46,12 @@ const mutations = {
     state.base = state.history[state.inspectedIndex].state
     state.lastCommit = Date.now()
     state.history = state.history.slice(state.inspectedIndex + 1)
-    state.inspectedIndex = -1
+    state.inspectedIndex = state.activeIndex = -1
   },
   'REVERT_SELECTED' (state) {
     state.history = state.history.slice(0, state.inspectedIndex)
     state.inspectedIndex--
   },
-  'RESET' (state) {
-    state.base = state.initial
-    state.lastCommit = state.initialCommit
-    reset(state)
-  },
   'STEP' (state, index) {
     state.inspectedIndex = index
   },
@@ -58,12 +60,34 @@ const mutations = {
   },
   'TOGGLE' (state) {
     storage.set(ENABLED_KEY, state.enabled = !state.enabled)
+  },
+  'UPDATE_FILTER' (state, filter) {
+    state.filter = filter
+    const regexParts = filter.match(REGEX_RE)
+    if (regexParts !== null) {
+      // looks like it might be a regex -> try to compile it
+      try {
+        state.filterRegexInvalid = false
+        state.filterRegex = new RegExp(regexParts[1], regexParts[2])
+      } catch (e) {
+        state.filterRegexInvalid = true
+        state.filterRegex = ANY_RE
+      }
+    } else {
+      // simple case-insensitve search
+      state.filterRegexInvalid = false
+      state.filterRegex = new RegExp(escapeStringForRegExp(filter), 'i')
+    }
   }
 }
 
 function reset (state) {
   state.history = []
-  state.inspectedIndex = -1
+  state.inspectedIndex = state.activeIndex = -1
+}
+
+function escapeStringForRegExp (str) {
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')
 }
 
 const getters = {
@@ -78,6 +102,10 @@ const getters = {
     }
     res.state = parse(entry ? entry.state : base)
     return res
+  },
+
+  filteredHistory ({ history, filterRegex }) {
+    return history.filter(entry => filterRegex.test(entry.mutation.type))
   }
 }
 
