feat: Price sort by logic

components/explore/ExploreSort.vue

@@ -71,26 +71,6 @@ const { $i18n } = useNuxtApp()
 const { hasItems: isItems } = useHasRoute()
 const { options } = useRouteSortByOptions()
 
-function removeDuplicateSortKeys(options: string[]) {
-  const uniqueOptions = {}
-
-  if (!Array.isArray(options)) {
-    return []
-  }
-
-  options.forEach((option) => {
-    const opt = option.split('_')
-    const identifier = opt[0]
-    const sort = opt[1]
-
-    uniqueOptions[identifier] = sort
-  })
-
-  return Object.keys(uniqueOptions).map((identifier) => {
-    return `${identifier}_${uniqueOptions[identifier]}`
-  })
-}
-
 const sortOptions = ref<string[]>([])
 const selectedSort = computed({
   get: () => sortOptions.value,

components/items/ItemsGrid/useItemsGrid.ts

@@ -140,24 +140,6 @@ export function useFetchSearch({
       ]),
     }
 
-    const isPriceSortActive = (sort?: string | null | (string | null)[]) => {
-      if (!sort) {
-        return false
-      }
-      const sortArray = Array.isArray(sort) ? sort : [sort]
-      return sortArray.some(sortBy => (sortBy ?? '').includes('price'))
-    }
-    watch(
-      () => route.query.sort,
-      (newSort, oldSort) => {
-        const priceSortHasBeenActivated
-          = isPriceSortActive(newSort) && !isPriceSortActive(oldSort)
-        if (priceSortHasBeenActivated && route.query.listed !== 'true') {
-          route.query.listed = 'true'
-        }
-      },
-    )
-
     const searchForToken = getSearchCriteria(
       search?.length ? search : searchParams.value,
     )

components/profile/OrderByDropdown.vue

@@ -100,26 +100,6 @@ const options = computed(() => {
     : NFT_SQUID_SORT_CONDITION_LIST
 })
 
-function removeDuplicateSortKeys(options: string[]) {
-  const uniqueOptions = {}
-
-  if (!Array.isArray(options)) {
-    return []
-  }
-
-  options.forEach((option) => {
-    const opt = option.split('_')
-    const identifier = opt[0]
-    const sort = opt[1]
-
-    uniqueOptions[identifier] = sort
-  })
-
-  return Object.keys(uniqueOptions).map((identifier) => {
-    return `${identifier}_${uniqueOptions[identifier]}`
-  })
-}
-
 const sortOptions = ref<string[]>([])
 const selectedSort = computed({
   get: () => sortOptions.value,

components/search/Search.vue

@@ -161,12 +161,6 @@ const updateSortBy = useDebounceFn((value: string[] | string) => {
   const final = (Array.isArray(value) ? value : [value]).filter(condition =>
     sortByOptions.value.includes(condition),
   )
-  const listed = final.some(
-    condition => condition.toLowerCase().indexOf('price') > -1,
-  )
-  if (listed && !vListed.value) {
-    vListed.value = true
-  }
 
   replaceUrl({ sort: final })
 

locales/de.json

@@ -622,7 +622,6 @@
     "BLOCK_NUMBER_ASC": "Älteste",
     "BLOCK_NUMBER_DESC": "Kürzlich erstellt",
     "EMOTES_COUNT_DESC": "Meiste Reaktionen",
-    "PRICE_ASC": "Presi: Niedrig zu Hoch",
     "PRICE_DESC": "Preis: Hoch zu Niedrig",
     "SN_ASC": "Alphabetisch",
     "UPDATED_AT_ASC": "Unpopulär",
@@ -633,23 +632,22 @@
       "BLOCK_NUMBER_ASC": "Älteste",
       "BLOCK_NUMBER_DESC": "Kürzlich erstellt",
       "EMOTES_COUNT_DESC": "Meiste Reaktionen",
-      "PRICE_ASC": "Preis: Niedrig zu Hoch",
       "PRICE_DESC": "Preis: Hoch zu Niedrig",
       "SN_ASC": "Alphabetisch",
       "UPDATED_AT_ASC": "Unpopulär",
       "UPDATED_AT_DESC": "Kürzlich interagiert",
       "blockNumber_ASC": "Ältere zuerst",
       "blockNumber_DESC": "Neue zuerst",
       "listed": "Jetzt kaufen",
-      "price_ASC": "Preis: Niedrig zu Hoch",
+      "price_ASC_NULLS_LAST": "Preis: Niedrig zu Hoch",
       "price_DESC": "Preis: Hoch zu Niedrig",
       "sn_ASC": "Alphabetisch",
       "updatedAt_ASC": "Unpopulär",
       "updatedAt_DESC": "Kürzlich interagiert"
     },
     "listed": "Jetzt kaufen",
     "own": "Eigene",
-    "price_ASC": "Preis: Niedrig zu Hoch",
+    "price_ASC_NULLS_LAST": "Preis: Niedrig zu Hoch",
     "price_DESC": "Preis: Hoch zu Niedrig",
     "sn_ASC": "Alphabetisch",
     "updatedAt_ASC": "Unpopulär",

locales/en.json

@@ -1751,7 +1751,7 @@
       "blockNumber_ASC": "Oldest",
       "blockNumber_DESC": "Newest",
       "highestSale_DESC": "Highest Sale",
-      "price_ASC": "Price: Low to High",
+      "price_ASC_NULLS_LAST": "Price: Low to High",
       "price_DESC": "Price: High to Low",
       "sn_ASC": "Serial (Low→High)",
       "sn_DESC": "Serial (High→Low)",
@@ -1766,7 +1766,7 @@
     "listed": "Listed for sale",
     "listed_RMRK": "Listed",
     "own": "Own",
-    "price_ASC": "Price: Low to High",
+    "price_ASC_NULLS_LAST": "Price: Low to High",
     "price_DESC": "Price: High to Low",
     "sn_ASC": "Serial (Low→High)",
     "sn_DESC": "Serial (High→Low)",

locales/es.json

@@ -587,7 +587,6 @@
     "BLOCK_NUMBER_ASC": "El más antiguo",
     "BLOCK_NUMBER_DESC": "Recién creado",
     "EMOTES_COUNT_DESC": "El mas reaccionado",
-    "PRICE_ASC": "Precio: de menor a mayor",
     "PRICE_DESC": "Precio: de mayor a menor",
     "SN_ASC": "Alfabéticamente",
     "UPDATED_AT_ASC": "Impopular",
@@ -598,23 +597,22 @@
       "BLOCK_NUMBER_ASC": "El más antiguo",
       "BLOCK_NUMBER_DESC": "Recién creado",
       "EMOTES_COUNT_DESC": "El mas reaccionado",
-      "PRICE_ASC": "Precio: de menor a mayor",
       "PRICE_DESC": "Precio: de mayor a menor",
       "SN_ASC": "Alfabéticamente",
       "UPDATED_AT_ASC": "Impopular",
       "UPDATED_AT_DESC": "Interactuado recientemente",
       "blockNumber_ASC": "Antiguo primero",
       "blockNumber_DESC": "Nuevo primero",
       "listed": "Compre ahora",
-      "price_ASC": "Precio: de menor a mayor",
+      "price_ASC_NULLS_LAST": "Precio: de menor a mayor",
       "price_DESC": "Precio: de mayor a menor",
       "sn_ASC": "Alfabéticamente",
       "updatedAt_ASC": "Impopular",
       "updatedAt_DESC": "Interactuado recientemente"
     },
     "listed": "Compre ahora",
     "own": "En posesión",
-    "price_ASC": "Precio: de menor a mayor",
+    "price_ASC_NULLS_LAST": "Precio: de menor a mayor",
     "price_DESC": "Precio: de mayor a menor",
     "sn_ASC": "Alfabéticamente",
     "updatedAt_ASC": "Impopular",

locales/fr.json

@@ -292,7 +292,7 @@
       "blockNumber_ASC": "Ancien",
       "blockNumber_DESC": "Nouveau",
       "listed": "En vente",
-      "price_ASC": "Prix : du plus bas au plus haut",
+      "price_ASC_NULLS_LAST": "Prix : du plus bas au plus haut",
       "price_DESC": "Prix : du plus haut au plus bas",
       "sn_ASC": "Alphabétiquement",
       "sortBy": "Trier par",
@@ -303,7 +303,7 @@
     },
     "listed": "En vente",
     "own": "Possédé",
-    "price_ASC": "Prix : du plus bas au plus haut",
+    "price_ASC_NULLS_LAST": "Prix : du plus bas au plus haut",
     "price_DESC": "Prix : du plus haut au plus bas",
     "sn_ASC": "Alphabétiquement",
     "updatedAt_ASC": "Peu populaire",

locales/hi.json

@@ -1328,7 +1328,7 @@
       "blockNumber_DESC": "नवीनतम",
       "highestSale_DESC": "सबसे अधिक बिक्री",
       "listed": "अब खरीदें",
-      "price_ASC": "मूल्य: कम से उच्च",
+      "price_ASC_NULLS_LAST": "मूल्य: कम से उच्च",
       "price_DESC": "मूल्य: उच्च से कम",
       "sn_ASC": "वर्णमाला के अनुसार",
       "sortBy": "क्रमबद्ध करें द्वारा",
@@ -1341,7 +1341,7 @@
     "instance_ASC": "क्रम",
     "listed": "अभी खरीदें",
     "own": "अपना",
-    "price_ASC": "मूल्य: कम से उच्च",
+    "price_ASC_NULLS_LAST": "मूल्य: कम से उच्च",
     "price_DESC": "मूल्य: उच्च से कम",
     "sn_ASC": "वर्णक्रमानुसार",
     "updatedAt_ASC": "अप्रसार्पित",

locales/id.json

@@ -397,11 +397,11 @@
   "sort": {
     "BLOCK_NUMBER_ASC": "Urutan Akhir",
     "BLOCK_NUMBER_DESC": "Urutan Pertama",
-    "PRICE_ASC": "Harga Rendah Ke Tinggi",
     "PRICE_DESC": "Harga Tinggi Ke Rendah",
     "UPDATED_AT_ASC": "Aktifitas Terakhir",
     "UPDATED_AT_DESC": "Aktifitas Terbaru",
-    "listed": "Beli Sekarang"
+    "listed": "Beli Sekarang",
+    "price_ASC_NULLS_LAST": "Harga Rendah Ke Tinggi"
   },
   "spotlight": {
     "averagePrice": "Ø Harga",

locales/pt.json

@@ -560,7 +560,6 @@
     "BLOCK_NUMBER_ASC": "O mais antigo",
     "BLOCK_NUMBER_DESC": "Criado recentemente",
     "EMOTES_COUNT_DESC": "O Mais reagido",
-    "PRICE_ASC": "Preço: Menor para Maior",
     "PRICE_DESC": "Preço: Maior para Menor",
     "SN_ASC": "Alfabeticamente",
     "UPDATED_AT_ASC": "Impopular",
@@ -571,23 +570,22 @@
       "BLOCK_NUMBER_ASC": "O mais antigo",
       "BLOCK_NUMBER_DESC": "Criado recentemente",
       "EMOTES_COUNT_DESC": "O Mais reagido",
-      "PRICE_ASC": "Preço: Menor para Maior",
       "PRICE_DESC": "Preço: Maior para Menor",
       "SN_ASC": "Alfabeticamente",
       "UPDATED_AT_ASC": "Impopular",
       "UPDATED_AT_DESC": "Interagido recentemente",
       "blockNumber_ASC": "Antigo primeiro",
       "blockNumber_DESC": "Novo primeiro",
       "listed": "Compre agora",
-      "price_ASC": "Preço: Menor para Maior",
+      "price_ASC_NULLS_LAST": "Preço: Menor para Maior",
       "price_DESC": "Preço: Maior para Menor",
       "sn_ASC": "Alfabeticamente",
       "updatedAt_ASC": "Impopular",
       "updatedAt_DESC": "Interagido recentemente"
     },
     "listed": "Compre agora",
     "own": "Em posse",
-    "price_ASC": "Preço: Menor para Maior",
+    "price_ASC_NULLS_LAST": "Preço: Menor para Maior",
     "price_DESC": "Preço: Maior para Menor",
     "sn_ASC": "Alfabeticamente",
     "updatedAt_ASC": "Impopular",

locales/ru.json

@@ -404,7 +404,6 @@
     "BLOCK_NUMBER_ASC": "Старейший",
     "BLOCK_NUMBER_DESC": "Недавно созданный",
     "EMOTES_COUNT_DESC": "Наибольшее количество реакций",
-    "PRICE_ASC": "Цена: от низкой до высокой",
     "PRICE_DESC": "Цена: от высокой до низкой",
     "SN_ASC": "В алфавитном порядке",
     "UPDATED_AT_ASC": "Непопулярный",
@@ -413,7 +412,7 @@
     "blockNumber_DESC": "Недавно созданный",
     "listed": "Купить сейчас",
     "own": "Собственный",
-    "price_ASC": "Цена: от низкой до высокой",
+    "price_ASC_NULLS_LAST": "Цена: от низкой до высокой",
     "price_DESC": "Цена: от высокой до низкой",
     "sn_ASC": "В алфавитном порядке",
     "updatedAt_ASC": "Непопулярный",
@@ -422,15 +421,14 @@
       "BLOCK_NUMBER_ASC": "Старейший",
       "BLOCK_NUMBER_DESC": "Недавно созданный",
       "EMOTES_COUNT_DESC": "Наибольшее количество реакций",
-      "PRICE_ASC": "Цена: от низкой до высокой",
       "PRICE_DESC": "Цена: от высокой до низкой",
       "SN_ASC": "В алфавитном порядке",
       "UPDATED_AT_ASC": "Непопулярный",
       "UPDATED_AT_DESC": "Недавно взаимодействовали",
       "blockNumber_ASC": "Сначала старый",
       "blockNumber_DESC": "Сначала новый",
       "listed": "Купить сейчас",
-      "price_ASC": "Цена: от низкой до высокой",
+      "price_ASC_NULLS_LAST": "Цена: от низкой до высокой",
       "price_DESC": "Цена: от высокой до низкой",
       "sn_ASC": "В алфавитном порядке",
       "updatedAt_ASC": "Непопулярный",

locales/ua.json

@@ -376,7 +376,6 @@
     "BLOCK_NUMBER_ASC": "Найстаріший",
     "BLOCK_NUMBER_DESC": "Нещодавно створений",
     "EMOTES_COUNT_DESC": "Найбільше реакцій",
-    "PRICE_ASC": "Ціна: від низької до високої",
     "PRICE_DESC": "Ціна: від високої до низької",
     "SN_ASC": "За алфавітом",
     "UPDATED_AT_ASC": "Непопулярний",
@@ -385,7 +384,7 @@
     "blockNumber_DESC": "Нещодавно створений",
     "listed": "Купити зараз",
     "own": "Власний",
-    "price_ASC": "Ціна: від низької до високої",
+    "price_ASC_NULLS_LAST": "Ціна: від низької до високої",
     "price_DESC": "Ціна: від високої до низької",
     "sn_ASC": "За алфавітом",
     "updatedAt_ASC": "Непопулярний",
@@ -394,15 +393,14 @@
       "BLOCK_NUMBER_ASC": "Найстаріший",
       "BLOCK_NUMBER_DESC": "Нещодавно створений",
       "EMOTES_COUNT_DESC": "Найбільше реакцій",
-      "PRICE_ASC": "Ціна: від низької до високої",
       "PRICE_DESC": "Ціна: від високої до низької",
       "SN_ASC": "За алфавітом",
       "UPDATED_AT_ASC": "Непопулярний",
       "UPDATED_AT_DESC": "Нещодавно взаємодіяли",
       "blockNumber_ASC": "Спочатку старий",
       "blockNumber_DESC": "Спочатку новий",
       "listed": "Купити зараз",
-      "price_ASC": "Ціна: від низької до високої",
+      "price_ASC_NULLS_LAST": "Ціна: від низької до високої",
       "price_DESC": "Ціна: від високої до низької",
       "sn_ASC": "За алфавітом",
       "updatedAt_ASC": "Непопулярний",

pages/[prefix]/explore/items.vue

@@ -44,18 +44,6 @@ onBeforeMount(() => checkRouteAvailability())
 
 definePageMeta({
   layout: 'explore-layout',
-  middleware: [
-    function (to) {
-      if (to.query.listed === undefined) {
-        return navigateTo({
-          path: to.path,
-          query: {
-            ...to.query,
-            listed: 'true',
-          } })
-      }
-    },
-  ],
 })
 
 useSeoMeta({

tests/e2e/explore.spec.ts

@@ -79,8 +79,8 @@ test('Explore Items', async ({ page, Commands }) => {
   await test.step('Sort results by price, ascending', async () => {
     const exploreSort = page.getByTestId('explore-sort-dropdown').nth(1)
     await exploreSort.click()
-    await page.getByTestId('price_ASC').nth(1).click()
-    const btnAsc = await page.$('[value="price_ASC"]')
+    await page.getByTestId('price_ASC_NULLS_LAST').nth(1).click()
+    const btnAsc = await page.$('[value="price_ASC_NULLS_LAST"]')
     await btnAsc?.click()
     await page.keyboard.press('Escape')
   })

utils/constants.ts

@@ -74,7 +74,7 @@ export const NFT_SQUID_SORT_CONDITION_LIST: string[] = [
   'blockNumber_ASC',
   'updatedAt_DESC',
   'updatedAt_ASC',
-  'price_ASC',
+  'price_ASC_NULLS_LAST',
   'price_DESC',
 ]
 

utils/sort.ts

@@ -0,0 +1,18 @@
+export function removeDuplicateSortKeys(options: string[]) {
+  const uniqueOptions = {}
+
+  if (!Array.isArray(options)) {
+    return []
+  }
+
+  options.forEach((option) => {
+    const [identifier, ...rest] = option.split('_')
+    const sort = rest.join('_')
+
+    uniqueOptions[identifier] = sort
+  })
+
+  return Object.keys(uniqueOptions).map((identifier) => {
+    return `${identifier}_${uniqueOptions[identifier]}`
+  })
+}