fix: widget clone issue (#516)

lukso-network · Oct 30, 2024 · 5629cf3 · 5629cf3
1 parent da7e3a8
commit 5629cf3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 33 deletions.
diff --git a/domains/grid/components/GridFloatingMenu.vue b/domains/grid/components/GridFloatingMenu.vue
@@ -13,7 +13,8 @@ const BOTTOM_MARGIN_MOBILE_PX = 16
 const emits = defineEmits<Emits>()
 const { isEditingGrid, hasUnsavedGrid, isSavingGrid } =
   storeToRefs(useGridStore())
-const { isConnected, isMobile } = storeToRefs(useAppStore())
+const { isConnected, isMobile, isViewingOwnProfile } =
+  storeToRefs(useAppStore())
 const { formatMessage } = useIntl()
 const { showModal } = useModal()
 const bottom = ref(
@@ -137,7 +138,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    v-if="isConnected"
+    v-if="isConnected && isViewingOwnProfile"
     class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)]"
     :class="{
       'h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]': isEditingGrid,

diff --git a/domains/grid/components/GridWidget.vue b/domains/grid/components/GridWidget.vue
@@ -13,9 +13,10 @@ const widgetComponent = shallowRef<Component | undefined>()
 const { canEditGrid, addGridWidget, getGridById } = useGrid()
 const { formatMessage } = useIntl()
 const { showModal } = useModal()
-const { isConnected, isMobile, isConnectedUserViewingOwnProfile } =
+const { isConnected, isMobile, isViewingOwnProfile, connectedProfileAddress } =
   storeToRefs(useAppStore())
