Comments (3)
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:
- Added a search Field to the component
Profiles.js
. - Added a state for the search field, so we can save the search Field Value in it.
- Wrote a function to filter the
Profiles
depending on the search Field Value. - Saved the result of the function in an array.
- Rendering the array in stade of rendering the originals
Profiles
.
- To improve:
- 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.
- The style must be improved.
- 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
from class22-project.
Added active class on clicking according to the current page!
from class22-project.
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.
from class22-project.
Related Issues (13)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from class22-project.