Live Search

[ShyarK]

User Story:
As a user, I want to be able to search for other users directly from the developers page. When typing in the search field, I want to see a list of users whose names match with the letters that I type in the field. And when I click on a developer view profile button, it has to take me to the user's profile. And when the developers page gets bigger, I want to have separate pages: each page displaying 5 developers profiles, or the number could be increased in the future.

Implementing customer needs:
-Front-end:

1. HTML:
   ⦁ Search field: input elements of type search.

   ⦁ Pagination: ul unordered list of items.

2. CSS:
   ⦁Styling input element using CSS attribute and class selectors.

   ⦁Taking into the consideration the concept of mobile-first approach.

3. JavaScript:

   ⦁ Search field:
   a. Array filter method: To create a new array with all elements that pass the test implemented by the provided function.

   b. toLowerCase method: JavaScript is a case sensitive programing language, an inequality between two letters can occurre in case one of them is lower case, or upper case.

   c. includes method: Is a case sensitive, determines whether a userName contains the given characters (searchText) within it or not, returns true or false.

   ⦁Pagination:
   a. Passing the total number of profiles (totalProfiles) to a Pagination component, as well as page size (profilesPerPage), to calculate the number of pages and reder them.
   
   b. Passing (handlePageChange) method: to rise an event (onPageChange) whenever a user clicks on a new page, the method receives a new page number.
   
   c. To map each page number to a list item, we created pageNumbers array based on dividing the totalProfiles by profilesPerPage. Assuming that we have 10 profiles and we want to display 5 profiles for each page, we will get 2 page numbers.
   
   d. Using Math.ceil method to avoid having floating point number as a result of division we used.
   
   e.handlePageChange sets the current page number.
   
   f. To display developers on each page using slice currentProfiles depending on indexOfLastProfile and indexOfFirstProfile.
   

Back-end:
-Getting Profiles from /api/profile route, uising axios.get('/api/profile') method.

[ghost]

I did So:
I worked on the file client\src\components\profiles\Profiles.js
so my work is just forntend and it works as what they requested.

- The idea:
we already have a component Profiles.js where we are displaying all the profiles from iets State. So
we can filter the state to get/render just what we are looking for.

- steps:

1. Added a search Field to the component Profiles.js.
2. Added a state for the search field, so we can save the search Field Value in it.
3. Wrote a function to filter the Profiles depending on the search Field Value.
4. Saved the result of the function in an array.
5. Rendering the array in stade of rendering the originals Profiles.

- To improve:

1. Build that search field in a separated component. so we can use it any where in the site, in case that might happen in the future. So for now we are having live search for developers. but what if we want to search for post, DO we need then to write new stuffs or just reuse a component.
2. The style must be improved.
3. we can display the total numbers of the found profiles, this number could be next to or under the search field, something like "20 profiles found".

Dear team's members, this was my idea. Please try the App , the config file has already my setting. so you can run it directly on my data base.
in my database I have 11 user, my name as a user and the rest have numeric names :
first
second
third
fourth
fifth
sixth
seventh
eighth
ninth
tenth

---

Thanks.
also in the future we can add pagination, so if the result is 50 items, then we can display each 8 items at once on the screen , let us call it page with i items. and next page also 8 items. and we need navigation buttons to navigate between the pages.
something like this packet does:
https://www.npmjs.com/package/react-paginate

[ShyarK]

Added active class on clicking according to the current page!

[ghost]

Until now:

• The core of live search is done.
• The pagination is also done.
• The code testing and enhancing and add beautiful style for pagination done.
• Impeding the pagination's style in our code and delete Bootstrap link. So Bootstrap does not effect the whole app.