fix(tags): Fix tags being duplicated (#959)

src/actions/Tags.ts

@@ -1,23 +0,0 @@
-import store from '@/store'
-import { ArrayHelper } from '@/helpers'
-import type { MainDataResponse } from '@/types/qbit/responses'
-
-export class Tags {
-  static update(response: MainDataResponse) {
-    if (response?.fullUpdate === true) {
-      store.state.tags = response.tags
-
-      return
-    }
-
-    if (response.tags_removed) {
-      store.state.tags = ArrayHelper.remove(store.state.tags, ...response.tags_removed)
-
-      return
-    }
-
-    if (response.tags) {
-      store.state.tags = ArrayHelper.concat(store.state.tags, response.tags)
-    }
-  }
-}

src/actions/index.ts

@@ -1,7 +1,6 @@
 import { DocumentTitle } from './DocumentTitle'
-import { Tags } from './Tags'
 import { Torrents } from './Torrents'
 import { Trackers } from './Trackers'
 import { Graph } from './Graph'
 
-export { DocumentTitle, Tags, Torrents, Trackers, Graph }
+export { DocumentTitle, Torrents, Trackers, Graph }

src/components/Modals/TagsAndCategories/CreateTagDialog.vue

@@ -24,24 +24,31 @@
   </v-dialog>
 </template>
 
-<script>
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {mapGetters} from 'vuex'
 import qbit from '@/services/qbit'
 import {Modal} from '@/mixins'
 
-export default {
+export default defineComponent({
   name: 'CreateTagDialog',
   mixins: [Modal],
-  data: () => ({
-    tagname: '',
-    rules: [v => !!v || 'Tag is required']
-  }),
-  computed: {
-    isValid() {
-      return !!this.tagname
+  data() {
+    return {
+      tagname: '',
+      tags: [] as string[],
+      rules: [(v: string) => !!v || 'Tag is required', (v: string) => this.tags.indexOf(v) === -1 || 'Tag already exists']
     }
   },
-  created() {
-    this.$store.commit('FETCH_TAGS')
+  computed: {
+    ...mapGetters(['getAvailableTags']),
+    isValid() {
+      return !!this.tagname && this.tags.indexOf(this.tagname) === -1
+    }
+  },
+  async mounted() {
+    await this.$store.commit('FETCH_TAGS')
+    Object.assign(this.tags, this.getAvailableTags())
   },
   methods: {
     async create() {
@@ -54,5 +61,5 @@ export default {
       this.dialog = false
     }
   }
-}
+})
 </script>

src/mixins/Tab.ts

@@ -1,14 +1,19 @@
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import {defineComponent} from 'vue'
 
-@Component
-export default class Tab extends Vue {
-  @Prop() hash!: string
-  @Prop() isActive!: boolean
-
-  activeMethod!: () => void
-
-  @Watch('isActive')
-  isActiveChanged(active: boolean) {
-    if (active) this.activeMethod()
+export default defineComponent({
+  name: 'Tab',
+  props: {
+    hash: String,
+    isActive: Boolean
+  },
+  watch: {
+    isActive() {
+      if (this.isActive) this.activeMethod()
+    }
+  },
+  methods: {
+    activeMethod() {
+      throw new Error('Method not implemented.')
+    }
   }
-}
+})

src/store/mutations.ts

@@ -1,5 +1,5 @@
 import qbit from '../services/qbit'
-import { DocumentTitle, Tags, Trackers, Torrents, Graph } from '@/actions'
+import { DocumentTitle, Trackers, Torrents, Graph } from '@/actions'
 import { setLanguage } from '@/plugins/i18n'
 import type { ModalTemplate, StoreState } from '@/types/vuetorrent'
 import Torrent from '@/models/Torrent'
@@ -61,7 +61,6 @@ export default {
       state.rid = response.rid || undefined
 
       state.status = new Status(response.server_state)
-      Tags.update(response)
       Graph.shiftValues()
 
       // fetch torrent data