-const { isEditingGrid, tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const { isEditingGrid, tempGrid, selectedGridId, tempGrids } =
+  storeToRefs(useGridStore())
 const { connect } = useBaseProvider()
 const { browserSupportExtension } = useBrowser()
 const dropdownId = `dropdown-${generateItemId()}`
@@ -32,7 +33,7 @@ const isAddContentWidget = computed(
 )
 
 const isAllowToClone = computed(
-  () => isEditingGrid.value || !isConnectedUserViewingOwnProfile.value
+  () => isEditingGrid.value || !isViewingOwnProfile.value
 )
 
 const src = computedAsync(async () => {
@@ -129,20 +130,44 @@ const handleClone = async () => {
     await connect()
   }
 
+  const _connectedProfileAddress =
+    connectedProfileAddress.value?.toLowerCase() as Address
   const clonedWidget = createWidgetObject({
     type: props.widget.type,
     properties: props.widget.properties,
     w: props.widget.w,
     h: props.widget.h,
   })
-  addGridWidget(clonedWidget, getGridById(tempGrid.value, selectedGridId.value))
   isEditingGrid.value = true // we enable edit mode so user is aware about unsaved state
 
-  if (!isConnectedUserViewingOwnProfile.value) {
-    showModal({
-      template: 'GridWidgetCloned',
-    })
+  // in case we are on own profile we do simply widget copy
+  if (isViewingOwnProfile.value) {
+    addGridWidget(
+      clonedWidget,
+      getGridById(tempGrid.value, selectedGridId.value)
+    )
+    return
+  }
+
+  // re-create temp grid if missing
+  if (!tempGrids.value[_connectedProfileAddress]) {
+    const userGrid = await getUserGrid(_connectedProfileAddress)
+    tempGrids.value[_connectedProfileAddress] = buildGrid(
+      userGrid,
+      isMobile.value
+    )
   }
+
+  addGridWidget(
+    clonedWidget,
+    getGridById(
+      tempGrids.value[_connectedProfileAddress],
+      tempGrids.value[_connectedProfileAddress][0].id
+    )
+  )
+  showModal({
+    template: 'GridWidgetCloned',
+  })
 }
 
 const handleDropdownChange = (
@@ -239,7 +264,7 @@ onMounted(() => {
           "
         >
           <lukso-icon name="copy" size="small"></lukso-icon>
-          <span v-if="isConnectedUserViewingOwnProfile">
+          <span v-if="isViewingOwnProfile">
             {{ formatMessage('grid_widget_menu_clone') }}
           </span>
           <span v-else>

diff --git a/domains/grid/components/__tests__/GridFloatingMenu.spec.ts b/domains/grid/components/__tests__/GridFloatingMenu.spec.ts
@@ -3,6 +3,10 @@ import { createTestingPinia } from '@pinia/testing'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import GridFloatingMenu from '../GridFloatingMenu.vue'
 
+vi.mock('/utils/getCurrentProfileAddress', () => ({
+  getCurrentProfileAddress: () => '0xcafebabe',
+}))
+
 describe('GridFloatingMenu', () => {
   beforeEach(() => {
     useIntl().setupIntl(defaultConfig)

diff --git a/domains/grid/composables/useGrid.ts b/domains/grid/composables/useGrid.ts
@@ -2,7 +2,7 @@ export const useGrid = () => {
   const {
     isConnected,
     connectedProfileAddress,
-    isConnectedUserViewingOwnProfile,
+    isViewingOwnProfile,
     isMobile,
   } = storeToRefs(useAppStore())
   const {
@@ -15,10 +15,7 @@ export const useGrid = () => {
   } = storeToRefs(useGridStore())
 
   const canEditGrid = computed(
-    () =>
-      isEditingGrid.value &&
-      isConnected.value &&
-      isConnectedUserViewingOwnProfile.value
+    () => isEditingGrid.value && isConnected.value && isViewingOwnProfile.value
   )
 
   const getGridById = (grid: Grid[], id?: string) =>
@@ -70,7 +67,7 @@ export const useGrid = () => {
 
   const gridsForTabs = computed(() => {
     const grids =
-      isConnected.value && isConnectedUserViewingOwnProfile.value
+      isConnected.value && isViewingOwnProfile.value
         ? tempGrid.value
         : viewedGrid.value.filter(grid => grid.grid.length > 0)
 
@@ -120,7 +117,7 @@ export const useGrid = () => {
         if (
           tempGrid.value.length === 0 &&
           viewedGrid.value.length !== 0 &&
-          isConnectedUserViewingOwnProfile.value
+          isViewingOwnProfile.value
         ) {
           tempGrid.value = cloneObject(grid)
         }
@@ -150,8 +147,8 @@ export const useGrid = () => {
     },
 
     addGridWidget: (widget: GridWidgetWithoutCords, grid?: Grid) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -168,8 +165,8 @@ export const useGrid = () => {
     },
 
     updateGridWidget: (id?: string, widget?: Partial<GridWidget>) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -199,8 +196,8 @@ export const useGrid = () => {
     },
 
     removeGridWidget: (id: string | number) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -272,17 +269,17 @@ export const useGrid = () => {
     },
 
     addGrid: (grid: Grid) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
       tempGrid.value.push(grid)
     },
 
     updateGrid: (id?: string, grid?: Partial<Grid>) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -312,8 +309,8 @@ export const useGrid = () => {
     },
 
     removeGrid: (id: string) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 

diff --git a/stores/app.ts b/stores/app.ts
@@ -108,7 +108,7 @@ export const useAppStore = defineStore(
 
     const isWalletConnect = computed(() => !!walletConnectSession.value)
 
-    const isConnectedUserViewingOwnProfile = computed(() => {
+    const isViewingOwnProfile = computed(() => {
       const viewedProfileAddress = computed(() => getCurrentProfileAddress())
 
       return (
@@ -119,7 +119,7 @@ export const useAppStore = defineStore(
     })
 
     const isViewedProfileConnected = computed(() => {
-      return isConnected.value && isConnectedUserViewingOwnProfile.value
+      return isConnected.value && isViewingOwnProfile.value
     })
 
     // --- actions
@@ -153,7 +153,7 @@ export const useAppStore = defineStore(
       walletConnectProvider,
       isWalletConnect,
       walletConnectSession,
-      isConnectedUserViewingOwnProfile,
+      isViewingOwnProfile,
       isViewedProfileConnected,
     }
   },