Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: navigates user to the relevant category when URL is provided #2786

Closed
wants to merge 2 commits into from
Closed

fix: navigates user to the relevant category when URL is provided #2786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
acd1c73
navigate user to respective categories on entering the URL
helios2003 Mar 16, 2024
4cb3343
scroll to heading
helios2003 Mar 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions components/tools/ToolDashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,22 @@ export default function ToolDashboard() {
};
});

// Navigates the user to the specific categories on providing the URL
useEffect(() => {
if (!loading) {
const urlPath = router.asPath;
const elementIndex = urlPath.lastIndexOf('#');
if (elementIndex !== -1) {
const element = urlPath.substring(elementIndex + 1).replace(/%20/g, ' ');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should use hardcode functions.
Is there any other way of doing this??

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't get what you mean by hardcoded functions. Could you please elaborate on it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean how we are checking the slug and replacing it

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are looking at the specific component of the URL i.e. the category. Hence for URLs like domain/tools#Frameworks I try to extract the word Frameworks using elementIndex.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try running this url on your local host https://localhost:3000/tools#Documentation%20Generators

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

asyncapi.mp4

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sambhavgupta0705 is the PR good to be merged?

const DOMElement = document.getElementById(element);
if (DOMElement) {
DOMElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
}
}
}
}, [loading]);


// Function to update the list of tools according to the current filters applied
const updateToolsList = () => {
let tempToolsList = {};
Expand Down
2 changes: 1 addition & 1 deletion components/tools/ToolsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function toolsList({ toolsData }) {
<div className="" data-testid="ToolsList-main" >
{Object.keys(toolsData).map((categoryName, index) => {
if(toolsData[categoryName].toolsList.length > 0) return (
<div className='my-8' key={index} id={categoryName}>
<div className='my-8 scroll-m-96 scroll-mb-96' key={index} id={categoryName}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why there is a change in the design ??

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we select the category from the dropdown directly, it takes us to the heading of that category, but it does not happen if we directly enter the URL. Hence this change in the CSS.

<Heading typeStyle='heading-md-semibold' className='my-2' >
{categoryName}
</Heading>
Expand Down
Loading