fix: navigation to correct heading in tools section #2790

Vishal2002 · 2024-03-17T11:46:28Z

Description

This PR resolves the issue of failing to navigate to the correct link in the tool section.
Utilized the useRef hook to reference the target element, improving navigation reliability.
Related issue(s)
Fixes: Links in tools section to specific category do not work #2181

Done.mp4

netlify · 2024-03-17T11:46:46Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`66fe5de`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/663249082a62150008a46699
😎 Deploy Preview	https://deploy-preview-2790--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

sambhavgupta0705 · 2024-03-17T11:48:43Z

@Vishal2002 please the correct pr title convention

asyncapi-bot · 2024-03-17T11:48:54Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	45
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🟠 PWA	56

Lighthouse ran on https://deploy-preview-2790--asyncapi-website.netlify.app/

Vishal2002 · 2024-03-17T12:15:27Z

@Vishal2002 please the correct pr title convention

@sambhavgupta0705 Done Sir

sambhavgupta0705 · 2024-03-24T15:45:40Z

@Vishal2002 it doesn't solve the issue for us
As we need the url to be responsive to the request

Vishal2002 · 2024-03-24T17:17:43Z

@Vishal2002 it doesn't solve the issue for us As we need the url to be responsive to the request

But as per an actual issue by @derberg where he mentioned that when trying to navigate to https://www.asyncapi.com/tools#Documentation%20Generators he is unable to navigate to the actual heading.After that I also read the discussion where @akshatnema told a fellow contributor to use useref and scroll into View to solve the issue.I did the same and solved it. Would be great if you give some more context about my mistake.

sambhavgupta0705 · 2024-03-26T06:20:27Z

ohhh my bad
I missed the preview you added 😅

sambhavgupta0705

@Vishal2002 I have checked the netlify preview it works fine
Just added some comments for better understanding

components/tools/ToolsList.js

sambhavgupta0705 · 2024-03-29T17:35:25Z

@Vishal2002 any update??

Vishal2002 · 2024-03-29T18:47:16Z

@Vishal2002 any update??

Sir already answered the question which you asked about hash and decodeHash.

sambhavgupta0705 · 2024-03-30T06:28:57Z

I can't see any reply
I think you haven't finished the review

Vishal2002 · 2024-03-30T06:38:40Z

I can't see any reply I think you haven't finished the review

Sorry, ya I failed to resolve that, I think now it will be visible to you.

sambhavgupta0705 · 2024-03-30T09:03:34Z

still cannot see
you marked them as resolved only

Vishal2002 · 2024-03-30T10:40:22Z

still cannot see you marked them as resolved only

IDK why this is happening but I have commented on the question that you asked me before about hash and decodehash.

akshatnema · 2024-03-30T17:46:49Z

IDK why this is happening but I have commented on the question that you asked me before about hash and decodehash.

@Vishal2002 I can see that your review is still pending. Inside the Files changed, click on the Review Changes button and click comment option there. Your review will be posted.

Vishal2002 · 2024-03-30T19:07:49Z

IDK why this is happening but I have commented on the question that you asked me before about hash and decodehash.

@Vishal2002 I can see that your review is still pending. Inside the Files changed, click on the Review Changes button and click comment option there. Your review will be posted.

Thank you @akshatnema Sir and @sambhavgupta0705 Sorry for the inconvenience.

akshatnema · 2024-03-31T07:15:14Z

components/tools/ToolsList.js

+        categoryRef.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, []);


Suggested change

}, []);

}, []);

What changes to add here ?

just add a newline at the end of the file

clean code rules

akshatnema · 2024-03-31T07:15:34Z

