React Express MySQL CRUD operations Question? - mysql

Question

I'm developing a basic to do list application utilizing Reactjs, Express, and a MySQL backend database. The application should create, read, update, and delete tasks. I have some questions regarding the update and delete operations. I want to be able to delete and update a task. I have not been able to figure out how to delete a so-called task. So far, I drafted DB's API plus routing for the delete operation within the server.js file and a click event logic within Overview.js component. But, I somehow cannot reference an id or a TASK_ID (AKA the PK) to send in the HTTP request. Refer to the onTaskDelete click event with the fetch API within Overview.js. Keep receiving "400 or Bad response from server" error. I believe, this is where the problem lies. How would I go about getting a delete task to work properly? Any help will be much appreciated! Thanks!
/* App.js */
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.css';
import Scheduler from './Scheduler.js';
import Create from './Create.js';
import Modify from './Modify.js';
import Overview from './Overview.js';
import About from './About.js';
import NotFound from './NotFound.js';
import InternalServer from './InternalServer.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {tasks: [] };
}
componentDidMount() {
fetch('/tasks/get')
.then(response => response.json())
.then(response => this.setState({ tasks: response.data }))
.catch(error => console.error(error))
}
render() {
const { tasks } = this.state;
return (
<div className="App">
<Switch>
<Route exact path='/' render={() => (
<Scheduler tasks={tasks}/>
)}/>
<Route path='/create' render={() => (
<Create/>
)}/>
<Route path='/overview' render={() => (
<Overview tasks={tasks}/>
)}/>
<Route path='/about' render={() => (
<About/>
)}/>
<Route path="/500" component={InternalServer} status={500}/>
<Route path="*" component={NotFound} status={404}/>
</Switch>
</div>
);
}
}
export default App;
/* server.js */
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mysql = require('mysql');
const app = express();
const selectAllTasks = 'SELECT * FROM TASKS';
const selectAllTasksByID = 'SELECT * FROM TASKS WHERE TASK_ID=?';
const selectAllProperties = 'SELECT * FROM PROPERTIES';
const insertTasks = 'INSERT INTO TASKS SET ?';
const delTasks = 'DELETE FROM TASKS WHERE TASK_ID=?';
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '******',
database: 'task_db'
});
conn.connect(error => {
if (error) throw error;
console.log(`Connected!`);
});
console.log(conn);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors());
app.get('/', (request, response) => {
response.send('Go to /tasks to see tasks data');
});
app.get('/tasks/get', (request, response) => {
conn.query(selectAllTasks, (error, results) => {
if (error) {
return response.send(error);
}
else {
return response.json({
data: results
})
}
});
});
app.get('/properties/get', (request, response) => {
conn.query(selectAllProperties, (error, results) => {
if (error) {
return response.send(error);
}
else {
return response.json({
data: results
})
}
});
});
app.post('/tasks/create', (request, response) => {
let data = {
TASK_NAME: request.body.Name,
TASK_DESC: request.body.Desc,
TASK_LOCATION: request.body.Location,
ASSIGNED_TO: request.body.Assign
};
conn.query(insertTasks, data, (error, results, fields) => {
if (error) {
return response.send(error);
}
else {
response.send(JSON.stringify(results));
}
});
});
app.put('/tasks/update', (request, response) => {
/* Need help drafting the code... */
response.send('Tasks update!');
});
app.get('/tasks/:TASK_ID', (request, response) => {
conn.query(selectAllTasksByID, request.params.TASK_ID, (error, results) => {
if (error) {
return response.send(error);
}
else {
response.send(JSON.stringify(results));
}
});
});
app.delete('/tasks/delete:TASK_ID', (request, response) => {
const Id = {id: request.params.TASK_ID};
conn.query(delTasks, [request.body.TASK_ID], Id, (error) => {
if (error) {
return response.send(error);
}
else {
request.flash('Task Deleted Successfully!!! ' + 'ID: ' + request.params.TASK_ID);
response.send(JSON.stringify(results));
response.redirect('/overview');
}
});
});
app.listen(4000, () => {
console.log(`Tasks server listening on port 4000`)
});
/* Overview.js */
import React from 'react';
import TaskBreadcrumb from './TaskBreadcrumb.js';
/* https://dev.to/abdulbasit313/an-easy-way-to-create-a-customize-dynamic-table-in-react-js-3igg */
/* https://www.w3schools.com/howto/howto_js_todolist.asp */
import DoneOutlineIcon from '#material-ui/icons/DoneOutline';
import NotificationsActiveIcon from '#material-ui/icons/NotificationsActive';
import EditIcon from '#material-ui/icons/Edit';
import DeleteIcon from '#material-ui/icons/Delete';
/*import Modal from 'react-modal';*/
import EditModal from './EditModal.js';
import {Helmet} from "react-helmet";
class Overview extends React.Component {
renderTaskData() {
const tasks = this.props.tasks;
return tasks.map(task =>
<tr key={task.TASK_ID}>
<td>{task.TASK_ID}</td>
<td>{task.TASK_NAME}</td>
<td>{task.TASK_DESC}</td>
<td>{task.TASK_LOCATION}</td>
<td>{task.TASK_COMPLETE}</td>
<td>{task.ASSIGNED_TO}</td>
<td>
<button id={task.TASK_ID} className="w3-button" title="Edit Task" onClick={this.onTaskEdit}> <EditIcon /> </button>
<button id={task.TASK_ID} className="w3-button" title="Delete Task" onClick={this.onTaskDelete(task.TASK_ID)}> <DeleteIcon /> </button>
<button id={task.TASK_ID} className="w3-button" title="Task complete" onClick={this.onTaskComplete}> <DoneOutlineIcon /> </button>
<button id={task.TASK_ID} className="w3-button" title="Task reminder" onClick={this.onTaskRemind}> <NotificationsActiveIcon /> </button>
</td>
</tr>
)
}
onTaskComplete() {
console.log("Task Complete!")
}
onTaskDelete(task) {
const tasks = this.props;
console.log("Task Deleted!")
let data = {
Id: task.TASK_ID
};
fetch('/tasks/delete:TASK_ID', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
}).then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
}).then(function(data){
if (data === "success") {
alert('Task record deleted successfully!')
}
}).catch(function(error){
console.log(error)
});
}
onTaskEdit() {
console.log("Task Edited!")
}
onTaskRemind() {
console.log("Task Reminder alert!")
}
render() {
return (
<div className="w3-container">
<Helmet>
<title>Reroot Task Scheduler - Task Overview</title>
</Helmet>
<TaskBreadcrumb/>
<div className="w3-card-4">
<div className="w3-container w3-green">
<h1 className="w3-animate-top">Task Overview:</h1>
</div>
<h3>Property Name:</h3>
<div className="w3-responsive">
<table className="w3-table-all w3-card-4 w3-hoverable w3-centered">
<thead>
<tr className="w3-pale-yellow">
<th>Task ID</th>
<th>Task Name</th>
<th>Task Description</th>
<th>Task Location</th>
<th>Status</th>
<th>Person responsible</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.renderTaskData()}
</tbody>
</table>
</div>
<EditModal/>
</div>
</div>
);
}
}
export default Overview;