Commit 6ff42edd authored by LasseKau's avatar LasseKau
Browse files

drag works

-
parent 7177a023
{
"extends": "stylelint-config-standard"
}
\ No newline at end of file
......@@ -4,11 +4,14 @@
display: flex;
flex-direction: column;
justify-content: center;
font-family: sans-serif;
display: -webkit-box;
display: -ms-flexbox;
}
.grab {
cursor: grab;
}
.information {
display: flex;
......
import React, { useState, useEffect } from 'react'
import './App.css';
import Axios from 'axios';
import { useSpring, animated } from "react-spring";
import { useDrag } from "react-use-gesture";
function App() {
export default function App() {
const [name, setName] = useState("");
const [price, setPrice] = useState(0);
const [maker, setMaker] = useState("");
const [review, setReview] = useState("");
const [year, setYear] = useState(0);
const [newPrice, setNewPrice] = useState(0);//state created for changed input
const [carList, setCarList] = useState([]);
//sendData();
// // requesting back from backend, responce variable = data passed through
// useEffect(()=> {
// Axios.get('https://http//localhost:3001/api/get').then((response)=> {
......@@ -22,10 +23,8 @@ 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 addCar = () => {
Axios.post("http://localhost:3001/create", {
......@@ -71,12 +70,9 @@ function App() {
carPrice: newPrice,
}
: val;
})
);
}
);
console.log("updateCar :");
};
......@@ -93,8 +89,8 @@ function App() {
};
return (
<div className="App">
<PullRelease />
<div className="information">
<label>Model:</label>
<input
......@@ -179,7 +175,25 @@ function App() {
);
}
function PullRelease() {
const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }));
//console.log("pulling);
const bind = useDrag(({ down, movement: [mx, my] }) => {
//console.log(down);
set({ x: down ? mx : 0, y: down ? my : 0 });
//console.log("release");
});
return (
<animated.div
{...bind()}
style={{ x, y }}
styles="width:10px;height:10px;background-color:red"
>
<h1 className="grab">Hello CodeSandox</h1>
</animated.div>
);
}
// const submitReview = ()=> {
// Axios.post("http://localhost:3001/api/insert", {
......@@ -237,4 +251,25 @@ function App() {
// );
// }
export default App;
// function sendData() {
// console.log("exporting");
// return (
// <div>
// <PullRelease />
// </div>
// );
// }
// export default function App() {
// console.log("exporting app");
// }
// <App />
// export default function SafeString(string) {
// this.string = string;
// }
// SafeString.prototype.toString = function() {
// return "" + this.string;
// };
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//import { App } from './App';
import App from './App'
ReactDOM.render(
<App />,
<App />,
document.getElementById('root')
);
......@@ -4,6 +4,7 @@ const app = express();
const mysql = require('mysql');
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 }))
......@@ -15,7 +16,6 @@ const db = mysql.createPool({
database: 'cruddb',
});
// // req = require, when we want to get info from frontend
// // res = response, when we want to send info to frontend
......@@ -57,7 +57,6 @@ 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) => {
......@@ -84,7 +83,6 @@ app.delete("/delete/:id", (req, res) => {
});
});
// app.get('/api/get', (req, res) => {
// const sqlSelect =
// "Select * FROM car_reviews"; //selecting all info
......@@ -106,7 +104,6 @@ app.delete("/delete/:id", (req, res) => {
// "INSERT INTO car_reviews (carName, carReview) VALUES (?,?)";
// db.query(sqlInsert, [carName, carReview], (err, result) => {
// console.log("error" + err);
// });
// });
......@@ -131,9 +128,7 @@ app.delete("/delete/:id", (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
});
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