Category description component refactor

front/client/components/CategoryDescription.vue

@@ -1,30 +1,32 @@
 <template>
   <div class="category-description">
-    <div v-if="!editDescriptionShown">
+    <div v-if="!isEditDescription">
       <p v-if="!categoryDescription">This category has no description yet, you can contribute to the category by adding description</p>
-      <div class="category-description__content" v-else v-html="categoryDescription" />
+      <div
+        v-else
+        v-html="categoryDescription"
+        class="category-description__content"
+      />
     </div>
 
     <markdown-editor
-      v-if="editDescriptionShown"
-      class="mb-2"
+      v-else
       toolbar
-      :value="categoryDscMarkdown"
+      :value="categoryDescriptionRaw"
       @cancel="toggleEditDescription"
-      @save="updateDescription({original: originalDescription, modified: $event})"
+      @save="updateDescription({ original: categoryDescriptionRaw, modified: $event})"
     />
 
     <v-btn
-      v-if="!editDescriptionShown"
-      depressed
-      small
-      light
+      text
+      v-if="!isEditDescription"
+      color="grey darken-2"
+      class="mt-3"
       :title="descriptionBtnText"
-      color="lightgrey"
       @click="toggleEditDescription"
     >
-      <v-icon size="14" class="mr-1" left>{{descriptionBtnIcon}}</v-icon>
-      {{descriptionBtnText}}
+      <v-icon size="14" class="mr-1" left>{{ descriptionBtnIcon }}</v-icon>
+      {{ descriptionBtnText }}
     </v-btn>
   </div>
 </template>
@@ -32,7 +34,6 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { Prop } from 'vue-property-decorator'
 import _get from 'lodash/get'
 import MarkdownEditor from 'client/components/MarkdownEditor.vue'
 import conflictDialogMixin from 'client/mixins/conflictDialogMixin'
@@ -45,17 +46,13 @@ import CatchConflictDecorator from 'client/helpers/CatchConflictDecorator'
   mixins: [conflictDialogMixin]
 })
 export default class CategoryDescription extends Vue {
-  editDescriptionShown: boolean = false
-  originalDescription: string = _get(this, '$store.state.category.category.description.text')
-  modified: string = ''
-  descriptionButtonIcon: string = ''
-  descriptionButtonText: string = ''
+  isEditDescription: boolean = false
 
   get categoryDescription () {
     return _get(this, '$store.state.category.category.description.html')
   }
 
-  get categoryDscMarkdown () {
+  get categoryDescriptionRaw () {
     return _get(this, '$store.state.category.category.description.text')
   }
 
@@ -63,19 +60,16 @@ export default class CategoryDescription extends Vue {
     return this.$store.state.category.category.id
   }
 
-  // TODO refactor
   get descriptionBtnIcon () {
-    const description = _get(this, '$store.state.category.category.description.html')
-    return description ? this.descriptionButtonIcon = '$vuetify.icons.pen' : this.descriptionButtonIcon = '$vuetify.icons.plus'
+    return this.categoryDescription ? '$vuetify.icons.pen' : '$vuetify.icons.plus'
   }
 
   get descriptionBtnText () {
-    const description = _get(this, '$store.state.category.category.description.html')
-    return description ? this.descriptionButtonText = 'Edit description' : this.descriptionButtonText = 'Add description'
+    return this.categoryDescription ? 'Edit description' : 'Add description'
   }
 
   toggleEditDescription () {
-    this.editDescriptionShown = !this.editDescriptionShown
+    this.isEditDescription = !this.isEditDescription
   }
 
   @CatchConflictDecorator
@@ -85,15 +79,15 @@ export default class CategoryDescription extends Vue {
       original,
       modified
     })
-    this.originalDescription = modified
     this.toggleEditDescription()
+    this.$store.dispatch('category/reloadCategory')
   }
 }
 </script>
 
 <style lang="postcss" scoped>
 .category-description {
-  margin: 0 0 40px;
+  margin: 0 0 30px;
 }
 .category-description__content > :first-child {
   margin-top: 0;

front/client/store/modules/categoryItem.ts

@@ -132,7 +132,7 @@ const actions: ActionTree<ICategoryItemState, any> = {
       original,
       modified
     })
-    dispatch('category/reloadCategory', null, { root: true })
+
     return createdDescription
   }
 }