move computed-props to methods - refactor mountItem to use the states inside (#10853)

website/client/components/inventory/stable/index.vue

@@ -112,10 +112,8 @@
         .pet-group(v-for='item in group')
           mountItem(
             :item="item",
-            :itemContentClass="isOwned('mount', item) ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
             :key="item.key",
             :popoverPosition="'top'",
-            :emptyItem="!isOwned('mount', item)",
             :showPopover="true",
             @click="selectMount(item)"
           )

website/client/components/inventory/stable/mountItem.vue

@@ -2,10 +2,10 @@
 div
   .item-wrapper(@click="click()", :id="itemId")
     .item.pet-slot(
-      :class="{'item-empty': emptyItem}",
+      :class="{'item-empty': !isOwned()}",
     )
       slot(name="itemBadge", :item="item")
-      span.item-content(:class="itemContentClass")
+      span.item-content(:class="itemClass()")
   b-popover(
     :target="itemId",
     v-if="showPopover",
@@ -17,19 +17,14 @@ div
 
 <script>
   import uuid from 'uuid';
+  import { mapState } from 'client/libs/store';
+  import {isOwned} from '../../../libs/createAnimal';
 
   export default {
     props: {
       item: {
         type: Object,
       },
-      itemContentClass: {
-        type: String,
-      },
-      emptyItem: {
-        type: Boolean,
-        default: false,
-      },
       popoverPosition: {
         type: String,
         default: 'bottom',
@@ -44,10 +39,21 @@ div
         itemId: uuid.v4(),
       });
     },
+    computed: {
+      ...mapState({
+        userItems: 'user.data.items',
+      }),
+    },
     methods: {
       click () {
         this.$emit('click', {});
       },
+      isOwned () {
+        return isOwned('mount', this.item, this.userItems);
+      },
+      itemClass () {
+        return this.isOwned() ? `Mount_Icon_${this.item.key}` : 'PixelPaw GreyedOut';
+      },
     },
   };
 </script>

website/client/components/inventory/stable/petItem.vue

@@ -5,12 +5,13 @@ div
       :class="{'item-empty': !isOwned(), 'highlight': highlightBorder}",
     )
       slot(name="itemBadge", :item="item")
-      span.item-content.hatchAgain(v-if="mountOwned && isHatchable")
+      span.item-content.hatchAgain(v-if="mountOwned() && isHatchable()")
         span.egg(:class="eggClass")
         span.potion(:class="potionClass")
       span.item-content(v-else, :class="getPetItemClass()")
-      span.pet-progress-background(v-if="isAllowedToFeed() && progress > 0")
-        div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
+      span.pet-progress-background(v-if="isAllowedToFeed() && progress() > 0")
+        | {{ progress() }}
+        div.pet-progress-bar(v-bind:style="{width: 100 * progress()/50 + '%' }")
     span.item-label(v-if="label") {{ label }}
 
   b-popover(
@@ -112,21 +113,32 @@ div
         return isAllowedToFeed(this.item, this.userItems);
       },
       getPetItemClass () {
-        if (this.isOwned() || this.mountOwned && this.isHatchable) {
+        if (this.isOwned() || this.mountOwned() && this.isHatchable()) {
           return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
         }
 
-        if (this.isHatchable) {
+        if (this.isHatchable()) {
           return 'PixelPaw';
         }
 
-        if (this.mountOwned) {
+        if (this.mountOwned()) {
           return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
         }
 
         // Can't hatch
         return 'GreyedOut PixelPaw';
       },
+      progress () {
+        return this.userItems.pets[this.item.key];
+      },
+      // due to some state-refresh issues these methods are needed,
+      // the computed-properties just didn't refresh on each state-change
+      isHatchable () {
+        return isHatchable(this.item, this.userItems);
+      },
+      mountOwned () {
+        return isOwned('mount', this.item, this.userItems);
+      },
     },
     computed: {
       ...mapState({
@@ -138,15 +150,6 @@ div
       eggClass () {
         return `Pet_Egg_${this.item.eggKey}`;
       },
-      isHatchable () {
-        return isHatchable(this.item, this.userItems);
-      },
-      mountOwned () {
-        return isOwned('mount', this.item, this.userItems);
-      },
-      progress () {
-        return this.userItems.pets[this.item.key];
-      },
     },
   };
 </script>