Commit 220eb1c9 authored by LasseKau's avatar LasseKau
Browse files

update

-
parent 0311b76f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
......@@ -24,12 +22,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
......@@ -39,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>
</html>
\ No newline at end of file
{
"extends": "stylelint-config-standard"
}
\ No newline at end of file
.App {
display: flex;
flex-direction: column;
......
......@@ -12,15 +12,15 @@ function App() {
const [newPrice, setNewPrice] = useState(0);//state created for changed input
const [carList, setCarList] = useState([]);
const [carList, setCarList] = useState([]);
// // requesting back from backend, responce variable = data passed through
// useEffect(()=> {
// Axios.get('https://http//localhost:3001/api/get').then((response)=> {
// console.log(response.data);
// Set.CarReviewList(response.data);
// });
// }, []);
// // requesting back from backend, responce variable = data passed through
// useEffect(()=> {
// Axios.get('https://http//localhost:3001/api/get').then((response)=> {
// console.log(response.data);
// Set.CarReviewList(response.data);
// });
// }, []);
//when the backend is requesting the name of the body from the backend,
......@@ -28,7 +28,7 @@ function App() {
const addCar = () => {
Axios.post("http://localhost:3001/create", {
carName: name,
carYear: year,
carMaker: maker,
......@@ -59,26 +59,26 @@ function App() {
Axios.put("http://localhost:3001/update", { price: newPrice, id: id }).then(
(response) => {
setCarList(
carList.map((val) => {
return val.id == id //===
? {
id: val.id,
carName: val.name,
carMaker: val.maker,
carYear: val.year,
carReview: val.review,
carPrice: newPrice,
}
id: val.id,
carName: val.name,
carMaker: val.maker,
carYear: val.year,
carReview: val.review,
carPrice: newPrice,
}
: val;
})
);
}
);
console.log("updateCar :");
console.log("updateCar :");
};
const deleteCar = (id) => {
......@@ -93,7 +93,7 @@ function App() {
};
return (
<div className="App">
<div className="information">
<label>Name:</label>
......@@ -117,7 +117,7 @@ function App() {
setMaker(event.target.value);
}}
/>
<label>About:</label>
<label>Description:</label>
<input
type="text"
onChange={(event) => {
......@@ -192,7 +192,7 @@ function App() {
// ]);
// console.log("runs");
// }
// const deleteReview = (car) => {
// Axios.delete(`http://localhost:3001/api/delete/${car}`); //deleted objects have to be set within the parameters of the url
// }
......@@ -223,7 +223,7 @@ function App() {
// <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) =>{ //for every delete review we have a different car
// setNewReview(e.target.value)
......
header {
background: lightskyblue;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA;EACI,wBAAA;EACA,aAAA;EACA,uBAAA;AACJ","file":"style.css"}
\ No newline at end of file
header {
background: lightskyblue;
display: flex;
justify-content: center;
}
\ No newline at end of file
......@@ -6,13 +6,13 @@ const port = 3001;
app.use(cors());
app.use(express.json()); //allows to grab information from the frontend, Returns middleware
app.use(express.urlencoded({extended: true}))
app.use(express.urlencoded({ extended: true }))
const db = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'moimoi123',
database: 'cruddb',
host: 'localhost',
user: 'root',
password: 'moimoi123',
database: 'cruddb',
});
......@@ -20,70 +20,70 @@ const db = mysql.createPool({
// // res = response, when we want to send info to frontend
app.post("/create", (req, res) => {
const name = req.body.carName;
const year = req.body.carYear;
const maker = req.body.carMaker;
const review = req.body.carReview;
const price = req.body.carPrice;
//add values
db.query(
"INSERT INTO car_reviews (carName, carYear, carMaker, carReview, carPrice) VALUES (?,?,?,?,?)",
[name, year, maker, review, price],
(err, result) => {
if (err) {
console.log(err);
} else {
res.send("Values Inserted");
}
}
);
});
// //route to get info about existing cars in a json to the frontend from db
app.get("/car_reviews", (req, res) => {
db.query("SELECT * FROM car_reviews", (err, result) => {
const name = req.body.carName;
const year = req.body.carYear;
const maker = req.body.carMaker;
const review = req.body.carReview;
const price = req.body.carPrice;
//add values
db.query(
"INSERT INTO car_reviews (carName, carYear, carMaker, carReview, carPrice) VALUES (?,?,?,?,?)",
[name, year, maker, review, price],
(err, result) => {
if (err) {
console.log(err);
console.log("select car reviews:");
} else {
res.send(result);
res.send("Values Inserted");
}
});
});
//update car price
app.put("/update", (req, res) => {
const id = req.body.id;
const price = req.body.price;
db.query(
"UPDATE car_reviews SET carPrice = ? WHERE id = ?",
[price, id],
(err, result) => {
if (err) {
console.log(err);
// console.log("update backend :");
} else {
res.send(result);
}
}
);
}
);
});
// //route to get info about existing cars in a json to the frontend from db
app.get("/car", (req, res) => {
db.query("SELECT * FROM car_reviews", (err, result) => {
if (err) {
console.log(err);
console.log("select car reviews:");
} else {
res.send(result);
}
});
//delete
app.delete("/delete/:id", (req, res) => {
const id = req.params.id;
db.query("DELETE FROM car_reviews WHERE id = ?", id, (err, result) => {
});
//update car price
app.put("/update", (req, res) => {
const id = req.body.id;
const price = req.body.price;
db.query(
"UPDATE car_reviews SET carPrice = ? WHERE id = ?",
[price, id],
(err, result) => {
if (err) {
console.log(err);
// console.log("deleteID :");
// console.log("update backend :");
} else {
res.send(result);
}
});
}
);
});
//delete
app.delete("/delete/:id", (req, res) => {
const id = req.params.id;
db.query("DELETE FROM car_reviews WHERE id = ?", id, (err, result) => {
if (err) {
console.log(err);
// console.log("deleteID :");
} else {
res.send(result);
}
});
});
// app.get('/api/get', (req, res) => {
// const sqlSelect =
......@@ -115,7 +115,7 @@ app.post("/create", (req, res) => {
// const name = req.params.carName
// const sqlDelete =
// "DELETE FROM car_reviews WHERE carName = ?"; //deletes spesific car name
// db.query(sqlDelete, name, (err, result) => {
// if(err) console.log(err);
// })
......@@ -124,8 +124,8 @@ app.post("/create", (req, res) => {
// const name = body.params.carName;
// const name = body.params.carReview;
// const sqlUpdate = "UPDATE car_reviews SET 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);
// });
......@@ -134,6 +134,6 @@ app.post("/create", (req, res) => {
// 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 working
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