feat: item list on new collection page

[preschian]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• refactor gallery list to item list
• show item list on new collection page
• infinite scroll still not perfect, related to this Infinitescroll Vue3 composition api #4952
• closes Refactor: Gallery Item List - composition api #5023

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	cf5c790
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/63fc8f414ccb3f000846af3a
😎 Deploy Preview	https://deploy-preview-5039--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[roiLeo]

maybe we should export some composable from useItemsGrid, I think we'll need to reuse useSearchParams in profile page & collection

[preschian]

I think we'll need to reuse useSearchParams in profile page & collection

actually, I already use <Item /> component on 3 pages

• explorer - https://deploy-preview-5039--koda-nuxt.netlify.app/rmrk/explore/items?redesign=true
• collection - https://deploy-preview-5039--koda-nuxt.netlify.app/rmrk/collection/800f8a914281765a7d-KITTY?redesign=true
• user - https://deploy-preview-5039--koda-nuxt.netlify.app/rmrk/u/FUEGFWoPPtX4XkRzEnZnMgwGKENscHXAiEZy6kcgaDz1BY6?redesign=true

I just add this query on collection or user page:

• collection - https://github.com/kodadot/nft-gallery/blob/refactor/item-list/components/items/ItemsGrid/useItemsGrid.ts#L49-L53
• user - https://github.com/kodadot/nft-gallery/blob/refactor/item-list/components/items/ItemsGrid/useItemsGrid.ts#L55-L57

hopefully, it helps us to simplify the code. wdyt?

[roiLeo]

looks good

[exezbcz]

It looks weird on my end. otherwise oki

[preschian]

It looks weird on my end. otherwise oki

let me check first, should be not like that

[preschian]

@exezbcz please check again. if still error, share me the link

[exezbcz]

something is still wrong, is this related to the cards having different height? (afaik there is an issue for this)

link: https://deploy-preview-5039--koda-nuxt.netlify.app/bsx/collection/1299595206?page=2&redesign=true

[preschian]

something is still wrong, is this related to the cards having different height? (afaik there is an issue for this)

link: deploy-preview-5039--koda-nuxt.netlify.app/bsx/collection/1299595206?page=2&redesign=true

I will check in separate PR 👍
thanks for the link

[roiLeo]

I will check in separate PR 👍 thanks for the link

We already had this issue, fix is to wrap cards content with container class

ref #4935

[preschian]

I will check in separate PR 👍 thanks for the link

We already had this issue, fix is to wrap cards content with container class

ref #4935

oh thanks, will update then 🙏🏻

[roiLeo]

Why do we have a full-width layout here compared to explore layout?
We need to unify user experience

[preschian]

Why do we have a full-width layout here compared to explore layout? We need to unify user experience

waiting for this decision actually #4857
should I put wrapper for now?

[roiLeo]

waiting for this decision actually #4857 should I put wrapper for now?

For now I would just copy same layout as we use currently on explore page.
#4857 fix might come later since we could have potential side effects (didn't test responsive)

[preschian]

something is still wrong, is this related to the cards having different height? (afaik there is an issue for this)

For now I would just copy same layout as we use currently on explore page. #4857 fix might come later since we could have potential side effects (didn't test responsive)

updated ✅

please note, this PR is refactoring and under useExperiment(), so expect some features still missing or not perfect. such as infinity scroll or grid selection

[preschian]

@exezbcz @kodadot/internal-dev any feedback?

[Jarsen136]

Complexity 4

I just wonder if we could manage to reduce it

[preschian]

Complexity 4

I just wonder if we could manage to reduce it

for total lines code I think that is the tricky one. because composable is a function inside a function. for example code climate read useFetchSearch() instead of fetchSearch(page)

for cognitive complexity, let me try to fix it in this PR #5106

[exezbcz]

@preschian apart from this issue I think everything seems to be fine
#5039 (comment)

[preschian]

can we merge this, please?

[codeclimate]

Code Climate has analyzed commit cf5c790 and detected 4 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	4

View more on Code Climate.