diff --git a/app.vue b/app.vue
index d19d60dc..ef3f5a6d 100644
--- a/app.vue
+++ b/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
diff --git a/components/ProfileView.vue b/components/ProfileView.vue
index 25b8c56b..21441e1f 100644
--- a/components/ProfileView.vue
+++ b/components/ProfileView.vue
@@ -1,5 +1,7 @@
diff --git a/domains/grid/components/GridView.vue b/domains/grid/components/GridView.vue
index c3646505..6b89f030 100644
--- a/domains/grid/components/GridView.vue
+++ b/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([])
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(() => {
diff --git a/domains/grid/composables/useGrid.ts b/domains/grid/composables/useGrid.ts
index 1b203995..d9680644 100644
--- a/domains/grid/composables/useGrid.ts
+++ b/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,
}
}
diff --git a/stores/grid.ts b/stores/grid.ts
index c2caac66..08bf90b5 100644
--- a/stores/grid.ts
+++ b/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([])
- const tempGrid = ref([])
const isSavingGrid = ref(false)
const selectedGridId = ref()
const gridRowHeightRatio = ref(DEFAULT_GRID_ROW_HEIGHT_RATIO)
const gridChainId = ref(DEFAULT_NETWORK_CHAIN_ID)
+ const tempGrids = ref>({})
+
+ // We use tempGrid as a proxy to the actual grid data stored in tempGrids
+ const tempGrid = computed({
+ 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,
},