feat: use actions instead of directly using mutations

Rule-34 · Sep 4, 2020 · d7e8dad · d7e8dad
1 parent 60c2ef1
commit d7e8dad
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 26 deletions.
diff --git a/components/layout/navigation/NavigationMixin.js b/components/layout/navigation/NavigationMixin.js
@@ -23,14 +23,19 @@ export default {
   },
 
   methods: {
-    ...mapMutations('navigation', ['setSideNavIsActive', 'setSearchIsActive']),
+    ...mapActions('navigation', [
+      'sideNavNavigationManager',
+      'searchNavigationManager',
+    ]),
 
     routeHandler() {
       // Close Side Nav on route change
       if (this.isSideNavActive)
+        this.sideNavNavigationManager({ operation: 'set', value: false })
 
       // Close Search on route change
       if (this.isSearchActive)
+        this.searchNavigationManager({ operation: 'set', value: false })
 
       // Set different layout depending of the route
       switch (this.$nuxt.$route.name) {

diff --git a/components/layout/navigation/sidenav/Toggler.vue b/components/layout/navigation/sidenav/Toggler.vue
@@ -5,7 +5,7 @@
       class="block w-12 h-12 m-4 border-0 rounded-full shadow-lg select-none md:w-16 md:h-16 md:m-2 bg-gradient-lilac-blue"
       type="menu"
       title="Menu"
-      @click="setSideNavIsActive(!sideNav.isActive)"
+      @click="toggleSideNav()"
     >
       &nbsp;
     </button>
@@ -14,7 +14,7 @@
       type="menu"
       class="block w-10 h-10 m-5 border-0 rounded-full shadow-lg select-none md:w-12 md:h-12 md:m-4 bg-gradient-lilac-blue"
       title="Search"
-      @click="setSearchIsActive(!search.isActive)"
+      @click="toggleSearch()"
     >
       <!-- Search Icon -->
       <SearchIcon class="inline-flex w-6 h-6 icon text-default" />
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapActions } from 'vuex'
 import { SearchIcon } from 'vue-feather-icons'
 
 export default {
@@ -33,12 +33,19 @@ export default {
 
   props: { showSearch: { type: Boolean, default: false, required: false } },
 
-  computed: {
-    ...mapState('navigation', ['sideNav', 'search']),
-  },
-
   methods: {
-    ...mapMutations('navigation', ['setSideNavIsActive', 'setSearchIsActive']),
+    ...mapActions('navigation', [
+      'sideNavNavigationManager',
+      'searchNavigationManager',
+    ]),
+
+    toggleSideNav() {
+      this.sideNavNavigationManager({ operation: 'toggle' })
+    },
+
+    toggleSearch() {
+      this.searchNavigationManager({ operation: 'toggle' })
+    },
   },
 }
 </script>

diff --git a/components/layout/navigation/sidenav/TouchHandlerMixin.js b/components/layout/navigation/sidenav/TouchHandlerMixin.js
@@ -6,7 +6,10 @@ export default {
   },
 
   methods: {
-    ...mapMutations('navigation', ['setSideNavIsActive', 'setSearchIsActive']),
+    ...mapActions('navigation', [
+      'sideNavNavigationManager',
+      'searchNavigationManager',
+    ]),
 
     touchHandler(direction, event) {
       const touchThreshold = screen.availWidth * 0.25
@@ -19,10 +22,10 @@ export default {
             return
           }
 
-            this.setSearchIsActive(false)
           if (this.isSearchActive && this.isPostsPage) {
+            this.searchNavigationManager({ operation: 'set', value: false })
           } else {
-            this.setSideNavIsActive(true)
+            this.sideNavNavigationManager({ operation: 'set', value: true })
           }
           break
 
@@ -32,9 +35,10 @@ export default {
             return
           }
 
-            this.setSearchIsActive(true)
           if (!this.isSideNavActive && this.isPostsPage) {
+            this.searchNavigationManager({ operation: 'set', value: true })
           } else {
+            this.sideNavNavigationManager({ operation: 'set', value: false })
           }
           break
       }

diff --git a/components/pages/posts/navigation/search/Search.vue b/components/pages/posts/navigation/search/Search.vue
@@ -1,19 +1,19 @@
 <template>
   <form class="p-4 md:p-0 md:gap-4 search-grid">
     <!-- Space for clicking out -->
-    <div @click.self="setSearchIsActive(false)" />
+    <div @click.self="closeSearchMenu()" />
 
     <SearchBar />
 
     <SearchResults />
 
     <!-- Space for clicking out -->
-    <div @click.self="setSearchIsActive(false)" />
+    <div @click.self="closeSearchMenu()" />
   </form>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapActions } from 'vuex'
 
 // Components
 import SearchBar from './SearchBar.vue'
@@ -28,7 +28,11 @@ export default {
   },
 
   methods: {
-    ...mapMutations('navigation', ['setSearchIsActive']),
+    ...mapActions('navigation', ['searchNavigationManager']),
+
+    closeSearchMenu() {
+      this.searchNavigationManager({ operation: 'set', value: false })
+    },
   },
 }
 </script>

diff --git a/components/pages/posts/navigation/search/SearchResults.vue b/components/pages/posts/navigation/search/SearchResults.vue
@@ -7,19 +7,19 @@
     >
       <!-- If nothing searched -->
       <h1
-        v-if="!search.searchedTags.length && !search.addedTags.length"
+        v-if="!getSearchSearchedTags.length && !getSearchAddedTags.length"
         class="flex items-center justify-center flex-1 text-xl font-light tracking-wide text-default-text"
       >
         Search something!
       </h1>
 
       <!-- Added tags, click them to remove them -->
       <div
-        v-if="search.addedTags.length"
+        v-if="getSearchAddedTags.length"
         class="mb-1 overflow-y-scroll border-b rounded tag-container border-border max-h-1/2"
       >
         <button
-          v-for="tag in search.addedTags"
+          v-for="tag in getSearchAddedTags"
           :key="tag"
           type="button"
           class="tag color-util"
@@ -31,12 +31,12 @@
 
       <!-- Searched tags, click them to add them -->
       <div
-        v-if="search.searchedTags.length"
+        v-if="getSearchSearchedTags.length"
         class="flex-1 overflow-y-scroll rounded rounded-b-none tag-container"
       >
         <!-- Add tag to array of added tags -->
         <button
-          v-for="tag in search.searchedTags"
+          v-for="tag in getSearchSearchedTags"
           :key="tag.name"
           type="button"
           class="tag color-util group"
@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations, mapActions } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 
 // JS
 import { scrollToTop } from '~/assets/js/scrollUtils.js'
@@ -77,12 +77,13 @@ export default {
   name: 'SearchResults',
 
   computed: {
-    ...mapState('booru', ['search']),
+    ...mapGetters('booru', ['getSearchAddedTags', 'getSearchSearchedTags']),
+    ...mapGetters('navigation', ['isNegativeTagsActive']),
   },
 
   methods: {
     ...mapActions('booru', ['addedTagsManager', 'pidManager', 'fetchPosts']),
-    ...mapMutations('navigation', ['setSearchIsActive']),
+    ...mapActions('navigation', ['searchNavigationManager']),
 
     removeAddedTag(tag) {
       this.addedTagsManager({
@@ -110,7 +111,7 @@ export default {
     fetchAddedTags() {
       this.pidManager({ operation: 'reset' })
 
-      await this.setSearchIsActive(false)
+      this.searchNavigationManager({ operation: 'set', value: false })
 
       scrollToTop()