refactor: Infinitescroll Vue3 composition api #5108

Jarsen136 · 2023-02-23T15:42:48Z

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

Closes Infinitescroll Vue3 composition api #4952
Refactor CollectionList component composition api
apply infinitescroll to both collection and items on explore page

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.

kodabot · 2023-02-23T15:42:53Z

SUCCESS @Jarsen136 PR for issue #4952 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

netlify · 2023-02-23T15:42:54Z

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	`6cffd72`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/640183fd441f4500089d13d5
😎 Deploy Preview	https://deploy-preview-5108--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.

codeclimate · 2023-02-23T15:43:24Z

composables/useInfiniteScroll.ts

+
+type LoadDirection = 'up' | 'down'
+
+export default function ({


Function default has a Cognitive Complexity of 29 (exceeds 5 allowed). Consider refactoring.

roiLeo

Here are my concern:

useDebounceFn 😐
200+ LOC
DOM elements access (no ssr)
event listener

have you tried to use vInfiniteScroll from @vueuse/components?

Jarsen136 · 2023-02-23T16:34:24Z

Here are my concern:

useDebounceFn 😐

It's necessary to use debounce if some events would be triggered frequently. In this scroll case, user would scroll to the bottom frequently to fetch next page.

DOM elements access (no ssr)

I'm really curious about how could we improve the ssr in this case. I could not think of anything related to it TBH. Could you pls expand more?

event listener

We have to listen to the scroll event to know which page we are visiting.

200+ LOC

have you tried to use vInfiniteScroll from @vueuse/components?

I have read the docs about useInfiniteScroll. The function provided could not fit our requirements. It could only provide single-direction scrolling. In our codebase, the infinite scroll mixins provide much more functionality, like a double-direction scroll, prefetch data, pagination etc. That's why it has so much LOC :)

roiLeo · 2023-02-24T08:27:12Z

It's necessary to use debounce if some events would be triggered frequently. In this scroll case, user would scroll to the bottom frequently to fetch next page.

hmmm, okay

I'm really curious about how could we improve the ssr in this case. I could not think of anything related to it TBH. Could you pls expand more?

maybe use ref on tag

We have to listen to the scroll event to know which page we are visiting.

@scroll event?

I have read the docs about useInfiniteScroll. The function provided could not fit our requirements. It could only provide single-direction scrolling. In our codebase, the infinite scroll mixins provide much more functionality, like a double-direction scroll, prefetch data, pagination etc. That's why it has so much LOC :)

direction?: "top" | "bottom" | "left" | "right"

I'll take a look when I have time to make it work with vueuse. pretty sure it's doable

vikiival · 2023-02-24T09:49:39Z

Up direction has up button anyway so I would check if user on first hit is on other page than one.
and for the direction going down I would prefer
useInfiniteScroll.

may https://vueuse.org/core/useOffsetPagination/#useoffsetpagination can help

Jarsen136 · 2023-02-24T11:15:08Z

I'm really curious about how could we improve the ssr in this case. I could not think of anything related to it TBH. Could you pls expand more?

maybe use ref on tag

Sorry, I just thought ssr is server-side render. I guess use ref does not change anything to it. Let me know if I miss something.

We have to listen to the scroll event to know which page we are visiting.

@scroll event?

However, it binds the scroll event on window for now.

I have read the docs about useInfiniteScroll. The function provided could not fit our requirements. It could only provide single-direction scrolling. In our codebase, the infinite scroll mixins provide much more functionality, like a double-direction scroll, prefetch data, pagination etc. That's why it has so much LOC :)

direction?: "top" | "bottom" | "left" | "right"

I'll take a look when I have time to make it work with vueuse. pretty sure it's doable

emm. Maybe use twice time to bind two directions. I'm not sure if would work as expected. Anyway, I'm willing to see if someone could improve the code.

Jarsen136 · 2023-02-24T11:19:17Z

Up direction has up button anyway so I would check if user on first hit is on other page than one.
and for the direction going down I would prefer
useInfiniteScroll.

The up button for loading the previous is only for the explore gallery page because it has a special structure. I wonder if we would like to apply the up button to other pages also. If so, I could try to do some refactoring and use [useInfiniteScroll] for the down-direction loading.

double-direction scroll example: https://beta.kodadot.xyz/rmrk/explore/collectibles?page=3

yangwao · 2023-02-25T16:36:54Z

hey haven't read anything on this pr, just having head's up on this that we should probably drop infinity scroll to the top and replace it to the button best which adds 4 rows with extra items

Jarsen136 · 2023-02-26T02:19:16Z

hey haven't read anything on this pr, just having head's up on this that we should probably drop infinity scroll to the top and replace it to the button best which adds 4 rows with extra items

OKi, I will make it work.

composables/useListInfiniteScroll.ts

Jarsen136 · 2023-03-01T16:45:05Z

I have created a useListInfiniteScroll composable function and applied it to the CollectionList component.

Here is the preview path: https://deploy-preview-5108--koda-nuxt.netlify.app/rmrk/explore/collectibles

yangwao · 2023-03-01T18:52:01Z

Here is the preview path

seems working well, can try to add to items?

Jarsen136 · 2023-03-02T05:35:21Z

Here is the preview path

seems working well, can try to add to items?

Yes, I will refactor GalleryList component to composition api first, and then I would apply the infinitescroll to items.

components/items/ItemsGrid/useItemsGrid.ts

Jarsen136 · 2023-03-02T16:39:34Z

Here is the preview path

seems working well, can try to add to items?

Yes, I will refactor GalleryList component to composition api first, and then I would apply the infinitescroll to items.

✅ added infiniteScroll to redesign items page

preview: https://deploy-preview-5108--koda-nuxt.netlify.app/bsx/explore/items?redesign=true

vikiival · 2023-03-02T21:24:59Z

components/items/ItemsGrid/ItemsGrid.vue

+    <a
+      v-if="startPage > 1 && !isLoading && total > 0"
+      class="is-flex is-justify-content-center pb-4"
+      @click="reachTopHandler">
+      <b-icon icon="chevron-up" />
+    </a>


just one thing, I would make this as component because we plan to reuse that across app

vikiival

Let it break 👀

codeclimate · 2023-03-03T05:22:37Z

Code Climate has analyzed commit 6cffd72 and detected 3 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	3

View more on Code Climate.

vikiival · 2023-03-03T10:45:58Z

pay 50 usd

yangwao · 2023-03-03T10:46:10Z

😍 Perfect, I’ve sent the payout
💵 $50 @ 34.13 USD/KSM ~ 1.465 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0xd2679d658fa1c638d1493d0d547b8cea83659620bd4d210502e9563a382fc732

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

refactor: Infinitescroll Vue3 composition api

633a1eb

Jarsen136 requested a review from a team as a code owner February 23, 2023 15:42

Jarsen136 requested review from roiLeo and vikiival and removed request for a team February 23, 2023 15:42

codeclimate bot reviewed Feb 23, 2023

View reviewed changes

roiLeo reviewed Feb 23, 2023

View reviewed changes

roiLeo approved these changes Feb 24, 2023

View reviewed changes

Jarsen136 marked this pull request as draft February 26, 2023 02:19

Jarsen136 added 4 commits February 28, 2023 12:49

fix: disable scroll up

8260637

Merge remote-tracking branch 'origin' into issue-4952

699763a

refactor: collectionList component & useInfiniteScroll

2dc1296

Merge branch 'main' into issue-4952

918c735

codeclimate bot reviewed Mar 1, 2023

View reviewed changes

composables/useListInfiniteScroll.ts Show resolved Hide resolved

fix: infinite scroll

40a0e70

Jarsen136 marked this pull request as ready for review March 1, 2023 16:45

Jarsen136 marked this pull request as draft March 2, 2023 05:35

refactor: items with infinit scroll

a649281

codeclimate bot reviewed Mar 2, 2023

View reviewed changes

components/items/ItemsGrid/useItemsGrid.ts Show resolved Hide resolved

components/items/ItemsGrid/useItemsGrid.ts Show resolved Hide resolved

Merge branch 'main' into issue-4952

9377600

Jarsen136 marked this pull request as ready for review March 2, 2023 16:42

vikiival reviewed Mar 2, 2023

View reviewed changes

vikiival approved these changes Mar 2, 2023

View reviewed changes

feat: LoadPreviousPage component

6cffd72

vikiival merged commit 0a13387 into kodadot:main Mar 3, 2023

yangwao added the paid pull-request has been paid label Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Infinitescroll Vue3 composition api #5108

refactor: Infinitescroll Vue3 composition api #5108

Jarsen136 commented Feb 23, 2023 •

edited

kodabot commented Feb 23, 2023

netlify bot commented Feb 23, 2023 •

edited

codeclimate bot Feb 23, 2023

roiLeo left a comment

Jarsen136 commented Feb 23, 2023 •

edited

roiLeo commented Feb 24, 2023

vikiival commented Feb 24, 2023

Jarsen136 commented Feb 24, 2023 •

edited

Jarsen136 commented Feb 24, 2023 •

edited

yangwao commented Feb 25, 2023

Jarsen136 commented Feb 26, 2023

Jarsen136 commented Mar 1, 2023

yangwao commented Mar 1, 2023

Jarsen136 commented Mar 2, 2023

Jarsen136 commented Mar 2, 2023

vikiival Mar 2, 2023

Jarsen136 Mar 3, 2023

vikiival left a comment

codeclimate bot commented Mar 3, 2023

vikiival commented Mar 3, 2023

yangwao commented Mar 3, 2023


		type LoadDirection = 'up' \| 'down'

		export default function ({

refactor: Infinitescroll Vue3 composition api #5108

refactor: Infinitescroll Vue3 composition api #5108

Conversation

Jarsen136 commented Feb 23, 2023 • edited

PR Type

Context

Before submitting pull request, please make sure:

Optional

Had issue bounty label?

Community participation

Screenshot 📸

kodabot commented Feb 23, 2023

netlify bot commented Feb 23, 2023 • edited

✅ Deploy Preview for koda-nuxt ready!

codeclimate bot Feb 23, 2023

Choose a reason for hiding this comment

roiLeo left a comment

Choose a reason for hiding this comment

Jarsen136 commented Feb 23, 2023 • edited

roiLeo commented Feb 24, 2023

vikiival commented Feb 24, 2023

Jarsen136 commented Feb 24, 2023 • edited

Jarsen136 commented Feb 24, 2023 • edited

yangwao commented Feb 25, 2023

Jarsen136 commented Feb 26, 2023

Jarsen136 commented Mar 1, 2023

yangwao commented Mar 1, 2023

Jarsen136 commented Mar 2, 2023

Jarsen136 commented Mar 2, 2023

vikiival Mar 2, 2023

Choose a reason for hiding this comment

Jarsen136 Mar 3, 2023

Choose a reason for hiding this comment

vikiival left a comment

Choose a reason for hiding this comment

codeclimate bot commented Mar 3, 2023

vikiival commented Mar 3, 2023

yangwao commented Mar 3, 2023

Jarsen136 commented Feb 23, 2023 •

edited

netlify bot commented Feb 23, 2023 •

edited

Jarsen136 commented Feb 23, 2023 •

edited

Jarsen136 commented Feb 24, 2023 •

edited

Jarsen136 commented Feb 24, 2023 •

edited