UI [BUG] <Query Parameters Displayed in Breadcrumbs for Specific Search Results>

[gauravxroy]

Description

When users perform a search using the search bar in the application, the breadcrumb navigation reflects the API route or endpoint rather than the intended UI structure. Instead of displaying a user-friendly path breadcrumbs like > Home > Search > Ethers, the breadcrumbs show a format such as " Home > Search {query=endpoint} > Search Result". This inclusion of the API route or endpoint (enclosed in {}) in the breadcrumb navigation is not desirable and affects the user experience.

Steps to Reproduce: -
-Navigate to the search bar in the application.
-Enter a search query(like Ethers, Truffle) and execute the search(The issue is producing when we hit enter key in order to hit the search queries).
-Observe the breadcrumb navigation in the UI.

Suggested Methods/ways to resolve the Issues:
1>UI State Management:
Ensure proper state updates for breadcrumbs, isolating them from API responses.
Implement a dedicated breadcrumb component to manage display logic.
2>Routing Configuration:
Review route definitions to prevent API parameters from appearing in breadcrumbs.
Use custom route handling to separate UI routes from API calls.
3>API Response Handling:
Keep API logic separate from UI logic to avoid affecting breadcrumb structure.
Transform API responses to exclude unnecessary parameters.

I want to address the issue with breadcrumb navigation to ensure it displays user-friendly paths instead of API endpoints.

Screenshots

Current Breadcrumbs Behaviours :

Required Breadcrumbs Behaviour:

Any additional information?

No response

What browser are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I am willing to work on this issue (optional)

[github-actions]

Hello gauravxroy!
Thank you for raising this issue! 😊 Your contribution is valuable to us! 😊

Please make sure to follow our Contributing Guidelines. 💪🏻

Please only work on an issue if you're assigned; otherwise, the PR will be automatically closed.
Our review team will carefully assess the issue and reach out to you soon! 😇
We appreciate your patience!

[heysolomon]

@rupali-codes I would like to work on this

[rupali-codes]

@gauravxroy do you want to work on this?

[gauravxroy]

@gauravxroy do you want to work on this?

@rupali-codes Absolutely, I'm excited to work on this issue.

[rupali-codes]

@gauravxroy do you want to work on this?

@rupali-codes Absolutely, I'm excited to work on this issue.

Alright, assigning to you.

And, @heysolomon, please have a look on other opened issues, since @gauravxroy wants to work on it so we'll assign the issue to them as per our Contributing guidelines.

[gauravxroy]

@gauravxroy do you want to work on this?

@rupali-codes Absolutely, I'm excited to work on this issue.

Alright, assigning to you.

And, @heysolomon, please have a look on other opened issues, since @gauravxroy wants to work on it so we'll assign the issue to them as per our Contributing guidelines.

@rupali-codes Thank you, Rupali. I will work on resolving this issue and close this as soon as possible.

[gauravxroy]

@rupali-codes Hey, Rupali Sorry for delay , due to some unexpected health issues i was not able to work on this issue but , now I will try to resolve this issue within a week.

[rupali-codes]

Hi @gauravxroy, is there any update on this?

[gauravxroy]

@rupali-codes yes majority of work has been done , after analysing and improving written codes I will make a PR.