From 6c3ed9a0bd6b7fa4834402908fda2bb1d64a383e Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Sat, 19 Oct 2024 13:52:55 +0200
Subject: [PATCH] Fix count

---
 components/ProfileView.vue           |  5 +++--
 domains/grid/components/GridTabs.vue | 20 +++-----------------
 domains/grid/composables/useGrid.ts  | 18 +++++++++++-------
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/components/ProfileView.vue b/components/ProfileView.vue
index 8409bd33..25b8c56b 100644
--- a/components/ProfileView.vue
+++ b/components/ProfileView.vue
@@ -7,7 +7,7 @@ const assets = computed(() => assetsData.value || [])
 const isLoadingAssets = computed(() =>
   assets.value.some(asset => asset.isLoading)
 )
-const { gridCount } = useGrid()
+const { gridsForDisplay } = useGrid()
 
 const filteredAssets = computed(() => {
   return (
@@ -87,7 +87,8 @@ const tabs = computed<ProfileViewTab[]>(() => {
   return [
     {
       id: 'grid',
-      count: gridCount.value > 1 ? gridCount.value : 0,
+      count:
+        gridsForDisplay.value.length > 1 ? gridsForDisplay.value.length : 0,
     },
     {
       id: 'collectibles',
diff --git a/domains/grid/components/GridTabs.vue b/domains/grid/components/GridTabs.vue
index d8316b2e..c81666d2 100644
--- a/domains/grid/components/GridTabs.vue
+++ b/domains/grid/components/GridTabs.vue
@@ -8,17 +8,9 @@ type GridTab = {
 const { selectedGridId, tempGrid, viewedGrid } = storeToRefs(useGridStore())
 const { formatMessage } = useIntl()
 const { showModal } = useModal()
-const { canEditGrid } = useGrid()
+const { canEditGrid, gridsForDisplay } = useGrid()
 const tabs = ref<GridTab[]>([])
 
-const grid = computed(() => {
-  if (canEditGrid.value) {
-    return tempGrid.value
-  }
-
-  return viewedGrid.value
-})
-
 // we only show tabs when user has more then one
 const hasTabs = computed(() => tabs.value.length > 1)
 
@@ -42,15 +34,9 @@ const checkMove = (event: any) => {
 watch(
   [canEditGrid, tempGrid, viewedGrid],
   () => {
-    tabs.value = grid.value
-      .filter(grid => grid.grid.length > 0)
-      .map(grid => {
-        return {
-          grid,
-        }
-      })
+    tabs.value = gridsForDisplay.value
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 </script>
 
diff --git a/domains/grid/composables/useGrid.ts b/domains/grid/composables/useGrid.ts
index 6f821365..356a8f32 100644
--- a/domains/grid/composables/useGrid.ts
+++ b/domains/grid/composables/useGrid.ts
@@ -60,12 +60,16 @@ export const useGrid = () => {
     }
   }
 
-  const gridCount = computed(() => {
-    if (canEditGrid.value) {
-      return tempGrid.value.length
-    }
-
-    return viewedGrid.value.length
+  const gridsForDisplay = computed(() => {
+    const grids = canEditGrid.value
+      ? tempGrid.value
+      : viewedGrid.value.filter(grid => grid.grid.length > 0)
+
+    return grids.map(grid => {
+      return {
+        grid,
+      }
+    })
   })
 
   return {
@@ -288,6 +292,6 @@ export const useGrid = () => {
     canEditGrid,
     initSelectedGridId,
     getGridById,
-    gridCount,
+    gridsForDisplay,
   }
 }