Infinite scroll for all views #2859

Jarsen136 · 2022-04-15T11:08:20Z

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

PR type

Bugfix
Feature
Refactoring

What's new?

PR closes Infinite scrolling on demand #1582
<brief_description_of_what_I've_added>

Process：

explore-collection infinite scroll on collection page #2781
explore-gallery
collection/{id}
profile-created
profile-collection
test case: /rmrk/u/FZpjhYdt6fqRSzW1nR4fRejavcrSo7UXYP4TDhE3mgimgeC
profile-sold
profile-collected

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 </rmrk/collection/26902bc2f7c20c546a-1FVG7>
I've tested PR on mobile and everything seems works
I found edge cases
I've written some unit tests 🧪

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 · 2022-04-15T11:08:24Z

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	`b350763`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/626a54db2f225300081ed88c
😎 Deploy Preview	https://deploy-preview-2859--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.

Jarsen136 · 2022-04-15T11:15:45Z

Infinite scroll has been done in collection/{id}. @roiLeo
Feel free to leave some comments for code review if you have

components/rmrk/Gallery/CollectionItem.vue

roiLeo

why do you need a callback in async fetchPageData?
it is necessary to have a loadDirection?
can we try to use fetch hook?
would be cool to add in a near future when there is "No Data" or the "End of Data", I think vue-infinite-slot provide slot template

Jarsen136 · 2022-04-15T15:28:42Z

why do you need a callback in async fetchPageData?

Because it needs to notify the fetching status changed.
The relevant code is in infiniteScrollMinxin.ts

it is necessary to have a loadDirection?

Yes, it is necessary to know in which direction will the paging data inserted.
For example, you already have a list and then you fetch paging data.
With the direction, you can directly know whether to insert it at the front or the back of the list

can we try to use fetch hook?

Sorry but I still don't know the benefit if use fetch hook.
A custom fetch function fetchPageData may be more flexible?

would be cool to add in a near future when there is "No Data" or the "End of Data", I think vue-infinite-slot provide slot template

Yes, but let's finish the infinite scroll in all views first because there is still a lot of work to be done : )
The display of "No Data" and the "End of Data" needs some Ui redesign.

yangwao · 2022-04-16T09:03:00Z

Probably go on https://deploy-preview-2859--koda-nuxt.netlify.app/rmrk/explore?page=1 collections with small tiles as default?
🐛 - filters seem not in one row

Jarsen136 · 2022-04-16T09:07:18Z

Probably go on https://deploy-preview-2859--koda-nuxt.netlify.app/rmrk/explore?page=1 collections with small tiles as default? 🐛 - filters seem not in one row

will check it later.

Jarsen136 · 2022-04-16T10:11:41Z

Probably go on https://deploy-preview-2859--koda-nuxt.netlify.app/rmrk/explore?page=1 collections with small tiles as default? 🐛 - filters seem not in one row

🐛Fixed - filters seem not in one row

Jarsen136 · 2022-04-20T05:34:12Z

Let's merge #2871 first, and then I could apply this fix to the other views and resolve conflicting code.

Jarsen136 · 2022-04-20T16:27:43Z

Let's merge #2871 first, and then I could apply this fix to the other views and resolve conflicting code.

Already modified code. Ready for code review now.

components/rmrk/Gallery/PaginatedCardList.vue

vikiival · 2022-04-26T09:48:25Z

components/rmrk/Gallery/CollectionItem.vue

