fix: Remove minted out collection from landing

components/carousel/CarouselTypeDrops.vue

@@ -6,13 +6,15 @@
         :key="dropsAlias.join('-')"
         v-slot="{ item }"
         :items="drops"
-        :config="config">
+        :config="config"
+      >
         <DropsDropCard :drop="item" />
       </CarouselModuleCarouselAgnostic>
       <CarouselModuleCarouselAgnostic
         v-else
         :items="Array(skeletonCount).fill({ id: 'drop-skeleton' })"
-        :config="config">
+        :config="config"
+      >
         <DropsDropCardSkeleton />
       </CarouselModuleCarouselAgnostic>
     </template>
@@ -23,7 +25,7 @@
 import { useDrops } from '@/components/drops/useDrops'
 
 let queries = {
-  limit: 12,
+  limit: 14,
   active: [true],
   chain: ['ahp'],
 }
@@ -50,6 +52,6 @@ const skeletonCount = computed(() =>
   Number.isInteger(perView.value) ? perView.value : Math.ceil(perView.value),
 )
 
-const { drops, loaded: isReady } = useDrops(queries)
-const dropsAlias = computed(() => drops.value.map((drop) => drop.alias))
+const { drops, loaded: isReady } = useDrops(queries, { filterOutMinted: true })
+const dropsAlias = computed(() => drops.value.map(drop => drop.alias))
 </script>

components/drops/useDrops.ts

@@ -1,15 +1,16 @@
-import { GetDropsQuery, getDropById, getDrops } from '@/services/fxart'
+import orderBy from 'lodash/orderBy'
+import type { Prefix } from '@kodadot1/static'
+import type { WritableComputedRef } from 'nuxt/dist/app/compat/capi'
+import { parseCETDate } from './utils'
+import type { GetDropsQuery } from '@/services/fxart'
+import { getDropById, getDrops } from '@/services/fxart'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
 import collectionByIdMinimal from '@/queries/subsquid/general/collectionByIdMinimal.graphql'
 import { chainPropListOf } from '@/utils/config/chain.config'
-import { DropItem } from '@/params/types'
-import orderBy from 'lodash/orderBy'
-import type { Prefix } from '@kodadot1/static'
+import type { DropItem } from '@/params/types'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
 import { useDropStore } from '@/stores/drop'
 import { getChainName } from '@/utils/chain'
