From eeb67b5ede2193753b456bd83d98e9428ffd7c5c Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Tue, 5 Nov 2024 12:02:33 +0100
Subject: [PATCH] feat: empty grid (#529)

---
 components/ProfileView.vue                       |  4 +++-
 domains/grid/components/GridView.vue             | 16 ++++++++++++----
 domains/grid/components/GridWidgetAddContent.vue | 11 +++++++++--
 domains/grid/composables/useGrid.ts              |  9 +--------
 domains/grid/shared/config.ts                    | 10 ++++++++++
 5 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/components/ProfileView.vue b/components/ProfileView.vue
index d450b775..ca7c3228 100644
--- a/components/ProfileView.vue
+++ b/components/ProfileView.vue
@@ -158,7 +158,9 @@ watch(
   [isConnected, gridsForDisplay, ownedCollectiblesCount],
   () => {
     // select best tab based for initial display
-    selectBestTab()
+    if (gridsForDisplay.value.length === 0) {
+      selectBestTab()
+    }
   },
   { immediate: true }
 )
diff --git a/domains/grid/components/GridView.vue b/domains/grid/components/GridView.vue
index 8fc98051..a599b6fa 100644
--- a/domains/grid/components/GridView.vue
+++ b/domains/grid/components/GridView.vue
@@ -19,6 +19,7 @@ const {
   updateSelectedGrid,
   initSelectedGridId,
   getGridById,
+  gridsForTabs,
 } = useGrid()
 const gridContainer = ref<HTMLElement | null>(null)
 const { width } = useElementSize(gridContainer)
@@ -93,8 +94,15 @@ const handleResetGrid = async () => {
   const userGrid = await getUserGrid(address.value)
   const _grid = buildGrid(userGrid, isMobile.value, canEditGrid.value)
 
-  tempGrid.value = cloneObject(_grid)
-  viewedGrid.value = cloneObject(_grid)
+  // when user has no grids we re-create empty grids
+  if (gridsForTabs.value.length === 1) {
+    viewedGrid.value = cloneObject(EMPTY_GRID)
+    tempGrid.value = cloneObject(EMPTY_GRID)
+  } else {
+    tempGrid.value = cloneObject(_grid)
+    viewedGrid.value = cloneObject(_grid)
+  }
+
   gridWidgets.value = getSelectedGridWidgets(cloneObject(_grid))
   isSavingGrid.value = false
 
@@ -135,7 +143,7 @@ watch(
     const updatedViewedGrid = buildGrid(
       viewedGrid.value,
       isMobile.value,
-      canEditGrid.value
+      canEditGrid.value || gridsForTabs.value.length === 1
     )
 
     // if user is in edit mode we use temp grid, otherwise viewed grid
@@ -143,7 +151,7 @@ watch(
       const updatedTempGrid = buildGrid(
         tempGrid.value,
         isMobile.value,
-        canEditGrid.value
+        canEditGrid.value || gridsForTabs.value.length === 1
       )
       gridWidgets.value = getSelectedGridWidgets(updatedTempGrid)
       const changes = compareGrids(updatedViewedGrid, updatedTempGrid)
diff --git a/domains/grid/components/GridWidgetAddContent.vue b/domains/grid/components/GridWidgetAddContent.vue
index 9f079e4a..910293fd 100644
--- a/domains/grid/components/GridWidgetAddContent.vue
+++ b/domains/grid/components/GridWidgetAddContent.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
 const { showModal } = useModal()
 const { formatMessage } = useIntl()
+const { isEditingGrid } = storeToRefs(useGridStore())
+const { gridsForTabs } = useGrid()
 
-const handleAddContent = () => {
-  showModal<Partial<GridWidget>>({
+const handleAddContent = async () => {
+  // we enable editing mode in case user has no grids yet but see add content placeholder
+  if (gridsForTabs.value.length === 1) {
+    isEditingGrid.value = true
+  }
+
+  await showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
   })
 }
diff --git a/domains/grid/composables/useGrid.ts b/domains/grid/composables/useGrid.ts
index 5bbe233a..da598fe8 100644
--- a/domains/grid/composables/useGrid.ts
+++ b/domains/grid/composables/useGrid.ts
@@ -95,14 +95,7 @@ export const useGrid = () => {
         grid = buildGrid(userGrid, isMobile.value, withAddContentPlaceholder)
 
         if (grid.length === 0) {
-          grid = [
-            {
-              id: 'main',
-              title: 'Main',
-              grid: [],
-              gridColumns: GRID_COLUMNS_MIN,
-            },
-          ]
+          grid = cloneObject(EMPTY_GRID)
         }
 
         if (gridLog.enabled) {
diff --git a/domains/grid/shared/config.ts b/domains/grid/shared/config.ts
index 80ba0a23..631fdc01 100644
--- a/domains/grid/shared/config.ts
+++ b/domains/grid/shared/config.ts
@@ -64,3 +64,13 @@ export const DEFAULT_SMALL_COLUMN_NUMBER = 1
 // minimum and maximum number of columns in the grid
 export const GRID_COLUMNS_MIN = 2
 export const GRID_COLUMNS_MAX = 4
+
+// initial grid
+export const EMPTY_GRID = [
+  {
+    id: DEFAULT_GRID_TITLE.toLowerCase(),
+    title: DEFAULT_GRID_TITLE,
+    grid: [],
+    gridColumns: GRID_COLUMNS_MIN,
+  },
+]