Bug: links does not show the page and redirect to the react props names

[a0m0rajab]

Describe the bug

When I tried to use the link from this issue: #2177
I was redirected to https://app.opensauced.pizza/[pageId]/[toolName]/filter/[...selectedFilter]?range=30
Instead of: https://app.opensauced.pizza/ai/dashboard/filter/top-100-repos?range=30

Steps to reproduce

1. go to app.opensauced.pizza/ai/dashboard/filter/top-100-repos?range=30
2. Tada 🎉

Browsers

Chrome

Additional context (Is this in dev or production?)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

I have a feeling the info is not being read from the URL, e.g. language.

[a0m0rajab]

When I tested this, the info was read rendered and then redirected to this weird names, I did not dig further into it to be honest. Sent from mobile device

…

________________________________ From: Nick Taylor ***@***.***> Sent: Tuesday, November 21, 2023 8:19:59 PM To: open-sauced/app ***@***.***> Cc: Abdurrahman Rajab ***@***.***>; Author ***@***.***> Subject: Re: [open-sauced/app] Bug: links does not show the page and redirect to the react props names (Issue #2185) I have a feeling the info is not being read from the URL, e.g. language. — Reply to this email directly, view it on GitHub<#2185 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AELNMKNED3X76KZ2TRZT5FTYFTPD7AVCNFSM6AAAAAA7R7JZR6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRRGM2DGMBRGM>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[nickytonline]

I looked into this a bit and it appears to be the ?range=30 that causes it to behave the way the bug is described. However, if you navigate to https://app.opensauced.pizza/javascript/dashboard/filter/recent without the querystring ?range=30, it's all good.

This is probably related to changes in #2047.

[a0m0rajab]

Could I work on this? I would like to debug this.

just trying if .take works.

[github-actions]

The issue you are trying to assign yourself is blocked until it can be triaged or by another label on the issue.

[nickytonline]

I've assigned it to you @a0m0rajab. @OgDev-01 worked on #2047 and can probably provide some insight.

[a0m0rajab]

Thanks for that, I will check this on live stream and connect with him if needed

[a0m0rajab]

Dev notes:
When I opened app.opensauced.pizza/javascript/dashboard/filter/recent it just gave the wrong names then get back to the normal one. I think it's a useEffect issue.

[JabSYsEmb]

I just found the function call that causing in the redirecting after the page being rendered, I share it here for further investigation

[a0m0rajab]

Thanks @JabSYsEmb for checking this, if you could find the related code in the dev it would be great, I could find that.

As for my investigation today:

• the app.opensauced.pizza/javascript/dashboard/filter/recent link is working then it shows the broken URL then it works again.
• the URL with range=30 does work then get broken and show the broken page.

The issue is happening in the next function, if we remove the merge logic it will work well.

app/lib/utils/query-params.ts

Lines 10 to 21 in 9224c05

	function setQueryParams(params: Record<string, string>, paramsToRemove: Array<string> = [], pathname?: string) {
	const presentQueryParams = deleteKeys(Router.query, paramsToRemove);
	// Merge final query and set URL
	Router.push({
	pathname: pathname || Router.pathname,
	query: {
	...presentQueryParams,
	...params,
	},
	});
	}

[a0m0rajab]

I found the issue, I think it was due the prerendering since the next provides and empty query object.
ref: https://nextjs.org/docs/pages/api-reference/functions/use-router

I will open a PR in few minutes.

Another few issues I noticed while working on this, I will check them later and open an issue for them:

• the tool selector is showing an empty page if no tool were selected: related code case "Dashboard":
• There is a warning related to style when you open the app in the debugger:

Warning: Updating a style property during rerender (overflowY) when a conflicting property is set (overflow) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

• the name of the range selector should be limit to set the information
• Range is not setting in the page it's just showing 10 per page always.
• when you click on showing 10 per page it will break the layout a bit
• when limit/range is selected this does not appear on the button in the UI