Support multiple grid sessions and improve tab display

app.vue

@@ -23,7 +23,7 @@ const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
 const { initProvider, reconnect } = useWalletConnectProvider()
 const { formatMessage } = useIntl()
-const { gridChainId, tempGrid } = storeToRefs(useGridStore())
+const { gridChainId, tempGrids } = storeToRefs(useGridStore())
 
 const setupTranslations = () => {
   useIntl().setupIntl(defaultConfig)
@@ -117,7 +117,7 @@ const setupNetwork = async () => {
 
     // reset temp grid layout if network is changed
     if (gridChainId.value !== selectedChainId.value) {
-      tempGrid.value = []
+      tempGrids.value = {}
     }
 
     gridChainId.value = selectedChainId.value

components/ProfileView.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
+const { gridsForTabs, gridsForDisplay, canEditGrid, initializeGrid } = useGrid()
 const { isOwned, setFilters, filters } = useFilters()
+const { isConnected } = storeToRefs(useAppStore())
 const viewedProfileAddress = getCurrentProfileAddress()
 const viewedProfile = useProfile().getProfile(viewedProfileAddress)
 const assetsData = useProfileAssets()(viewedProfileAddress)
 const assets = computed(() => assetsData.value || [])
 const isLoadingAssets = computed(() =>
   assets.value.some(asset => asset.isLoading)
 )
-const { gridsForDisplay } = useGrid()
 
 const filteredAssets = computed(() => {
   return (
@@ -84,28 +85,52 @@ const handleTabChange = (tab: ProfileViewTab) => {
 }
 
 const tabs = computed<ProfileViewTab[]>(() => {
-  return [
-    {
+  const _tabs = [] as ProfileViewTab[]
+
+  if (gridsForTabs.value.length > 0) {
+    _tabs.push({
       id: 'grid',
       count:
         gridsForDisplay.value.length > 1 ? gridsForDisplay.value.length : 0,
-    },
-    {
-      id: 'collectibles',
-      count: isOwned.value
-        ? ownedCollectiblesCount.value
-        : createdCollectiblesCount.value,
-    },
-    {
-      id: 'tokens',
-      count: isOwned.value ? ownedTokensCount.value : createdTokensCount.value,
-    },
-  ]
+    })
+  }
+
+  _tabs.push({
+    id: 'collectibles',
+    count: isOwned.value
+      ? ownedCollectiblesCount.value
+      : createdCollectiblesCount.value,
+  })
+  _tabs.push({
+    id: 'tokens',
+    count: isOwned.value ? ownedTokensCount.value : createdTokensCount.value,
+  })
+
+  return _tabs
 })
 
 const activeTab = computed(() => {
   return filters.assetGroup
 })
+
+watch(
+  [isConnected, viewedProfileAddress],
+  async () => {
+    // we initialize grid at this point so we can switch tabs if user has no grids
+    await initializeGrid(viewedProfileAddress, canEditGrid.value)
+    await nextTick()
+
+    // if user has grids we switch to grid tab, otherwise we switch to collectibles or tokens
+    if (gridsForDisplay.value.length > 0) {
+      setFilters({ assetGroup: 'grid' }, undefined, true)
+    } else if (ownedCollectiblesCount.value > 0) {
+      setFilters({ assetGroup: 'collectibles' }, undefined, true)
+    } else {
+      setFilters({ assetGroup: 'tokens' }, undefined, true)
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <template>

domains/grid/components/GridView.vue

@@ -2,7 +2,7 @@
 import { useElementSize } from '@vueuse/core'
 import { GridItem, GridLayout } from 'grid-layout-plus'
 
-const { isConnected, isMobile } = storeToRefs(useAppStore())
+const { isMobile } = storeToRefs(useAppStore())
 const {
   isEditingGrid,
   tempGrid,
@@ -12,7 +12,6 @@ const {
   selectedGridId,
 } = storeToRefs(useGridStore())
 const {
-  initializeGrid,
   saveGrid,
   canEditGrid,
   getSelectedGridWidgets,
@@ -26,14 +25,14 @@ const gridWidgets = ref<GridWidget[]>([])
 const movementX = ref(0)
 const address = computed(() => getCurrentProfileAddress())
 
-const currentGrid = computed(() => {
+const currentGrid = () => {
   // when user is editing and has unsaved changes, use temp grid
   if (canEditGrid.value && hasUnsavedGrid.value) {
     return tempGrid.value
   }
 
   return viewedGrid.value
-})
+}
 
 const gridRowHeight = computed(() => {
   const columnSpacing = GRID_SPACING_PX * (gridColumnNumber.value - 1)
@@ -47,7 +46,7 @@ const gridRowHeight = computed(() => {
 const gridColumnNumber = computed(() =>
   isMobile.value
     ? 1
-    : getGridById(currentGrid.value, selectedGridId.value)?.gridColumns ||
+    : getGridById(currentGrid(), selectedGridId.value)?.gridColumns ||
       GRID_COLUMNS_MIN
 )
 
@@ -129,7 +128,7 @@ const handleItemResized = () => {
 // - user make modifications in widgets (add/edit/remove/resize)
 // - user toggles edit mode
 watch(
-  [tempGrid, isEditingGrid, selectedGridId, isMobile],
+  [tempGrid, isEditingGrid, selectedGridId, isMobile, viewedGrid],
   () => {
     const updatedViewedGrid = buildGrid(
       viewedGrid.value,
@@ -159,18 +158,7 @@ watch(
     // re-init selected grid id when user toggles edit mode in case the selected grid was changed
     initSelectedGridId()
   },
-  { deep: true }
-)
-
-// initialize grid on initial render and when user connects/disconnects
-watch(
-  [isConnected],
-  async () => {
-    await initializeGrid(address.value, canEditGrid.value)
-    console.log('Grid initialized', getSelectedGridWidgets(currentGrid.value))
-    gridWidgets.value = getSelectedGridWidgets(currentGrid.value)
-  },
-  { immediate: true }
+  { deep: true, immediate: true }
 )
 
 onMounted(() => {

domains/grid/composables/useGrid.ts

@@ -68,6 +68,19 @@ export const useGrid = () => {
     })
   })
 
+  const gridsForTabs = computed(() => {
+    const grids =
+      isConnected.value && isConnectedUserViewingOwnProfile.value
+        ? tempGrid.value
+        : viewedGrid.value.filter(grid => grid.grid.length > 0)
+
+    return grids.map(grid => {
+      return {
+        grid,
+      }
+    })
+  })
+
   return {
     initializeGrid: async (
       address?: Address,
@@ -104,7 +117,11 @@ export const useGrid = () => {
 
       // in case we don't have a temp grid yet we initialize it
       const _initTempGrid = () => {
-        if (tempGrid.value.length === 0 && viewedGrid.value.length !== 0) {
+        if (
+          tempGrid.value.length === 0 &&
+          viewedGrid.value.length !== 0 &&
+          isConnectedUserViewingOwnProfile.value
+        ) {
           tempGrid.value = cloneObject(grid)
         }
       }
@@ -308,5 +325,6 @@ export const useGrid = () => {
     initSelectedGridId,
     getGridById,
     gridsForDisplay,
+    gridsForTabs,
   }
 }

stores/grid.ts

@@ -1,20 +1,46 @@
 export const useGridStore = defineStore(
   'grid',
   () => {
+    const { connectedProfileAddress } = storeToRefs(useAppStore())
+
     const isEditingGrid = ref(false)
     const hasUnsavedGrid = ref(false)
     const viewedGrid = ref<Grid[]>([])
-    const tempGrid = ref<Grid[]>([])
     const isSavingGrid = ref(false)
     const selectedGridId = ref<string | undefined>()
     const gridRowHeightRatio = ref(DEFAULT_GRID_ROW_HEIGHT_RATIO)
     const gridChainId = ref<string>(DEFAULT_NETWORK_CHAIN_ID)
+    const tempGrids = ref<Record<string, Grid[]>>({})
+
+    // We use tempGrid as a proxy to the actual grid data stored in tempGrids
+    const tempGrid = computed<Grid[]>({
+      get: () => {
+        if (!connectedProfileAddress.value) {
+          return []
+        }
+
+        return (
+          tempGrids.value[connectedProfileAddress.value.toLowerCase()] || []
+        )
+      },
+      set: value => {
+        if (!connectedProfileAddress.value) {
+          return
+        }
+
+        tempGrids.value = {
+          ...tempGrids.value,
+          [connectedProfileAddress.value.toLowerCase()]: value,
+        }
+      },
+    })
 
     return {
       isEditingGrid,
       hasUnsavedGrid,
       viewedGrid,
       tempGrid,
+      tempGrids,
       isSavingGrid,
       selectedGridId,
       gridRowHeightRatio,
@@ -29,7 +55,7 @@ export const useGridStore = defineStore(
         'selectedGridId',
         'gridRowHeightRatio',
         'gridChainId',
-        'tempGrid',
+        'tempGrids',
       ],
       key: STORAGE_KEY.GRID_STORE,
     },