Hi all this question is a little less code, and more logic.
I'm building an app where I can filter through different job types and get information on each role. Although I have the info in a DB, i'd like a user to go in, search it and filter it - like Glassdoor almost.
e.g, the user input's the field "Software Engineer" into a search field, what is the best way to handle this request?
{ "title": "Software Engineer", "desc": "Join our Software Engineering Flights team, who manage the API integration and aggregation of airline content within the website. You will be working closely with our Product owners, managers, and UX teams to facilitate sales and merchandising of domestic and international airlines, using state-of-the-art distribution API’s.", "company": "Robert Half", "location": "Melbourne", "tasks": ["Agile: Commercial experience in an agile environment with at least .Net and other languages, but more importantly a strong desire to learn and develop in more than one", " Can provide simple solutions to complex problems: Writing testable, effective and communicative code", "Growth mindset: You're curious and passionate about your work and enjoy learning new things", "Not just a coder: You're interested in the overall business context and creating great user experiences", "Experience in Docker, and Docker orchestration systems (K8S, DC/OS, etc)"], "skills": ["React", "Angular", "AWS", "GCP", "Azure"], "salary": "96000", "style": "Full-Time", "status": "true" }
Really i'm just not sure of the best way to connect this functionality to my backend call. I've established and built an APi to create/get information on these roles, but i'm not sure how to connect it!
Am using MERN stack here, and have my folder structures established well. Everything seems to work just unsure.
Right now I have a component like this:
const InitialSearch_INPUT = () => {
return (
<LeftContainer>
<InteriorLeftContainer>
<Typography variant="h4" color="primary">Let's start searching</Typography>
</InteriorLeftContainer>
<InteriorLeftSearchContainer>
<InteriorLeftSearchBar>
<SearchBar
placeholder="Roles..."
autoFocus
cancelOnEscape
/>
</InteriorLeftSearchBar>
</InteriorLeftSearchContainer>
</LeftContainer>
);
}
export default InitialSearch_INPUT
Please let me know.
Check out my blog post on connecting your React app to your backend: https://schneider-lukas.com/blog/react-connect-rest-api. That should get you started.
Also, for working with forms, I can highly recommend the react-hook-form library: https://react-hook-form.com/. With this library you can get user input that you can then further process using your API services.
When it comes to search one of the the best approaches would be having an onChange event on your input and trigger API call , but we dont want sending too many request (it would harm the server response time) so we have to use Debouce what it actually does is to make sure clinet has typed his desire text and after a defined time (500 ms for example) the search will begin .
With that beign said take a look at example below
export const debounce = (func, delay) => {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
};
const doSearch = debounce(function (value) {
setState({...state,page:0,queryStrings:value});
}, DebounceTime);
considering having this input
<Input placeholder="search" value={search[headCell.id]} onChange={(e)=>{doSearch(headCell.id,e)}}
inputProps={{ 'aria-label': 'description' }} />
i hope you get the point .