Fix count

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',

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>
 

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,
   }
 }