STRETCH ONE - CREATING A MEMBER SEARCH BAR

[keanacobarde]

User Story

I, as the user, should see a search bar in the navbar. This search bar should give me the ability to search through MY members (by name).

Acceptance Criteria

AS PULLED FROM THE STRETCH GOALS

[STRETCH 1]
As an authenticated user, I can search my members

Dependencies

This goal is dependent on all the preceding MVP goals to be met. This goal pertains to user specific test data, which was covered in MVP #4 as well as the Read capabilities touched on in #10.

Dev Notes

Search bars were tackled in a number of different ways within past projects. Take a look at this one from vanilla JS:

SEARCH BAR WITHIN NAVBAR - ALMOST AMAZON

<li>
            <input
              class="form-control mr-sm-2"
              id="search"
              placeholder="Search Book Titles"
              aria-label="Search"
            />
            </li>

SEARCH BAR FUNCTIONALITY/EVENT LISTENER HANDLED BY ALMOST AMAZON

  document.querySelector('#search').addEventListener('keyup', (e) => {
    const searchValue = document.querySelector('#search').value.toLowerCase();
    if (e.keyCode === 13) {
      getBooks(user.uid).then((response) => showBooks(response.filter((book) => book.title.toLowerCase().includes(searchValue) || book.description.toLowerCase().includes(searchValue))));
      document.querySelector('#search').value = '';
    }
  });

You would obtain the members using the API call and will filter it out based on what's within the search value. You'll most likely use the useState() and create a function that's similar to the handleChange() function created within the MemberForm form input. A search bar is kind of like a form input, so this makes sense!

HANDLE CHANGE FUNCTIONALITY - SIMPLY BOOKS, AUTHORFORM.JS

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormInput((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

[keanacobarde]

There have been numerous attempts at implementing this. At first, issues existed with handling changes within the state of the data inputted in the search box. This was alleviated with the following changes to handleChange functionality:

  const handleChange = (e) => {
    const { value } = e.target;
    setSearchInput(value.toString());
  };

The value entered into the box upon submit is the parameter used to filter through the array obtained by the getMembers API. The filter functionality is working. It is effectively allowing for the search of a member by their name. However, what isn't working is the rendering of the member cards that fit the criteria to the page. An attempt at utilizing query strings with NextJS's routing hooks failed.

• Attempting to reconsider how changes are handled within the handleChange() function. Eliminating the need for a submit and, instead, attempting to have the page re-render as a user types in characters. This would involve returning a different component. Would you need to reconstruct the entire member's page within the searchBar component?