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?

1. Save the input with the useEffect hook, and query the DB with axios on a get request by a key? What would the syntax look like? My data looks like this:

{ "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.

CodePudding user response：

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.

CodePudding user response：

When in come 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 onChange 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 .