feat(xudt-tag): add xudt tag column in xudt page

[Daryl-L]

Magickbase/ckb-explorer-public-issues#650

https://ckb-explorer-frontend-in-magickbase-repo-git-7ac401-magickbase.vercel.app/xudts

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ckb-explorer-frontend-in-magickbase-repo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 11, 2024 3:45am

[Keith-CY]

Is this PR ready for review?

[Daryl-L]

Is this PR ready for review?

Not yet, just waiting for the API ready

[Keith-CY]

It can be simplified as

const types = params[filterName]?.split(',').filter(t => !t)

[Keith-CY]

filterName should be filterNames if it's designed to be multiple filters.

[Keith-CY]

For me, the filters from the URL are more like filteredList because they are effective/working filters while filteredList in the component params is a list of filters.

[Daryl-L]

filterName should be filterNames if it's designed to be multiple filters.

I think there would be only one filter for each filter button, so I think "s" is not necessary here.

[Daryl-L]

There are three values for the filterName.

1. undefined, which means to entry the page without any filter parameters, for "all selected".
2. Empty string '', like tags= which means "not selected any value".
3. Partial selected.

[Keith-CY]

There are three values for the filterName.

1. undefined, which means to entry the page without any filter parameters, for "all selected".
2. Empty string '', like tags= which means "not selected any value".
3. Partial selected.

const types = params[filterName]?.split(',').filter(t => !t)

works well for these 3 cases

when params[filterName] is undefined, types is undefined, means all selected
when params[filterName] is an empty string, types is an empty array, means not selected any value
when params[filterName] is a string, types is expected to be an array with items, means some selected

[Keith-CY]

Any update on this conversation?

[Daryl-L]

filterName should be filterNames if it's designed to be multiple filters.

I think there would be only one filter for each filter button, so I think "s" is not necessary here.

The logic is as follows

const filter = params[filterName]
const types = filter.split(',').filter(t => t !== '')

equivalent to

const types = params[filterName].split(',').filter(t => t !== '')

So params[filterName] is expected to be a string like A,B,C, which includes multiple values. That's the reason I think it should be filterNames

The filterName means the name of the filter, and A,B,C should be the values of this filter, not the name.

[Daryl-L]

There are three values for the filterName.

1. undefined, which means to entry the page without any filter parameters, for "all selected".
2. Empty string '', like tags= which means "not selected any value".
3. Partial selected.

const types = params[filterName]?.split(',').filter(t => !t)

works well for these 3 cases

when params[filterName] is undefined, types is undefined, means all selected when params[filterName] is an empty string, types is an empty array, means not selected any value when params[filterName] is a string, types is expected to be an array with items, means some selected

The result of !t is true when it is an empty string, but the empty string should filtered to the result

[Keith-CY]

My typo, .filter(t => !t) should be .filter(t => !!t) to return truty values

[Keith-CY]

@Sven-TBD please review the UX

[poor-defined]

I'm ok with the UX part, however, while trying to uncheck all , it should be No data, but all items are displayed here.

@Daryl-L

[Daryl-L]

I'm ok with the UX part, however, while trying to uncheck all , it should be No data, but all items are displayed here.

@Daryl-L

Should be supported by the API @zmcNotafraid How to filter none tag items?

[Daryl-L]

https://ckb-explorer-frontend-in-magickbase-repo-iubv4tkve-magickbase.vercel.app/xudts

1、I found that the data obtained by Select and Verified on platform/Category are the same. Do they need to be distinguished? @Sven-TBD

Request URL: https://ckb-explorer-api-staging.magickbase.com/api/v1/xudts?page=1&page_size=10&sort=transactions.desc&tags=invalid,suspicious,out-of-length-range,duplicate,layer-1-asset,layer-2-asset,verified-on,supply-limited,supply-unlimited,rgbpp-compatible

Request URL: https://ckb-explorer-api-staging.magickbase.com/api/v1/xudts?page=1&page_size=10&sort=transactions.desc&tags=invalid,suspicious,out-of-length-range,duplicate,layer-1-asset,layer-2-asset,supply-limited,supply-unlimited,rgbpp-compatible,category

