The developer for a project I'm working on left with only partially completing the front-end and back-end and now I'm trying to connect the Node/Express back-end to the React/Redux front-end in time for the project deadline.
The app has a series of drop-downs with a category value (i.e. medical care, counselling, etc.), and once they're all selected and submitted, a Postgres database is queried with said inputs to return all relevant results meeting the users criteria in a series of cards to the user.
The main issue left (which I've identified using Redux dev tools), is that although the query goes through successfully, the action does not update the 'data' property of the state (which should hold an array of services queried).
I've included the code for the reducer that updates the state, as well as the relevant request in the back-end server.js file.
Reducer.js
const leftSidebarReducer = (state = initialState, action ) => {
async function categoryQuery(json)
await fetch('/category_query', { //post request in Server.js
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: json //currently returns the user inputs
})
.then(function(response){
return response.json(); //**Data I want in store here**
})
.catch(err => console.log(err));
}
//--- Further down in the Reducer: ---//
case actionTypes.QUERY_DB:
var newdata = [];
var testStr = JSON.stringify({
cat: state.leftMenu.catDrop,
subCat: state.leftMenu.subCatDrop,
insCat: state.leftMenu.insDrop,
langCat: state.leftMenu.langDrop,
});
categoryQuery(testStr) //Run the async function above with state values
return {
...state,
data: newdata //Where the data should be updating ***
}
Server.js
app.post('/category_query', (req, res) => { //this is the main category query
console.log(req); //this is an attempt to see if we receive the reqs
db.any(
`SELECT * FROM med_services
WHERE cat_name = $1 AND subCat = $2 AND insurance = $3`
,['Medical Care', 'clinic', 'blue-cross']
//normally would be [req.body.cat, req.body.subCat, req.body.insCat]
)
.then(data => {
console.log('DATA:', data); // print data;
res.send(data);
console.log('category query sent successfully')
})
.catch(error => {
res.send('Error processing query');
})
});
The main issue here is that where the reducer sets data: newData, I'm instead receiving an empty array (i.e. data: []) instead of an array of values from the database.
Another issue is actually passing in the request body into pg-promise (for which I'm only using typed in string values to test at the moment).
WHERE cat_name = $1 AND subCat = $2 AND insurance = $3`,['Medical Care', 'clinic', 'blue-cross']
When trying [req.body.cat, etc.] however, I cannot read the property of body from undefined.
