I created this app with EJS, Express, Nodejs, and the Yelp API, and I wanted to do it over again using React as the frontend this time since I started learning React. The way the app works is that once the form is submitted, it would load a new page with all the information about a random restaurant. It worked perfectly with EJS, but I'm having trouble getting it to work with React. I used the GET method on the form, but I'm not sure how to use it with React. I keep getting a 401 error every time I submit the form. I didn't really change anything in the backend, so it's basically the same code. I checked it with nodemon, and it does work. I also console logged the api key to see if I get it, and I do get it. I tried different things, and I still can't figure out my problem. If anyone can help, I would really appreciate it!
index.ejs from previous app
<section class="whole">
<form id="myForm" action="/selection" method="GET">
<h3>Location</h3>
<input id="city" type="text" name="cityInput" placeholder="Zip or City & State" required>
//the rest of the input form code
<br>
<input class="button" type="submit" value="Submit">
</form>
REACT:
App.js
import React from 'react'
import Logo from './images/rest6.png'
import "./style.css";
function App() {
const [formData, setFormData] = React.useState(
{
city: "",
price: "",
category: ""
}
)
function handleChange(event) {
const {name, value, type, checked} = event.target
setFormData(prevChoice => {
return {
...prevChoice,
[name]: value
}
})
}
function handleSubmit(event) {
event.preventDefault()
console.log(formData)
fetch(`/selection`)
.then((response) => console.log(response));
}
return (
<form onSubmit={handleSubmit}>
<h3>Location</h3>
<input type="text" name="city" onChange={handleChange} value={formData.city || ""} placeholder="Zip or City & State" />
<h3 className="priceHeader">Price</h3>
<section id="priceSection">
<label className="radioLabel" htmlFor="priceOne">
<input onChange={handleChange} id="priceOne" type="radio" value="1" name="price" checked={formData.price === "1"} required oninvalid="alert('You must fill out the form!');" />
<div className="radioButtons">
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
</div>
</label>
<label className="radioLabel" htmlFor="priceTwo">
<input onChange={handleChange} id="priceTwo" type="radio" value="2" name="price" checked={formData.price === "2"} />
<div className="radioButtons">
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
</div>
</label>
<label className="radioLabel" htmlFor="priceThree">
<input onChange={handleChange} id="priceThree" type="radio" value="3" name="price" checked={formData.price === "3"} />
<div className="radioButtons">
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
</div>
</label>
<label className="radioLabel" htmlFor="priceFour">
<input onChange={handleChange} id="priceFour" type="radio" value="4" name="price" checked={formData.price === "4"} />
<div className="radioButtons">
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
<i className="fa-sharp fa-solid fa-dollar-sign"></i>
</div>
</label>
<label className="radioLabel" htmlFor="priceAll">
<input onChange={handleChange} id="priceAll" type="radio" value="1,2,3,4" name="price" checked={formData.price === "1,2,3,4"} />
<div className="radioButtons">
<p className="radioInputAll">All</p>
</div>
</label>
</section>
<h3 className="categoryHeader">Categories</h3>
<section className="foodType">
<label className="radioLabel">
<input onChange={handleChange} type="radio" value="mexican" name="category" checked={formData.category === "mexican"} required oninvalid="alert('You must fill out the form!');" />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Mexican</p>
</div>
</label>
<label className="radioLabel" htmlFor="mediterranean">
<input onChange={handleChange} type="radio" id="mediterranean" value="mediterranean" name="category" checked={formData.category === "mediterranean"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Mediterranean</p>
</div>
</label>
<label className="radioLabel" htmlFor="sushi">
<input onChange={handleChange} type="radio" id="sushi" value="sushi" name="category" checked={formData.category === "sushi"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Sushi</p>
</div>
</label>
<label className="radioLabel">
<input onChange={handleChange} type="radio" value="pizza" name="category" checked={formData.category === "pizza"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Pizza</p>
</div>
</label>
<label className="radioLabel">
<input onChange={handleChange} type="radio" value="korean" name="category" checked={formData.category === "korean"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Korean</p>
</div>
</label>
<label className="radioLabel">
<input onChange={handleChange} type="radio" value="coffee" name="category" checked={formData.category === "coffee"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Coffee</p>
</div>
</label>
<label className="radioLabel">
<input onChange={handleChange} type="radio" value="burgers" name="category" checked={formData.category === "burgers"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">Burger</p>
</div>
</label>
<label className="radioLabel">
<input onChange={handleChange} type="radio" value="food" name="category" checked={formData.category === "food"} />
<div className="radioButtons categoryButtons">
<p className="radioInputText">None</p>
</div>
</label>
</section>
<br />
<button>Submit</button>
</form>
)
}
export default App;
index.js
require('dotenv').config()
const express = require('express');
const app = express();
const fetch = require('node-fetch');
const yelp = require('yelp-fusion');
const ejs = require('ejs');
const bodyParser = require('body-parser');
app.set(express.static('public'));
const api_key = process.env.API_KEY
app.set('view engine', 'ejs');
app.use(express.static('public'));
//route for index page
app.get("/", function (req, res) {
res.render("index");
});
const port = process.env.PORT || 3001;
console.log("Running on " + port)
app.listen(port, () => {
console.log(`Listening on port ${port}`)
});
let restaurant,
city,
price,
category,
num = 0;
app.get('/selection', (req, res) => {
console.log('running')
city = req.query.city;
price = req.query.price;
category = req.query.category;
console.log(Object.keys(req.query) )
console.log(Object.keys(req.params) )
console.log(Object.keys(req) )
console.log("category: " + category)
console.log("city: " + city)
console.log("price: " + price)
console.log("RES: " + res.locals.user);
const url = `https://api.yelp.com/v3/businesses/search?location=${city}&categories=${category}&price=${price}&sort_by=best_match&limit=50`
console.log(url)
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: `Bearer ${api_key}`
}
};
fetch(url, options)
.then(response => response.json())
.then(response => {
console.log("result: ", response);
num = Math.floor(Math.random() * (Object.keys(response.businesses).length));
console.log(response.businesses[num])
console.log("Number of Choices: " + (Object.keys(response.businesses).length))
console.log("random number: " + num)
restaurant = response.businesses[num]
res.render('rest', {
restaurant: restaurant
})
res.status(200).send(response);
})
.catch(err => {
res.status(401).send(err);
console.error(err)
});
});
fetch(`/selection`)
You aren't adding anything in to the query string here so req.query will be empty on the server-side.
You can easily encode your formData state using URLSearchParams
fetch(`/selection?${new URLSearchParams(formData)}`)
This will produce a URL like /selection?city=Liverpool&price=1&category=pizza (depending on the actual values in your formData state).
401 is an odd choice to set for literally any error that might occur server-side.
Instead, I would log all the appropriate details of the error and respond with a generic downstream API error message with 502 status.
fetch(url, options)
.then((response) => {
if (!response.ok) {
const err = new Error("Downstream API request failed");
err.status = response.status;
err.response = response;
throw err;
}
return response.json();
})
.then((response) => {
// ... as above but you don't want res.render()
})
.catch(async (err) => {
console.error(err.status, await err.response?.text(), err);
res.status(502).send(err);
});