Date range table filter in Ant Design is broken

[StariMarco]

Describe the bug

Hi everyone, while trying to replicate the Ant Design Crm example I noticed that the date range filter doesn't work as it should: https://example.crm.refine.dev/administration/audit-log.

When filtering by the "Date & Time" column and subsequently reloading the page, the following error occurs:

invalid input syntax for type timestamp: "0NaN-NaN-NaNTNaN:NaN:NaN.NaN+NaN:NaN"
Error (status code: INTERNAL_SERVER_ERROR)

Then if you try to filter the same column again, the application will crash.

Other types of filters work properly, so I think that there might be something wrong with the conversion of the date values from the url to CrudFilter objects or vice-versa.

Here's a video of the bug:

Example.mp4

Steps To Reproduce

1. Visit: https://example.crm.refine.dev/administration/audit-log.
2. Filter the "Date & Time" column by a range of dates.
3. Reload the page and an error will be thrown.
4. Then try to filter by the "Date & Time" column again and the app will crash.

Expected behavior

Upon reloading the page with the same URL, the "Date & Time" column should be filtered with valid dates, and the query should function correctly.

Packages

• @refinedev/antd
• @refinedev/core

Additional Context

No response

[alicanerdurmaz]

@StariMarco, thanks for the issue 👋 I will look into it

[frank-mendez]

I'm a newcomer to refine. I've managed to replicate the bug, and I'm now investigating it to create a solution as part of my exploration of the code. If that is okay? Thank you 😄

[alicanerdurmaz]

I'm a newcomer to refine. I've managed to replicate the bug, and I'm now investigating it to create a solution as part of my exploration of the code. If that is okay? Thank you 😄

Hello @frank-mendez, We are open to all contributions 🙌 Thanks for improving Refine. If you want I can assign this issue to you.

[rohitlohar45]

Hey @alicanerdurmaz I can also contribute to this issue, I have reproduced the issue and also looking for the fix. If you don't mind can you assign it to me?

[alicanerdurmaz]

Hey @alicanerdurmaz I can also contribute to this issue, I have reproduced the issue and also looking for the fix. If you don't mind can you assign it to me?

Hello @rohitlohar45, I am glad to hear that but since @frank-mendez wrote earlier, it would be better to assign it to him. Unfortunately, I replied to @frank-mendez too late, so he might have given up on doing the task. Let's wait until tomorrow and if we don't get an answer I'll be happy to assign it to you.

[rohitlohar45]

Hey @alicanerdurmaz I can also contribute to this issue, I have reproduced the issue and also looking for the fix. If you don't mind can you assign it to me?

Hello @rohitlohar45, I am glad to hear that but since @frank-mendez wrote earlier, it would be better to assign it to him. Unfortunately, I replied to @frank-mendez too late, so he might have given up on doing the task. Let's wait until tomorrow and if we don't get an answer I'll be happy to assign it to you.

No problem, actually have a workaround in my mind by back tracking the code. Would help even if I don't get assigned to this

[alicanerdurmaz]

@rohitlohar45 Thanks, I assigned it to you

[rohitlohar45]

I had a doubt that do refine handle the graphQl requests while filtering if so where it is handling it because the main issue is that in filters field the expected format is not sent and hence this error is received.

[frank-mendez]

Yes, I have also did some digging on the issue and indeed it was something to do with the format of the filters for graphql. This is what the filter looks like when we do onChange for <DatePicker.RangePicker />

{ "createdAt": { "between": { "lower": "2024-05-14T16:00:00.000Z", "upper": "2024-05-16T16:00:00.000Z" } } }

This is what happened to the filter for graphql when we refresh the page

{ "between": { "lower": { "$L": "en", "$d": "2024-05-14T16:00:00.000Z", "$y": "2024", "$M": "4", "$D": "15", "$W": "3", "$H": "0", "$m": "0", "$s": "0", "$ms": "0", "$isDayjsObject": "true" }, "upper": { "$L": "en", "$d": "2024-05-16T16:00:00.000Z", "$y": "2024", "$M": "4", "$D": "17", "$W": "5", "$H": "0", "$m": "0", "$s": "0", "$ms": "0", "$isDayjsObject": "true" } } }

My initial solution leads somewhere to format the filters in the defaultFilteredValue using the getDefaultFilter function. I'm not sure yet how to implement it since I'm also new graphql.

[alicanerdurmaz]

@frank-mendez, @rohitlohar45 Thanks for detailed explanation.

I think there is a problem in the process of encoding filters to string or parsing from string to filters. Code is here. I'll debug and let you know what I find.

[rohitlohar45]

@frank-mendez, @rohitlohar45 Thanks for detailed explanation.

I think there is a problem in the process of encoding filters to string or parsing from string to filters. Code is here. I'll debug and let you know what I find.

@alicanerdurmaz, Can you please check this PR: #5961 this solution is working fine, but not sure that have I maintained proper developer practices.