Commit 6588fb5b authored by LasseKau's avatar LasseKau
Browse files

update

-
parent 6c0c58f1
.App {
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.form {
......@@ -11,8 +12,24 @@
}
.form input {
width: 400px;
width: 600px;
height: 60px;
margin: 10px;
margin: 15px;
font-size: 25px;
}
.card {
width: 560px;
height: 100px;
border: 3px solid black;
border-radius: 15px;
margin: auto;
}
#updateInput {
width: 100px;
height: 30px;
margin-bottom: auto;
}
\ No newline at end of file
......@@ -7,6 +7,7 @@ function App() {
const [carName, setCarName] = useState('')
const [review, setReview] = useState('')
const [carReviewList, setReviewList] = useState([])
const [newReview, setNewReview] = useState([]);
// requesting back from backend, responce variable = data passed through
useEffect(()=> {
......@@ -18,18 +19,29 @@ function App() {
//when the backend is requesting the name of the body from the backend,
//were requesting a variable that is going to be passed by the axios.post
const submitReview = () => {
Axios.post("https://http//localhost:3001/api/insert",
{carName: carName,
carReview: review,
}).then(() => {
alert("successful insert");
});
};
setReviewList([...carReviewList,
{movieName: carName, carReview: review},
])
const submitReview = ()=> {
Axios.post("http://localhost:3001/api/insert", {
carName: carName,
carReview: review,
});
setReviewList([...carReviewList,
{movieName: carName, carReview: review},
]);
console.log("runs");
}
const deleteReview = (car) => {
Axios.delete(`http://localhost:3001/api/delete/${car}`);
}
const updateReview = (movie) => {
Axios.put("http://localhost:3001/api/update", {
carName: movie,
carReview: newReview,
});
setNewReview("")
}
return (
<div className="App">
......@@ -44,16 +56,23 @@ function App() {
<input type="text" name="review" onChange={(e)=> {
setReview(e.target.value)}}/>
<button onClick={submitReview}>Submit</button>
{carReviewList.map((val)=>{
return (
<h1>Car Name: {val.carName} | Car Review: {val.carReview}
</h1>
);
})}
</div>
return (
<div className="card">
<h1>{val.carName}</h1>
<p>{val.carReview}</p>
<button onClick={() =>{deleteReview(val.carName)}}>Delete</button>
<input type="text" id="updateInput" onChange={(e) =>{
setNewReview(e.target.value)
}} />
<button onClick={()=>{ updateReview(val.carName)}} >Update</button>
</div>
)
})}
</div>
</div>
);
}
);
}
export default App;
......@@ -33,7 +33,7 @@ app.post("/api/insert/", (req, res) => { //the request from the body and the nam
const carName = req.body.carName
const carReview = req.body.carReview
//inserting our values
//inserting our values to car_reviews db
const sqlInsert =
"INSERT INTO car_reviews (carName, carReview) VALUES (?,?)";
db.query(sqlInsert, [carName, carReview], (err, result) => {
......@@ -41,9 +41,11 @@ app.post("/api/insert/", (req, res) => { //the request from the body and the nam
});
});
// with "/", it just goes to url. when you say app.get, you pass the route, then the paprameters of a function.
// req = require, when we want to get info from frontend
// res = response, when we want to send info to frontend,
// res = response, when we want to send info to frontend
app.get("/", (req, res)=> {
console.log("inserting");
const sqlInsert = "INSERT INTO `car_reviews` (`carName`, `carReview`) VALUES ('bmw', 'good car');" //testing to see if db is working
......@@ -51,8 +53,32 @@ app.get("/", (req, res)=> {
res.send('hello w0rbv54ld'); //testing sending to server, see if it inserts
})
});
//deleting items from db, method to pass parameters to route
app.delete('/api/delete/:carName', (req, res)=> {
const name = req.params.movieName
const sqlDelete =
"DELETE FROM car_reviews WHERE carName = ?"; //deletes spesific car name
db.query(sqlDelete, name, (err, result) => {
if(err) console.log(err);
})
})
app.put('/api/update', (req, res)=> {
const name = body.params.carName;
const name = body.params.carReview;
const sqlUpdate = "UPDATE SET car_reviews carReview = ? WHERE carName= " // ? is the variable were gonna pass
db.query(sqlUpdate, [review, name], (err, result) => { //instead of passing one name, were gonna pass an array
if(err) console.log(err);
});
})
// we want to listen to server, passing port 3001 since localhost is running 3000
app.listen(port, () => {
console.log("listen to port: " + port); //testing to make sure server is workin
console.log("listen to port: " + port); //testing to make sure server is working
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment