I'm using React for testing connection to the RDS database from my local client and local server. For first few tries, my demo application works perfectly but after few tries, it seems like my code fails to make connection to the database nor wants to make connection to each other. Can anybody tell me what I could've missed in my codes?
ps. I know my code isn't clean. There may exist some unnecessary codes but please ignore them.
I have been constantly testing and I figured out the not responding cycle is getting shorter which I think the problem is related to the cache data (if that makes sense - I'm completely new to react!).
Client
import React, {useState,useEffect} from 'react';
import './App.css';
import Axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
function App() {
const [title, setTitle] = useState('');
const [sAuthor, setAuthor] = useState('');
const [dateTime, setDateTime] = useState('');
const [desc, setDesc] = useState([]);
const submitButton = () => {
console.log("submit")
Axios.post('http://localhost:3001/post', {
time: dateTime,
author: sAuthor,
})
.then((response)=>{
console.log("responsed");
});
Axios.get('http://localhost:3001/get').then((response)=>
{
console.log("got");
setDesc([]);
setDesc(response.data);
enlist();
});
}
const enlist = () => {
console.log("enlist");
console.log(desc)
desc.map((val)=>{
return <h2>"STOCK NAME:"</h2>
})
}
useEffect(()=>
{
Axios.get('http://localhost:3001/get').then((response)=>
{});
},[])
useEffect(()=>
{
console.log(desc);
})
return (
<div className="App">
<h1>CRUD APPLICATION</h1>
<div className="form">
<input type = "text" name = "AI_TITLE" onChange={(e)=>{
setTitle(e.target.value)}}/>
<h3>TITLE</h3>
<input type = "text" name = "AI_AUTHOR" onChange = {(e)=>{
setAuthor(e.target.value)}}/>
<h3>STOCK NAME</h3>
<DatePicker format={"yyyy-MM-DD"} selected={dateTime} onChange={(date) => setDateTime(date)} />
<button className = "button" onClick={submitButton} >submit</button>
{desc.map((val)=>{
return (
<h1>STOCK: {val.AI_STOCKCD}</h1>
)
})}
</div>
</div>
);
}
export default App;
Server
const express = require('express');//create express server
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');
app.use(cors());
const db = mysql.createPool({
host: 'somehost',
user: 'someuser',
password: 'somepassword',
port: 0000,
database: 'smms2'
})
app.use(express.json())
app.use(express.urlencoded({extended: true}));
var author = "";
var time = "";
// recieving request from client
app.post("/post",(req, res)=>{
author = req.body.author;
time = req.body.time;
console.log(1)
console.log(author)
console.log(time)
})
// sending request to db
app.get("/get",(req, rows, fields)=>{
const sqlSelect = "SELECT * FROM ai_board WHERE UPDATE_DT > '"+time+"' AND AI_AUTHOR = '" + author+ "';";
db.query(sqlSelect, (err, result) =>{
rows.send(result);
});
})
app.listen(3001, ()=>{
console.log("running on port 3001");
})
package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"devStart": "nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mariadb": "^2.5.3",
"mysql": "^2.18.1",
"nodemon": "^2.0.7"
}
}