2、Cannot get data when there is no Verified on platform or Category.

3、It is OK to use it alone, but data cannot be obtained when using Invalid and Suspicious together. Similar issues include out of length range and duplicate or more tags.

https://ckb-explorer-frontend-in-magickbase-repo-iubv4tkve-magickbase.vercel.app/xudts?page=5 https://ckb-explorer-frontend-in-magickbase-repo-iubv4tkve-magickbase.vercel.app/xudts?page=5&tags=suspicious Expected https://ckb-explorer-frontend-in-magickbase-repo-iubv4tkve-magickbase.vercel.app/xudts?page=1&tags=suspicious

4、When browsing to page 5 in the Select state, if there are multiple pages of data when selecting different tags later, the data needs to be displayed from the home page. (When selecting Suspicious alone, it needs to display page=1&tags=suspicious, but now it directly displays page=5&tags=suspicious.)

parameter union added

[FrederLu]

Magickbase/ckb-explorer-public-issues#650 (comment)

1、The corresponding backend message information does not have the Verified on platform/xudt.tag.category information. Is the unname tag added? cc @Sven-TBD

---

4、When browsing to page 5 in the Select state, if there are multiple pages of data when selecting different tags later, the data needs to be displayed from the home page. (When selecting Suspicious alone, it needs to display page=1&tags=suspicious, but now it directly displays page=5&tags=suspicious.)

2、The problem still exists.

---

3、When there is no data on the page, paging needs to be performed here. At this time, if you switch pages again, the pages will be without data.

---

4、 There is Invalid data, but the data cannot be obtained through Request URL: https://ckb-explorer-api-staging.magickbase.com/api/v1/xudts?page=10&page_size=10&sort=transactions.desc&tags=invalid&union=true.

---

5、If the filter function is used, the icon needs to have a highlighted style, refer to the NFT Collection page.

[poor-defined]

1、The corresponding backend message information does not have the Verified on platform/xudt.tag.category information. Is the unname tag added?

Yes, We can still remain the tag, Verified on platform. But we need to remove the xudt.tag.category @Daryl-L @zmcNotafraid

[FrederLu]

1、The corresponding backend message information does not have the Verified on platform/xudt.tag.category information. Is the unname tag added?

Yes, We can still remain the tag, Verified on platform. But we need to remove the xudt.tag.category @Daryl-L @zmcNotafraid

There is also no Verified on platform provided in the API and this also needs to be removed.

[Daryl-L]

1、The corresponding backend message information does not have the Verified on platform/xudt.tag.category information. Is the unname tag added?
Yes, We can still remain the tag, Verified on platform. But we need to remove the xudt.tag.category @Daryl-L @zmcNotafraid

There is also no Verified on platform provided in the API and this also needs to be removed.

Removed.
By the way, I recommend to manage the tag configs in backend, and write a document to list.

[FrederLu]

3、When there is no data on the page, paging needs to be performed here. At this time, if you switch pages again, the pages will be without data.
5、If the filter function is used, the icon needs to have a highlighted style, refer to the NFT Collection page.

These two issues remain to be resolved.

---

When Tags is empty on the mobile terminal, the page still displays data.

[Daryl-L]

3、When there is no data on the page, paging needs to be performed here. At this time, if you switch pages again, the pages will be without data.
5、If the filter function is used, the icon needs to have a highlighted style, refer to the NFT Collection page.

These two issues remain to be resolved.

When Tags is empty on the mobile terminal, the page still displays data.

All solved

[poor-defined]

关于Filter组件：

并集API：
“未启用” = { 实际选中项=全选，样式= {不高亮icon+选项全不选}}，
“启用” = {实际选中项={用户选项}，样式= {高亮icon+选项=实际选中项}}；

交集API：
“未启用” = { 实际选中项=全不选，样式= {不高亮icon+选项全不选}}，
“启用” = {实际选中项={用户选项}，样式= {高亮icon+选项=实际选中项}}；

其中默认为未启用状态，未启用状态下，选中一个选项将变更组件状态到 “启用”：
启用-------选项全不选------>未启用

其中启用状态下，选项全不选将变更组件状态到 “未启用”：
未启用 -------选中一项选项------> 启用