784 faq page

[ghost]

Fixes #784

• Initial Page:

• While Searching:

• After Search:

• Up to date with dev branch
• Branch name follows guidelines
• All PR Status checks are successful
• Peer reviewed and approved

Any questions? See the getting started guide

[ghost]

@adamkendis running into two logged errors currently that I haven't been able to fix. They are working as expected, but still log errors.

line 29 of FaqHeader, getting "TypeError: Cannot read property 'target' of undefined but it does seem to read the value and insert it into the input

line 69 of FaqHeader, getting TypeError: Cannot read property 'appendChild' of null, it is appending each line that matches to the autocomplete div

[adamkendis]

Hey Hannah, this is really excellent. Works great, completely keyboard accessible. One small change to the position of the link in the header. Regarding the errors, I'm somewhat sure this is what's happening.

  const autocompleteDiv = document.querySelector('.autocomplete-items');
  const searchBox = document.querySelector('#autocompete-search');

The first time the FaqHeader function is called, autocompleteDiv and searchBox are initialized before the function returns the html. So, .autocomplete-items and #autocompete-search don't exist at the time the variables are initialized, but only the first time the component mounts. You can see this by console logging autocompleteDiv and searchBox right after they're declared and/or inside the handleChange function.

I think you can eliminate the errors by using the useRef hook instead of document.querySelector because the hook operates inside the component's lifecycle.

Great job!

[adamkendis]

Could you move the help center link to the right side of the header?

[ghost]

Move to the right! Combined with the responsive navbar you pushed up, it now pops up on the left next to toggle when page scales down FYI

[adamkendis]

I'm pretty sure querySelector is causing the two errors you mentioned. Try useRef instead of document.querySelector.

https://reactjs.org/docs/hooks-reference.html#useref

[ghost]

That worked perfectly, took care of the errors!

[adamkendis]

I like the way you structured this.

[ghost]

@adamkendis Fixed merge conflict from other changes that were recently made to the navbar. I'm failing lint for that section of the nav that is commented "es lint disabled", do we need to disable the lint check on that section locally?

[adamkendis]

Looks good!