Live Search about class22-project

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!

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.