-          first: this.first,
-          offset: this.offset,
-        }
+      variables: {


Why u changed that from function to object?

Because $apollo.query need variables to be an object.

🤔
https://apollo.vuejs.org/guide/apollo/queries.html#reactive-parameters

https://apollo.vuejs.org/guide/apollo/queries.html#option-function

https://apollo.vuejs.org/guide/apollo/queries.html#reactive-query-definition

Both function and object could work.

However, the query does not need to be 'reactive' in this case.
So I use the object to be the param. 🤔

And if you have other reasons to use 'function', I could change it.

I changed my mind after doing some tries, because using function as variables could not work.

$apollo.query only accept 'object' in this case.

yangwao · 2022-04-27T12:14:51Z

I manage to break it?
Scrolled somewhere down to the higher page and then went slowly back.
When I'm on top of the collection my bet page would be around the first page?

https://deploy-preview-2859--koda-nuxt.netlify.app/rmrk/collection/3892e43e923e5ad973-KAG?page=76

Another bug if I tried open this, did not load anything https://deploy-preview-2859--koda-nuxt.netlify.app/rmrk/collection/3892e43e923e5ad973-KAG?page=395

yangwao · 2022-04-27T12:17:06Z

How is paging made? Because I scroll like 1-5 pixels vertically and change pages number pretty wild 😁

Screen.Recording.2022-04-27.at.14.16.04.mov

Jarsen136 · 2022-04-27T13:23:46Z

oh, I will check it later.

…-gallery into issue-1582-infinite-scroll

Jarsen136 · 2022-04-28T00:36:17Z

It is because the collection has only 26 pages of items, however the page number on the url is greater than this maximum.
I have done something to avoid it.

Let's see if your issue has been resolved now? @yangwao

yangwao · 2022-04-29T11:19:11Z

Seem the previous stuff has been fixed.

Follow up issue could be

Infinite scroll for all views #2859 (comment)
Test behaviour on mobile
Sharing page if it opens on new window well even on mobile
Different content between pages

What I see when open in explorer

What it supposed to be

yangwao · 2022-04-29T11:20:13Z

pay 300 usd

yangwao · 2022-04-29T11:20:21Z

😍 Perfect, I’ve sent the payout
💵 $300 @ 155.56 USD/KSM ~ 1.929 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x474ea6f876753de0207db5ec1b2db8e399861de63154a148e89e06467d9b09ba

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

Jarsen136 added 5 commits April 15, 2022 08:40

explore gallery infinite scroll

e041a40

NFTEntityOrderByInput

d6d7676

chroe: recover onResize

a15ea51

items in collection scroll

4615f50

fix switch tab

2455471

Jarsen136 requested a review from a team as a code owner April 15, 2022 11:08

Jarsen136 requested review from prachi00 and removed request for a team April 15, 2022 11:08

Jarsen136 changed the title ~~infinite scroll for all views~~ WIP: infinite scroll for all views Apr 15, 2022

yangwao mentioned this pull request Apr 15, 2022

App is fragile to the indexer swap #2862

Closed

vikiival reviewed Apr 15, 2022

View reviewed changes

components/rmrk/Gallery/CollectionItem.vue Outdated Show resolved Hide resolved

fix sortby net error

7ae91dc

roiLeo reviewed Apr 15, 2022

View reviewed changes

profile page infinite scroll

67a535a

Jarsen136 changed the title ~~WIP: infinite scroll for all views~~ Infinite scroll for all views Apr 16, 2022

Jarsen136 requested a review from roiLeo April 16, 2022 07:03

fix tile mode on collection page

e3ac41c

Jarsen136 and others added 2 commits April 19, 2022 00:07

Merge branch 'main' into issue-1582-infinite-scroll

edba7d4

Merge branch 'issue-2860' into issue-1582-infinite-scroll

430551c

roiLeo marked this pull request as draft April 20, 2022 08:30

Jarsen136 and others added 2 commits April 20, 2022 23:41

fetchPageData refactor

daaa2aa

Merge branch 'main' into issue-1582-infinite-scroll

df31303

Jarsen136 marked this pull request as ready for review April 20, 2022 15:44

vikiival reviewed Apr 23, 2022

View reviewed changes

components/rmrk/Gallery/PaginatedCardList.vue Outdated Show resolved Hide resolved

Jarsen136 and others added 2 commits April 25, 2022 08:41

transfrom kebab-case to PascalCase

2ac05ec

Merge branch 'main' into issue-1582-infinite-scroll

b26649d

Jarsen136 requested a review from vikiival April 26, 2022 14:18

vikiival reviewed Apr 26, 2022

View reviewed changes

yangwao mentioned this pull request Apr 27, 2022

KodaDot Explorer Upgrade #2650

Open

20 tasks

Jarsen136 added 2 commits April 28, 2022 08:03

fix: check cur page is valid

a93764d

Merge branch 'issue-1582-infinite-scroll' of github.com:Jarsen136/nft…

d84f344

…-gallery into issue-1582-infinite-scroll

Merge branch 'main' into issue-1582-infinite-scroll

b350763

Jarsen136 requested a review from vikiival April 28, 2022 12:45

yangwao mentioned this pull request Apr 29, 2022

Follow-up: Infinite scroll v2 #2921

Closed

yangwao added the paid pull-request has been paid label Apr 29, 2022

yangwao merged commit 8379cd9 into kodadot:main Apr 29, 2022

Jarsen136 mentioned this pull request May 1, 2022

feat: page locate index #2931

Merged

17 tasks

yangwao mentioned this pull request May 8, 2022

Cosmetic adjustment pagination version #425

Closed

2 tasks

roiLeo mentioned this pull request May 13, 2022

Scroll to top component #3007

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Infinite scroll for all views #2859

Infinite scroll for all views #2859

Jarsen136 commented Apr 15, 2022 •

edited

Loading

netlify bot commented Apr 15, 2022 •

edited

Loading

Jarsen136 commented Apr 15, 2022

roiLeo left a comment

Jarsen136 commented Apr 15, 2022

yangwao commented Apr 16, 2022 •

edited

Loading

Jarsen136 commented Apr 16, 2022

Jarsen136 commented Apr 16, 2022

Jarsen136 commented Apr 20, 2022

Jarsen136 commented Apr 20, 2022

vikiival Apr 26, 2022

Jarsen136 Apr 26, 2022

vikiival Apr 28, 2022

Jarsen136 Apr 28, 2022

Jarsen136 Apr 28, 2022 •

edited

Loading

Jarsen136 May 1, 2022

yangwao commented Apr 27, 2022

yangwao commented Apr 27, 2022 •

edited

Loading

Jarsen136 commented Apr 27, 2022

Jarsen136 commented Apr 28, 2022

yangwao commented Apr 29, 2022

yangwao commented Apr 29, 2022

yangwao commented Apr 29, 2022

Infinite scroll for all views #2859

Infinite scroll for all views #2859

Conversation

Jarsen136 commented Apr 15, 2022 • edited Loading

PR type

What's new?

Before submitting Pull Request, please make sure:

Optional

Had issue bounty label?

Community participation

Screenshot

netlify bot commented Apr 15, 2022 • edited Loading

✅ Deploy Preview for koda-nuxt ready!

Jarsen136 commented Apr 15, 2022

roiLeo left a comment

Choose a reason for hiding this comment

Jarsen136 commented Apr 15, 2022

yangwao commented Apr 16, 2022 • edited Loading

Jarsen136 commented Apr 16, 2022

Jarsen136 commented Apr 16, 2022

Jarsen136 commented Apr 20, 2022

Jarsen136 commented Apr 20, 2022

vikiival Apr 26, 2022

Choose a reason for hiding this comment

Jarsen136 Apr 26, 2022

Choose a reason for hiding this comment

vikiival Apr 28, 2022

Choose a reason for hiding this comment

Jarsen136 Apr 28, 2022

Choose a reason for hiding this comment

Jarsen136 Apr 28, 2022 • edited Loading

Choose a reason for hiding this comment

Jarsen136 May 1, 2022

Choose a reason for hiding this comment

yangwao commented Apr 27, 2022

yangwao commented Apr 27, 2022 • edited Loading

Jarsen136 commented Apr 27, 2022

Jarsen136 commented Apr 28, 2022

yangwao commented Apr 29, 2022

yangwao commented Apr 29, 2022

yangwao commented Apr 29, 2022

Jarsen136 commented Apr 15, 2022 •

edited

Loading

netlify bot commented Apr 15, 2022 •

edited

Loading

yangwao commented Apr 16, 2022 •

edited

Loading

Jarsen136 Apr 28, 2022 •

edited

Loading

yangwao commented Apr 27, 2022 •

edited

Loading