components/tools/ToolsList.js

 import Paragraph from '../typography/Paragraph'
 export default function toolsList({ toolsData }) {
+  const categoryRefs = useRef({});
+
+  useEffect(() => {


Add a comment, explaining about this useEffect block.

It scrolls the page to a specific category referenced in the URL hash.

@akshatnema Done Sir

…into scroll-issue

akshatnema · 2024-04-06T04:42:08Z

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

anshgoyalevil · 2024-04-07T04:53:25Z

Can you please recheck it on your end and then we are good tyo merge this PR

There's still extra scroll on the desktop and mobile view. Have room for improvement.
Try opening the link https://deploy-preview-2790--asyncapi-website.netlify.app/tools#Others

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

Yes, it is there for me as well.

Vishal2002 · 2024-04-07T06:09:03Z

Can you please recheck it on your end and then we are good tyo merge this PR

There's still extra scroll on the desktop and mobile view. Have room for improvement. Try opening the link https://deploy-preview-2790--asyncapi-website.netlify.app/tools#Others

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

Yes, it is there for me as well.

I didn't find this mobile view issue, Sir please can you tell me how to produce this again?
https://drive.google.com/file/d/1haMMTh7psG3pICxCwDqKHd4IfwLBzZBD/view?usp=sharing

anshgoyalevil · 2024-04-07T06:16:45Z

Can you please recheck it on your end and then we are good tyo merge this PR

There's still extra scroll on the desktop and mobile view. Have room for improvement. Try opening the link https://deploy-preview-2790--asyncapi-website.netlify.app/tools#Others

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

Yes, it is there for me as well.

I didn't find this mobile view issue, Sir please can you tell me how to produce this again? https://drive.google.com/file/d/1haMMTh7psG3pICxCwDqKHd4IfwLBzZBD/view?usp=sharing

In this video itself, you can see the extra scroll issue. From 00:00 to 00:15 seconds.

Vishal2002 · 2024-04-07T06:37:13Z

Can you please recheck it on your end and then we are good tyo merge this PR

There's still extra scroll on the desktop and mobile view. Have room for improvement. Try opening the link https://deploy-preview-2790--asyncapi-website.netlify.app/tools#Others

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

Yes, it is there for me as well.

I didn't find this mobile view issue, Sir please can you tell me how to produce this again? https://drive.google.com/file/d/1haMMTh7psG3pICxCwDqKHd4IfwLBzZBD/view?usp=sharing

In this video itself, you can see the extra scroll issue. From 00:00 to 00:15 seconds.

The additional scrolling occurs infrequently.

sambhavgupta0705 · 2024-04-12T04:49:59Z

Can you please recheck it on your end and then we are good tyo merge this PR

There's still extra scroll on the desktop and mobile view. Have room for improvement. Try opening the link https://deploy-preview-2790--asyncapi-website.netlify.app/tools#Others

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

Yes, it is there for me as well.

I didn't find this mobile view issue, Sir please can you tell me how to produce this again? https://drive.google.com/file/d/1haMMTh7psG3pICxCwDqKHd4IfwLBzZBD/view?usp=sharing

In this video itself, you can see the extra scroll issue. From 00:00 to 00:15 seconds.

The additional scrolling occurs infrequently.

The extra scroll is happening for me also
@Vishal2002 we need to fix it before merging this one

Vishal2002 · 2024-04-12T06:03:14Z

Can you please recheck it on your end and then we are good tyo merge this PR

There's still extra scroll on the desktop and mobile view. Have room for improvement. Try opening the link https://deploy-preview-2790--asyncapi-website.netlify.app/tools#Others

@sambhavgupta0705 @anshgoyalevil I find that there is extra scroll on mobile view. Can you check once?

Yes, it is there for me as well.

I didn't find this mobile view issue, Sir please can you tell me how to produce this again? https://drive.google.com/file/d/1haMMTh7psG3pICxCwDqKHd4IfwLBzZBD/view?usp=sharing

In this video itself, you can see the extra scroll issue. From 00:00 to 00:15 seconds.

The additional scrolling occurs infrequently.

The extra scroll is happening for me also @Vishal2002 we need to fix it before merging this one

@sambhavgupta0705 Sir at my side it happens for the first time when the page renders and after that, everything go smoothly.

anshgoyalevil · 2024-04-12T13:09:01Z

@Vishal2002

happens for the first time when the page renders

That's what we are targeting in this issue. An end user would click on a link that would render for the first time for them. They won't be stuffing the hash values to URLs manually after the first render

Vishal2002 · 2024-04-14T09:04:52Z

@Vishal2002

happens for the first time when the page renders

That's what we are targeting in this issue. An end user would click on a link that would render for the first time for them. They won't be stuffing the hash values to URLs manually after the first render

@anshgoyalevil and @sambhavgupta0705 Sir there might be issue with height of the container and if we add height:100vh then it solves the issue.

height-issue.mp4

Vishal2002 · 2024-04-16T15:47:40Z

@anshgoyalevil and @sambhavgupta0705 Sir looking for the reply from your side.

sambhavgupta0705 · 2024-04-18T05:50:28Z

@Vishal2002 push that change once to this branch and let us see the preview

added container height to resolve extra scroll added container height to resolve extra scroll added height to resolve the extra scroll issue

…into scroll-issue

sambhavgupta0705 · 2024-05-02T13:41:42Z

@Vishal2002 the issue is still there

sambhavgupta0705 · 2024-06-08T06:52:26Z

@Vishal2002 please resolve the merge conflicts

Vishal2002 · 2024-06-08T08:25:08Z

@sambhavgupta0705 Ok and the previous issue regarding extra scroll might be because of useref unable to get the reference for the first time the component mounts.

Navigation to correct heading in tools section

dca670b

Vishal2002 requested review from derberg, akshatnema, magicmatatjahu, anshgoyalevil, Mayaleeeee and asyncapi-bot-eve as code owners March 17, 2024 11:46

asyncapi-bot requested a review from sambhavgupta0705 March 17, 2024 11:46

Vishal2002 changed the title ~~Navigation to correct heading in tools section~~ fix: Navigation to correct heading in tools section Mar 17, 2024

Vishal2002 changed the title ~~fix: Navigation to correct heading in tools section~~ fix: navigation to correct heading in tools section Mar 17, 2024

Merge branch 'master' into scroll-issue

6b5beb0

sambhavgupta0705 reviewed Mar 26, 2024

View reviewed changes

components/tools/ToolsList.js Show resolved Hide resolved

components/tools/ToolsList.js Show resolved Hide resolved

akshatnema requested changes Mar 31, 2024

View reviewed changes

Vishal2002 added 2 commits March 31, 2024 16:58

clean code and comment regarding useEffect

5a5d4eb

Merge branch 'scroll-issue' of https://github.com/Vishal2002/website …

8fa5582

…into scroll-issue

sambhavgupta0705 mentioned this pull request Apr 18, 2024

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

Closed

Vishal2002 added 3 commits May 1, 2024 18:17

fix:added container height to resolve extra scroll

e039f26

added container height to resolve extra scroll

020e4ce

added container height to resolve extra scroll

9e82491

Vishal2002 dismissed anshgoyalevil’s stale review via 9e82491 May 1, 2024 12:49

asyncapi-bot requested review from BhaswatiRoy, J0SAL, octonawish-akcodes, TRohit20 and VaishnaviNandakumar May 1, 2024 12:49

Vishal2002 added 4 commits May 1, 2024 18:20

added height to resolve the extra scroll issue

53715db

fix:added container height to resolve extra scroll

7dcfb6f

added container height to resolve extra scroll added container height to resolve extra scroll added height to resolve the extra scroll issue

Merge branch 'scroll-issue' of https://github.com/Vishal2002/website …

6fd2e87

…into scroll-issue

addding height to container

66fe5de

JeelRajodiya mentioned this pull request Jul 25, 2024

fix: links in tools section to specific category do not work #3116

Merged

sambhavgupta0705 closed this Aug 25, 2024

fix: navigation to correct heading in tools section #2790

fix: navigation to correct heading in tools section #2790

Conversation

Vishal2002 commented Mar 17, 2024 • edited by anshgoyalevil Loading

netlify bot commented Mar 17, 2024 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

sambhavgupta0705 commented Mar 17, 2024

asyncapi-bot commented Mar 17, 2024 • edited Loading

Vishal2002 commented Mar 17, 2024

sambhavgupta0705 commented Mar 24, 2024

Vishal2002 commented Mar 24, 2024

sambhavgupta0705 commented Mar 26, 2024

sambhavgupta0705 left a comment

Choose a reason for hiding this comment

sambhavgupta0705 commented Mar 29, 2024

Vishal2002 commented Mar 29, 2024

sambhavgupta0705 commented Mar 30, 2024

Vishal2002 commented Mar 30, 2024

sambhavgupta0705 commented Mar 30, 2024

Vishal2002 commented Mar 30, 2024 • edited Loading

akshatnema commented Mar 30, 2024

Vishal2002 commented Mar 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akshatnema commented Apr 6, 2024

anshgoyalevil commented Apr 7, 2024

Vishal2002 commented Apr 7, 2024

anshgoyalevil commented Apr 7, 2024

Vishal2002 commented Apr 7, 2024

sambhavgupta0705 commented Apr 12, 2024

Vishal2002 commented Apr 12, 2024

anshgoyalevil commented Apr 12, 2024 • edited Loading

Vishal2002 commented Apr 14, 2024 • edited Loading

Vishal2002 commented Apr 16, 2024

sambhavgupta0705 commented Apr 18, 2024

sambhavgupta0705 commented May 2, 2024

sambhavgupta0705 commented Jun 8, 2024

Vishal2002 commented Jun 8, 2024 • edited Loading

Vishal2002 commented Mar 17, 2024 •

edited by anshgoyalevil

Loading

netlify bot commented Mar 17, 2024 •

edited

Loading

asyncapi-bot commented Mar 17, 2024 •

edited

Loading

Vishal2002 commented Mar 30, 2024 •

edited

Loading

anshgoyalevil commented Apr 12, 2024 •

edited

Loading

Vishal2002 commented Apr 14, 2024 •

edited

Loading

Vishal2002 commented Jun 8, 2024 •

edited

Loading