Refactor TaxaInfo component

src/modules/otus/components/CommonNames.vue

@@ -3,37 +3,12 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
-import TaxonWorks from '../services/TaxonWorks'
+import { computed } from 'vue'
+import { useOtuStore } from '../store/store'
 
-const props = defineProps({
-  otuId: {
-    type: Number,
-    default: undefined
-  }
-})
+const store = useOtuStore()
 
-const commonNames = ref([])
 const commonNameLabel = computed(() =>
-  commonNames.value.map((item) => item.name).join('; ')
-)
-
-watch(
-  () => props.otuId,
-  (id) => {
-    if (id) {
-      TaxonWorks.getTaxonomy(id, {
-        max_descendants_depth: 0,
-        extend: ['common_names']
-      }).then(({ data }) => {
-        commonNames.value = data.common_names
-      })
-    } else {
-      commonNames.value = []
-    }
-  },
-  {
-    immediate: true
-  }
+  store.taxonomy.commonNames.map((item) => item.name).join('; ')
 )
 </script>

src/modules/otus/components/TaxaInfo.vue

@@ -1,47 +1,32 @@
 <template>
-  <div :class="{ invisible: !taxon.id }">
+  <div>
     <h2 class="text-1xl capitalize">
-      {{ taxon.rank || 'Combination' }}
+      {{ store.taxon.rank || 'Combination' }}
     </h2>
     <h1 class="text-xl dark:text-gray-100">
       <span>
         <span
-          :title="taxon.short_status"
-          v-html="taxon.full_name_tag"
+          :title="store.taxon.short_status"
+          v-html="store.taxon.full_name_tag"
         />
         <span
-          v-if="!taxon.is_valid"
-          class="ml-1"
-          :class="statusStyle"
+          v-if="!store.taxon.is_valid"
+          class="ml-1 text-red-600"
           title="Invalid"
-          v-html="status"
-        />
+        >
+          &#10005;
+        </span>
       </span>
     </h1>
     <h2 class="text-1xl">
-      <CommonNames :otu-id="props.otuId" />
+      <CommonNames />
     </h2>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { useOtuStore } from '../store/store'
 import CommonNames from './CommonNames.vue'
 
-const props = defineProps({
-  taxon: {
-    type: Object,
-    default: () => ({})
-  },
-
-  otuId: {
-    type: Number,
-    default: undefined
-  }
-})
-
-const status = computed(() => (props.taxon.cached_is_valid ? '' : '&#10005;'))
-const statusStyle = computed(() =>
-  props.taxon.cached_is_valid ? '' : 'text-red-600'
-)
+const store = useOtuStore()
 </script>

src/modules/otus/store/actions/loadDistribution.js

@@ -7,7 +7,7 @@ import TaxonWorks from '../../services/TaxonWorks'
 
 export const actionLoadDistribution = {
   async loadDistribution({ otuId, rankString }) {
-    const isSpeciesGroup = isRankGrpup('SpeciesGroup', rankString)
+    const isSpeciesGroup = rankString && isRankGrpup('SpeciesGroup', rankString)
 
     const getAggregateShape = async (otuId) => {
       TaxonWorks.getOtuDistribution(otuId)

src/modules/otus/views/Index.vue

@@ -29,11 +29,7 @@
             :lines="2"
             class="w-96"
           >
-            <TaxaInfo
-              v-if="isReady"
-              :taxon="taxon"
-              :otu-id="otu.id"
-            />
+            <TaxaInfo v-if="isReady" />
           </VSkeleton>
           <div>
             <DWCDownload