-import { WritableComputedRef } from 'nuxt/dist/app/compat/capi'
-import { parseCETDate } from './utils'
 
 export interface Drop {
   collection: DropItem
@@ -48,28 +49,27 @@ const DROP_LIST_ORDER = [
 
 const ONE_DAYH_IN_MS = 24 * 60 * 60 * 1000
 
-export function useDrops(query?: GetDropsQuery) {
+export function useDrops(query?: GetDropsQuery, config?: { filterOutMinted?: boolean }) {
   const drops = ref<Drop[]>([])
   const dropsList = ref<DropItem[]>([])
+  const { filterOutMinted } = config || {}
   const count = computed(() => dropsList.value.length)
   const loaded = ref(false)
 
   onBeforeMount(async () => {
     dropsList.value = await getDrops(query)
 
-    const formattedDrops = await Promise.all(
-      dropsList.value.map(async (drop) => getFormattedDropItem(drop, drop)),
-    )
-
-    drops.value = formattedDrops
+    drops.value = await Promise.all(
+      dropsList.value.map(async drop => getFormattedDropItem(drop, drop)),
+    ).then(dropsList => filterOutMinted ? dropsList.filter(drop => !drop.isMintedOut) : dropsList)
 
     loaded.value = true
   })
 
   const sortDrops = computed(() =>
     orderBy(
       drops.value,
-      [(drop) => DROP_LIST_ORDER.indexOf(drop.status)],
+      [drop => DROP_LIST_ORDER.indexOf(drop.status)],
       ['asc'],
     ),
   )
@@ -154,7 +154,7 @@ export function useDrop(alias?: string) {
 
   const drop = computed({
     get: () => dropStore.drop,
-    set: (value) => dropStore.setDrop(value),
+    set: value => dropStore.setDrop(value),
   })
 
   const chainName = computed(() => getChainName(drop.value?.chain ?? 'ahp'))
@@ -195,8 +195,8 @@ export const fetchDropMintedCount = async (
 }
 
 const subscribeDropMintedCount = (
-  { drop, account }: { drop: Pick<DropItem, 'collection'>; account: string },
-  onChange: (params: { collection?: number; user?: number }) => void,
+  { drop, account }: { drop: Pick<DropItem, 'collection'>, account: string },
+  onChange: (params: { collection?: number, user?: number }) => void,
 ) => {
   return useSubscriptionGraphql({
     query: `
@@ -217,7 +217,7 @@ const subscribeDropMintedCount = (
 }
 
 export const useDropStatus = (
-  drop: WritableComputedRef<{ collection: string; chain: Prefix }>,
+  drop: WritableComputedRef<{ collection: string, chain: Prefix }>,
 ) => {
   const { mintsCount, userMintsCount } = storeToRefs(useDropStore())
   const { accountId } = useAuth()
@@ -227,17 +227,17 @@ export const useDropStatus = (
     account: string | undefined
     unsubscribe: () => void
   }>({
-    account: undefined,
-    collection: undefined,
-    unsubscribe: () => {},
-  })
+        account: undefined,
+        collection: undefined,
+        unsubscribe: () => {},
+      })
 
   const subscribeDropStatus = () => {
     watch([() => drop.value, accountId], ([drop, account]) => {
       if (drop) {
         if (
-          drop.collection !== dropStatusSubscription.value.collection ||
-          account !== dropStatusSubscription.value.account
+          drop.collection !== dropStatusSubscription.value.collection
+          || account !== dropStatusSubscription.value.account
         ) {
           dropStatusSubscription.value.unsubscribe?.()
         }
@@ -270,8 +270,8 @@ export const useDropMinimumFunds = (amount = ref(1)) => {
     chainPropListOf(drop.value?.chain ?? 'ahp'),
   )
   const { existentialDeposit } = useChain()
-  const { fetchMultipleBalance, transferableCurrentChainBalance } =
-    useMultipleBalance()
+  const { fetchMultipleBalance, transferableCurrentChainBalance }
+    = useMultipleBalance()
 
   const meta = computed<number>(() => Number(drop.value?.meta) || 0)
   const price = computed<number>(() => Number(drop.value?.price) || 0)
@@ -280,8 +280,8 @@ export const useDropMinimumFunds = (amount = ref(1)) => {
   )
   const hasMinimumFunds = computed(
     () =>
-      !minimumFunds.value ||
-      (transferableCurrentChainBalance.value ?? 0) >= minimumFunds.value,
+      !minimumFunds.value
+      || (transferableCurrentChainBalance.value ?? 0) >= minimumFunds.value,
   )
   const tokenDecimals = computed(() => chainProperties.value.tokenDecimals)
   const tokenSymbol = computed(() => chainProperties.value.tokenSymbol)
@@ -318,11 +318,13 @@ const convertCollectionIdToMagicId = (id: string) => {
   let constructedNumber
   if (hexId.length === 2) {
     constructedNumber = hexId.padEnd(4, '00')
-  } else if (hexId.length === 3) {
+  }
+  else if (hexId.length === 3) {
     const firstDigit = hexId.substring(0, 1)
-    constructedNumber =
-      hexId.padEnd(4, '0').split('').splice(1, 3).join('') + firstDigit
-  } else if (hexId.length === 4) {
+    constructedNumber
+      = hexId.padEnd(4, '0').split('').splice(1, 3).join('') + firstDigit
+  }
+  else if (hexId.length === 4) {
     constructedNumber = hexId.substring(2) + hexId.substring(0, 2)
   }
   return `0x00${constructedNumber}0000`
@@ -360,18 +362,18 @@ export const useRelatedActiveDrop = (collectionId: string, chain: Prefix) => {
 
   const relatedActiveDrop = computed(() =>
     drops.value.find(
-      (drop) =>
-        drop?.collection.collection === collectionId &&
-        !drop.disabled &&
-        drop.status === DropStatus.MINTING_LIVE,
+      drop =>
+        drop?.collection.collection === collectionId
+        && !drop.disabled
+        && drop.status === DropStatus.MINTING_LIVE,
     ),
   )
 
   const relatedEndedDrop = computed(() =>
     drops.value.find(
-      (drop) =>
-        drop?.collection.collection === collectionId &&
-        drop.status === DropStatus.MINTING_ENDED,
+      drop =>
+        drop?.collection.collection === collectionId
+        && drop.status === DropStatus.MINTING_ENDED,
     ),
   )