Im currently trying to send a message from my server side and display it in my react front end.
I have tried everything to display the message I use with res.send() but the react fails to receive it can anyone help me point out what I am doing wrong here?
Sample of the front end:
import React, {Component} from 'react';
import axios from 'axios';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
export default class CreateFile extends Component {
constructor(props) {
super(props);
this.onChangeFileDescription = this.onChangeFileDescription.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
file_description: '',
};
this.handleSelect = this.handleSelect.bind(this);
axios
.get("http://localhost:4000/api/isloggedin")
.then(res => {
if (!res.data) {
return this.setState({isloggedin: false});
}
});
}
onChangeFileDescription(e) {
this.setState({
file_description: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
console.log(`Form submitted:`);
console.log(`File Description: ${this.state.file_description}`);
const newFile = {
file_description: this.state.file_description,
}
axios.post('http://localhost:4000/files/add', newFile)
.then(res => console.log(res.data));
this.setState({
file_description: '',
})
}
render() {
return this.state.isloggedin ? (
<div style={{marginTop: 20}}>
<h3>Upload a New File</h3>
<Tabs
id="controlled-tab-example"
activeKey={this.state.key}
onSelect={key => this.setState({key})}
>
<Tab eventKey="audio" title="Audio">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>File Description: </label>
<input type="text"
className="form-control"
value={this.state.file_description}
onChange={this.onChangeFileDescription}
/>
</div>
</Tabs>
</div>
) : (
<h3>Please login</h3>
);
}
}
This is the server side:
Im checking if the submitted form is empty and if it is sending a error back asking users to fill the required field.
const express = require('express');
const bodyParser = require('body-parser');
const fileRoutes = express.Router();
const File = require("../models/fileHandler");
module.exports = function(app) {
app.use(bodyParser.json());
fileRoutes.route('/').get(function (req, res) {
File.find(function (err, files) {
if (err) {
console.log(err);
} else {
res.json(files);
}
});
});
fileRoutes.route('/:id').get(function (req, res) {
let id = req.params.id;
File.findById(id, function (err, file) {
res.json(file);
});
});
fileRoutes.route('/add').post(function (req, res) {
console.log(req.body.file_description);
if (req.body.file_description === ""){
console.log("its empty!");
var result = {"data" :"hello everybody !"}
res.status(200).json({'description': 'description is needed'});
return res.send(result);
}
let file = new File(req.body);
file.save()
.then(file => {
res.status(200).json({'file': 'file added successfully'});
})
.catch(err => {
res.status(400).send('adding new file failed');
});
});
fileRoutes.route('/update/:id').post(function (req, res) {
File.findById(req.params.id, function (err, file) {
if (!file)
res.status(404).send('data is not found');
else
file.file_description = req.body.file_description;
file.file_size = req.body.file_size;
file.file_duration = req.body.file_duration;
file.file_artist = req.body.file_artist;
file.file_bitrate = req.body.file_bitrate;
file.file_codec = req.body.file_codec;
file.file_audioChannels = req.body.file_audioChannels;
file.file_dimensions = req.body.file_dimensions;
file.file_tag = req.body.file_tag;
file.file_colorProfile = req.body.file_colorProfile;
file.file_extension = req.body.file_extension;
file.file_employeeResponsible = req.body.file_employeeResponsible;
file.file_editActive = req.body.file_editActive;
file.file_completed = req.body.file_completed;
file.save().then(file => {
res.json('File updated');
})
.catch(err => {
res.status(400).send("Update not possible");
});
});
});
app.use('/files', fileRoutes);
};
Ok after some digging I managed to solve this issue.
I thought i posted here in case anyone had a similar problem.
So what I did was to check everything with express validator and if there was any problem to send it to the react front end.
And in react front end if the there is any problem received regarding that specific field it will display it on top of the input field.
hope this helps.
{this.state.errors &&
this.state.errors.file_description && <p>{this.state.errors.file_description.msg}
And the complete snippet of the react front end.
import React, {Component} from 'react';
import axios from 'axios';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
export default class CreateFile extends Component {
constructor(props) {
super(props);
this.onChangeFileDescription = this.onChangeFileDescription.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
file_description: ''
};
this.handleSelect = this.handleSelect.bind(this);
axios
.get("http://localhost:4000/api/isloggedin")
.then(res => {
if (!res.data) {
return this.setState({isloggedin: false});
}
});
}
onChangeFileDescription(e) {
this.setState({
file_description: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
console.log(`Form submitted:`);
console.log(`File Description: ${this.state.file_description}`);
const newFile = {
file_description: this.state.file_description
}
axios.post('http://localhost:4000/files/add', newFile)
.then(result => {
if (result.data.errors) {
return this.setState(result.data);
}
return this.setState({
userdata: result.data,
errors: null,
success: true
});
});
this.setState({
file_description: ''
})
}
render() {
return this.state.isloggedin ? (
<div style={{marginTop: 20}}>
<h3>Upload a New File</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>File Description: </label>
<input type="text"
className="form-control"
value={this.state.file_description}
onChange={this.onChangeFileDescription}/>
{this.state.errors &&
this.state.errors.file_description && <p>{this.state.errors.file_description.msg}</p>}
</div>
<label className="form-check-label">Yes</label>
</div>
</div>
<div className="form-group">
<input type="submit" value="Upload File" className="btn btn-primary"/>
</div>
</form>
</Tab>
</Tabs>
</div>
) : (
<h3>Please login</h3>
);
}
}
for the backend I have also tweaked it so if there is any problem it will post that back to the react front end validating with Express validator and using the normal route and post methods.
const express = require('express');
var { check, validationResult } = require("express-validator/check");
const bodyParser = require('body-parser');
const fileRoutes = express.Router();
const File = require("../models/fileHandler");
module.exports = function(app) {
const fileValidation = [
check("file_description")
.not()
.isEmpty()
.withMessage("Description required"),
];
app.use(bodyParser.json());
fileRoutes.route('/').get(function (req, res) {
File.find(function (err, files) {
if (err) {
console.log(err);
} else {
res.json(files);
}
});
});
fileRoutes.route('/:id').get(function (req, res) {
let id = req.params.id;
File.findById(id, function (err, file) {
res.json(file);
});
});
fileRoutes.route('/add').post(fileValidation, function (req, res) {
var errors = validationResult(req);
if (!errors.isEmpty()) {
return res.send({ errors: errors.mapped() });
}else{
console.log("its empty!");
let file = new File(req.body);
file.save()
.then(file => {
res.status(200).json({'file': 'file added successfully'});
})
.catch(err => res.send(err));
}
});
fileRoutes.route('/update/:id').post(function (req, res) {
File.findById(req.params.id, function (err, file) {
if (!file)
res.status(404).send('data is not found');
else
file.file_description = req.body.file_description;
file.save().then(file => {
res.json('File updated');
})
.catch(err => {
res.status(400).send("Update not possible");
});
});
});
app.use('/files', fileRoutes);
};
Related
I've been trying to work on a movie app using the MERN stack. After having a few issues regarding the backend of one the features, I went back through my code and realised it doesnt seem that the jwt is being recieved after login. I have no issues with the signup and login other that it seemingly not obtaining the jwt
Heres the authJwt file
const jwt = require("jsonwebtoken");
const config = require("../config/auth.config.js");
const db = require("../models");
const User = db.user;
const Role = db.role;
verifyToken = (req, res, next) => {
let token = req.headers["x-access-token"];
if (!token) {
return res.status(403).send({ message: "No token provided!" });
}
jwt.verify(token, config.secret, (err, decoded) => {
if (err) {
return res.status(401).send({ message: "Unauthorized!" });
}
req.userId = decoded.id;
next();
});
};
isAdmin = (req, res, next) => {
User.findById(req.userId).exec((err, user) => {
if (err) {
res.status(500).send({ message: err });
return;
}
Role.find(
{
_id: { $in: user.roles }
},
(err, roles) => {
if (err) {
res.status(500).send({ message: err });
return;
}
for (let i = 0; i < roles.length; i++) {
if (roles[i].name === "admin") {
next();
return;
}
}
res.status(403).send({ message: "Require Admin Role!" });
return;
}
);
});
};
isModerator = (req, res, next) => {
User.findById(req.userId).exec((err, user) => {
if (err) {
res.status(500).send({ message: err });
return;
}
Role.find(
{
_id: { $in: user.roles }
},
(err, roles) => {
if (err) {
res.status(500).send({ message: err });
return;
}
for (let i = 0; i < roles.length; i++) {
if (roles[i].name === "moderator") {
next();
return;
}
}
res.status(403).send({ message: "Require Moderator Role!" });
return;
}
);
});
};
const authJwt = {
verifyToken,
isAdmin,
isModerator
};
module.exports = authJwt;
Heres the user routes file. When I go to http://localhost:8081//api/test/user after logging in, it displays the message "No token provided!"
const { authJwt } = require("../middlewares");
const controller = require("../controllers/user.controller");
module.exports = function(app) {
app.use(function(req, res, next) {
res.header(
"Access-Control-Allow-Headers",
"x-access-token, Origin, Content-Type, Accept"
);
next();
});
app.get("/api/test/all", controller.allAccess);
app.get("/api/test/user", [authJwt.verifyToken], controller.userBoard);
app.get(
"/api/test/mod",
[authJwt.verifyToken, authJwt.isModerator],
controller.moderatorBoard
);
app.get(
"/api/test/admin",
[authJwt.verifyToken, authJwt.isAdmin],
controller.adminBoard
);
};
Here's my server.js file
const express = require("express");
const cors = require("cors");
const dbConfig = require("./app/config/db.config");
const app = express();
var corsOptions = {
origin: "http://localhost:8081"
};
app.use(cors(corsOptions));
// parse requests of content-type - application/json
app.use(express.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
const db = require("./app/models");
const Role = db.role;
db.mongoose
.connect(`mongodb+srv://tami00:MEUxClWqUNbLz359#cluster0.gmvao.mongodb.net/test?retryWrites=true&w=majority`, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => {
console.log("Successfully connect to MongoDB.");
initial();
})
.catch(err => {
console.error("Connection error", err);
process.exit();
});
// simple route
app.use('/api/favourite', require('./app/routes/favourite.routes'));
// routes
// require(".app/routes/favourite.routes")(app);
require("./app/routes/auth.routes")(app);
require("./app/routes/user.routes")(app);
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
function initial() {
Role.estimatedDocumentCount((err, count) => {
if (!err && count === 0) {
new Role({
name: "user"
}).save(err => {
if (err) {
console.log("error", err);
}
console.log("added 'user' to roles collection");
});
new Role({
name: "creator"
}).save(err => {
if (err) {
console.log("error", err);
}
console.log("added 'creator' to roles collection");
});
new Role({
name: "watcher"
}).save(err => {
if (err) {
console.log("error", err);
}
console.log("added 'watcher' to roles collection");
});
}
});
}
FRONTEND
AuthService
import axios from "axios";
const API_URL = "http://localhost:8080/api/auth/";
class AuthService {
login(username, password) {
return axios
.post(API_URL + "signin", {
username,
password
})
.then(response => {
if (response.data.accessToken) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response.data;
});
}
logout() {
localStorage.removeItem("user");
}
register(username, email, password) {
return axios.post(API_URL + "signup", {
username,
email,
password
});
}
getCurrentUser() {
return JSON.parse(localStorage.getItem('user'));;
}
}
export default new AuthService();
Auth Header
export default function authHeader() {
const user = JSON.parse(localStorage.getItem('user'));
if (user && user.accessToken) {
// return { Authorization: 'Bearer ' + user.accessToken }; // for Spring Boot back-end
return { 'x-access-token': user.accessToken }; // for Node.js Express back-end
} else {
return {};
}
}
Login Component
import React, { Component } from "react";
import Form from "react-validation/build/form";
import Input from "react-validation/build/input";
import CheckButton from "react-validation/build/button";
import AuthService from "../services/auth.service";
const required = value => {
if (!value) {
return (
<div className="alert alert-danger" role="alert">
This field is required!
</div>
);
}
};
export default class Login extends Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.onChangeUsername = this.onChangeUsername.bind(this);
this.onChangePassword = this.onChangePassword.bind(this);
this.state = {
username: "",
password: "",
loading: false,
message: ""
};
}
onChangeUsername(e) {
this.setState({
username: e.target.value
});
}
onChangePassword(e) {
this.setState({
password: e.target.value
});
}
handleLogin(e) {
e.preventDefault();
this.setState({
message: "",
loading: true
});
this.form.validateAll();
if (this.checkBtn.context._errors.length === 0) {
AuthService.login(this.state.username, this.state.password).then(
() => {
this.props.history.push("/profile");
window.location.reload();
},
error => {
const resMessage =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
this.setState({
loading: false,
message: resMessage
});
}
);
} else {
this.setState({
loading: false
});
}
}
render() {
return (
<div className="col-md-12">
<div className="card card-container">
<img
src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
alt="profile-img"
className="profile-img-card"
/>
<Form
onSubmit={this.handleLogin}
ref={c => {
this.form = c;
}}
>
<div className="form-group">
<label htmlFor="username">Username</label>
<Input
type="text"
className="form-control"
name="username"
value={this.state.username}
onChange={this.onChangeUsername}
validations={[required]}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<Input
type="password"
className="form-control"
name="password"
value={this.state.password}
onChange={this.onChangePassword}
validations={[required]}
/>
</div>
<div className="form-group">
<button
className="btn btn-primary btn-block"
disabled={this.state.loading}
>
{this.state.loading && (
<span className="spinner-border spinner-border-sm"></span>
)}
<span>Login</span>
</button>
</div>
{this.state.message && (
<div className="form-group">
<div className="alert alert-danger" role="alert">
{this.state.message}
</div>
</div>
)}
<CheckButton
style={{ display: "none" }}
ref={c => {
this.checkBtn = c;
}}
/>
</Form>
</div>
</div>
);
}
}
Here is the backend code for the app.js (express.js)
const express = require( 'express' );
const cors = require ( 'cors' );
const morgan = require ('morgan' );
const fs = require( 'fs' );
const dataPath = './data.json'
const PORT = 3000
//init express
const app = express();
//App middelwear
app.use(express.urlencoded({ extended: true}))
app.use(express.json())
app.use(cors());
app.use(morgan( 'tiny' ));
app.checkout('api', (req, res) => {
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
throw err;
}
res.send(JSON.parse(data));
})
})
//Get
app.get('/api', (req, res) => {
const { title } = req.body;
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
throw err;
}
const dataArray = JSON.parse(data)
const newItem = {
id: dataArray.length + 1,
title
}
dataArray.push(newItem)
fs.writeFile(dataPath, JSON.stringify(dataArray), 'utf8', (err, data) => {
if (err) {
throw err
}
res.send(dataArray)
})
})
})
//Post
app.post('/add', (req, res) => {
const { title } = req.body;
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
throw err;
}
const dataArray = JSON.parse(data)
const newItem = {
id: dataArray.length + 1,
title
}
dataArray.push(newItem)
fs.writeFile(dataPath, JSON.stringify(dataArray), 'utf8', (err, data) => {
if (err) {
throw err
}
res.send(dataArray)
})
})
})
app.put('/edit', (req, res) => {
const { id } = req.params
const { title, description, URL } = req.body
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
throw err
}
let dataArray = JSON.parse(data)
let updateDataArray = []
const newItem = {
id,
title,
description,
URL
}
dataArray.forEach(oldItem => {
if(oldItem.id == id) {
updateDataArray.push(newItem);
}else {
updateDataArray.push(oldItem);
}
})
dataArray = updateDataArray
fs.writeFile(dataPath, JSON. stringify(dataArray), 'utf8', (err, data) => {
if(err) {
throw err;
}
res.send(dataArray)
})
})
})
app.delete('/api/:id', (req, res) => {
const { id } = req.params
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
throw err;
}
})
})
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
Here is the add.js code, it is the file that would add the crud's information to the display.js page:
Frontend component/Add.js
import React from 'react';
import Button from 'react-bootstrap/Button';
// The Add component should be visible when the display componentn is loaded.
class Add_Component extends React.Component {
constructor(props) {
super(props);
this.handleAddIDChange = this.handleAddIDChange.bind(this);
this.handleAddTitleChange =this.handleAddTitleChange.bind(this);
this.handleAddDescriptionChange = this.handleAddDescriptionChange.bind(this);
this.handleAddURLChange = this.handleAddURLChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state={
error:null,
addID:null,
addTitle: "",
addDescription: "",
addURL: ""
};
}
// After input is submitted the state will change of AddID.
handleAddIDChange(event) {
this.setState({addID:event.target.value})
}
// After input is submitted the state of AddTitle will change.
handleAddTitleChange(event) {
this.setState({addName:event.target.value})
}
handleAddDescriptionChange(event) {
this.setState({addDescription:event.target.value})
}
// After the input is submitted the state of AddURL will change.
handleAddURLChange(event) {
this.setState({addURL:event.target.value})
}
handleSubmit(event) {
event.preventDefault();
fetch("/add", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
addID:this.state.addID,
addTitle: this.state.addTitle,
addDescription:this.state.addDescription,
addURL:this.state.addURL
})
})
.then(res => {
res.json()
alert('Entry has been added to the database')
window.location.reload()
})
.then(result => {
window.location.reload()
})
.catch(error => console.log(error))
}
// Return the Web Projects to display it on the screen.
render() {
return(
<div className="ProjectAddForm">
<form id="formAddEntry" onSubmit={this.handleSubmit}>
<h1>Add Project</h1>
<label>Add an unique ID for your new Project entry</label><br/>
<input type="text" placeholder="Example ID: 7" onChange={this.handleAddIDChange} name="addID" id="addID"></input><br/>
<label>Add an unique Title for your new Project entry</label><br/>
<input type="text" placeholder="Example Title: Web Project One" onChange={this.handleAddTitleChange} name="addtitle" id="addID"></input><br/>
<label>Add an unique ID for your new Project entry</label><br/>
<input type="text" placeholder="Example Description: Project using javascript" onChange={this.handleAddIDChange} name="addTitle" id="addTitle"></input><br/>
<label>Add an unique URL for your new Project entry</label><br/>
<input type="text" placeholder="Example URL: www.crudsystem.com" onChange={this.handleAddDescriptionChange} name="addDescription" id="addDescription"></input><br/>
<Button variant="dark" type="submit">Add Project Entry</Button>
</form>
</div>
)
}
}
export default Add_Component;
Here is the display page in the frontend called Display.js
component/Display.js
import React from 'react';
/*The display Component will be called once the submit user
Component is achieved in input. The state is set to null initially.
*/
class Display extends React.Component {
constructor(props) {
super(props);
this.state = {
error:null,
projects: []
};
}
//The data.json file is used for this project it is fetched from the url.
componentDidMount() {
fetch("/api")
.then(res => res.json())
.then(project => this.setState({projects: project}, () => console.log(`User fetched ...`, project)))
.catch(error => {
console.log('Error:', error)
this.setState({error})
});
}
//Render and return, this will be the jsx that will display the projects.\
render() {
return(
<div className="div-Frame">
<h1>Web Projects</h1>
<ul className="projectList">
{this.state.projects.map(project =>
<li key={project.id}>
<h2>Project {project.id}</h2>
<strong>ID:</strong> {project.id} <br/>
<strong>Project Title:</strong> {project.title} <br/>
<strong>Description:</strong> {project.description} <br/>
<strong>URL:</strong> {project.URL}</li>
)}
</ul>
</div>
)
}}
export default Display;
I'm trying to create a crud app for school, but so far the data.json only adds a new id, any help would be appreciated, here is the data.json file
backend,
datad.json
[{"id":1,"title":"Memory Game!","description":"Memory game created using Create React app.","URL":"https://protected-badlands-68828.herokuapp.com/"},{"id":2,"title":"Online store","description":"Online store created with HTML, CSS and JavaScript.","URL":"https://github.com/eriancoet/Capstone/tree/master"},{"id":3},{"id":4},{"id":5},{"id":6},{"id":7},{"id":8},{"id":9}]
as you can see the crud only loads more id's...help please.
So I am trying to redirect after I am deleting the page, it get's deleted from the database but it doesn't redirect me to my homepage. It worked fine when I was using json-server locally, but when I started using Mongoose it wasn't working properly and wasn't redirecting.
The code inside .then isn't working, I tried console.log inside the .then but it didn't log
I am using mongoose as my database
Here is my entire component:
import { useParams } from "react-router-dom";
import useFetch from "../useFetch";
import { useHistory } from "react-router-dom";
import moment from "moment";
import profile_image from "../images/picture.jpg";
const BlogDetails = () => {
let blogDate = moment().format('D MMM YYYY');
const { id } = useParams();
const { data: blog, isPending, errorMsg } = useFetch("http://localhost:5000/postsdata/" + id);
const history = useHistory()
const handleDelete = () => {
fetch('http://localhost:5000/postsdata/' + blog._id, { method: 'DELETE' })
.then(() => {
history.push('/');
})
.catch((err) => console.log(err))
}
return (
<div className="blog-details">
<div className="top-profile">
<div className="top-profile-picture">
<img src={profile_image} alt="profile-pic-top" />
</div>
<div className="top-profile-name">
<p>Vishwajeet Deshmukh</p>
</div>
</div>
{isPending && <div>Loading...</div>}
{errorMsg && <div>{errorMsg}</div>}
{blog && (
<article className="blog-main-content" >
<div className="main-content-header">
<div className="content-title-date">
<h2 className="blogdetails-title">{blog.title}</h2>
<p className="blogdetails-date">{blogDate}</p>
</div>
<div className="content-image">
<img src={blog.imgsrc} alt="" />
</div>
</div>
<div className="blogdetails-body"><p>{`${blog.postBody}`}</p></div>
<button className="blogdetails-delete" onClick={handleDelete}>Delete Me</button>
</article>
)}
</div>
);
};
export default BlogDetails;
Here is my router.js which handles my delete
const express = require('express');
const router = express.Router();
const { Posts } = require("./models");
//<----------------------------------- CRUD OPERATIONS ------------------------------------------>
router.get("/", () => {
console.log("Server Connected");
})
//<---------------------------- Get Posts from Database ---------------------------->
router.get("/postsdata", (req, res) => {
Posts.find((err, data) => {
if (err) {
res.status(500).send(err);
} else {
res.status(201).send(data);
}
return null;
})
})
//<------------- Get Specific Posts from Database --------------->
router.get("/postsdata/:_id", (req, res) => {
const id = req.params._id;
Posts.findById(id, (err, data) => {
if (err) {
res.status(500).send(err);
throw new Error(err)
} else {
res.status(201).send(data);
}
return data;
})
})
//<---------------------------- Post On the Posts Database ---------------------------->
router.post("/postsdata", (req, res) => {
const db = req.body;
Posts.create(db, err => {
if (!err) {
console.log("Posted on Server");
} else {
throw new Error(err)
}
return null
})
})
//<---------------------------- Delete Posts from Database ---------------------------->
router.delete("/postsdata/:id", (req, res) => {
const id = req.params._id
Posts.deleteOne(id, (err, data) => {
if (err) {
console.log(err);
throw new Error(err)
} else {
console.log(data);
}
return null
})
})
module.exports = router;
after deleting the postdata, send a response from the API.
router.delete("/postsdata/:id", (req, res) => {
const id = req.params._id
Posts.deleteOne(id, (err, data) => {
if (err) {
console.log(err);
throw new Error(err)
} else {
return res.status(200).json({status: 'success'}); // try with this
}
return null
})
})
Hello try it with async/await sayntax
const handleDelete = async () => {
await fetch('http://localhost:5000/postsdata/' + blog._id, { method: 'DELETE' });
history.push('/');
}
I'm struggling to debug a problem and I'd appreciate any help the community might be able to offer. I'm building my first React app and have built a working Login feature, but after every successful login the user is forced to hard refresh his/her browser in order see the app in a "logged in" state. There is no error logged to the browser console, but our DevTools monitor shows the following error:
"TypeError: Cannot read property 'setState' of undefined"
What's funny is that the login authentication first succeeds, and then immediately seems to try again and fails. After clicking "login," the user must hard refresh the web page in order to make it appear that the login has worked.
I'm stumped. Can anyone see anything wrong with my code? Thank you very much in advance for taking a look!
Here's our LoginPage jsx file that contains the actual login web form:
import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
export default class LoginPage extends React.Component {
constructor(props) {
super(props);
//bound functions
this.compileFormData = this.compileFormData.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
//component state
this.state = {
email: '',
password: '',
};
}
//update state as email value changes
handleEmailChange(e) {
this.setState({ email: e.target.value });
}
//update state as password value changes
handlePasswordChange(e) {
this.setState({ password: e.target.value });
}
compileFormData() {
const { loginFunction } = this.props;
const formData = this.state;
loginFunction(formData);
}
render() {
return (
<div className="row justify-content-center">
<div className="col-10 col-sm-7 col-md-5 col-lg-4">
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input
type="email"
name="email"
id="userEmail"
placeholder="test#mccre.com"
value={this.state.email}
onChange={this.handleEmailChange}
/>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="userPassword"
placeholder="password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
</FormGroup>
<Button onClick={this.compileFormData}>Log In</Button>
</Form>
</div>
</div>
);
}
}
Here's our login page Container that renders the login page:
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { logUserIn } from '../../actions/authentication';
import LoginPage from './LoginPage';
export class LoginPageContainer extends React.Component {
constructor(props) {
super(props);
//bound functions
this.logUserInFunction = this.logUserInFunction.bind(this);
}
logUserInFunction(userData) {
const { dispatch } = this.props;
dispatch(logUserIn(userData));
}
render() {
const { authentication } = this.props;
if (authentication.isLoggedIn) {
return (
<Redirect to="/" />
);
}
return (
<div>
<LoginPage loginFunction={this.logUserInFunction} />
</div>
);
}
}
function mapStateToProps(state) {
return {
authentication: state.authentication,
};
}
export default connect(mapStateToProps)(LoginPageContainer);
Here's our API endpoint in which we actually make the database query:
const express = require('express');
const mongoose = require('mongoose');
const passport = require('passport');
const User = require('../../models/user.js');
const router = express.Router();
//configure mongoose promises
mongoose.Promise = global.Promise;
//POST to /register
router.post('/register', (req, res) => {
//Create a user object to save, using values from incoming JSON
const newUser = new User({
username: req.body.username,
firstName: req.body.firstName,
lastname: req.body.lastName,
email: req.body.email,
});
//Save, via passport's "register" method, the user
User.register(newUser, req.body.password, (err, user) => {
//If there's a problem, send back a JSON object with the error
if (err) {
return res.send(JSON.stringify({ error: err }));
}
// Otherwise, for now, send back a JSON object with the new user's info
return res.send(JSON.stringify(user));
});
});
//POST to /login
router.post('/login', async (req, res) => {
//look up user by their email
const query = User.findOne({ email: req.body.email });
const foundUser = await query.exec();
//If they exist, they'll have a username, so add that to our body
if (foundUser) {
req.body.username = foundUser.username;
}
passport.authenticate('local') (req, res, () => {
//If logged in, we should have use info to send back
if (req.user) {
return res.send(JSON.stringify(req.user));
}
//Otherwise return an error
return res.send(JSON.stringify({ error: 'There was an error logging in' }));
});
});
//GET to /checksession
router.get('/checksession', (req, res) => {
if (req.user) {
return res.send(JSON.stringify(req.user));
}
return res.send(JSON.stringify({}));
});
//GET to /logout
router.get('/logout', (req, res) => {
req.logout();
return res.send(JSON.stringify(req.user));
});
module.exports = router;
Here's the action file in which we define the logUserIn() function:
import { decrementProgress, incrementProgress } from './progress';
import 'whatwg-fetch';
//Action Creators
export const loginAttempt = () => ({ type: 'AUTHENTICATION_LOGIN_ATTEMPT' });
export const loginFailure = error => ({ type: 'AUTHENTICATION_LOGIN_FAILURE', error });
export const loginSuccess = json => ({ type: 'AUTHENTICATION_LOGIN_SUCCESS', json });
export const logoutFailure = error => ({ type: 'AUTHENTICATION_LOGOUT_FAILURE', error });
export const logoutSuccess = () => ({ type: 'AUTHENTICATION_LOGOUT_SUCCESS' });
export const sessionCheckFailure = () => ({ type: 'AUTHENTICATION_SESSION_CHECK_FAILURE'});
export const sessionCheckSuccess = json => ({ type: 'AUTHENTICATION_SESSION_CHECK_SUCCESS', json });
//Check User Session
export function checkSession() {
return async (dispatch) => {
//contact the API
await fetch(
//where to contact
'/api/authentication/checksession',
//what to send
{
method: 'GET',
credentials: 'same-origin',
},
)
.then((response) => {
if (response.status === 200) {
return response.json();
}
return null;
})
.then((json) => {
if (json.username) {
return dispatch(sessionCheckSuccess(json));
}
return dispatch(sessionCheckFailure());
})
.catch((error) => dispatch(sessionCheckFailure(error)));
};
}
//Log user in
export function logUserIn(userData) {
return async (dispatch) => {
//turn on spinner
dispatch(incrementProgress());
//register that a login attempt is being made
dispatch(loginAttempt());
//contact login API
await fetch(
//where to contact
'http://localhost:3000/api/authentication/login',
//what to send
{
method: 'POST',
body: JSON.stringify(userData),
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
},
).then((response) => {
if (response.status === 200) {
return response.json();
}
return null;
})
.then((json) => {
if (json) {
dispatch(loginSuccess(json));
this.setState({ redirect: true });
} else {
dispatch(loginFailure(new Error('Authentication Failed')));
}
}).catch((error) => {
dispatch(loginFailure(new Error(error)));
});
//turn off spinner
dispatch(decrementProgress());
};
}
//Log user out
export function logUserOut() {
return async (dispatch) => {
//turn on spinner
dispatch(incrementProgress());
//contact the API
await fetch(
//where to contact
'/api/authentication/logout',
//what to send
{
method: 'GET',
credentials: 'same-origin',
},
)
.then((response) => {
if (response.status === 200) {
dispatch(logoutSuccess());
} else {
dispatch(logoutFailure(`Error: ${response.status}`));
}
})
.catch((error) => {
dispatch(logoutFailure(error));
});
//turn off spinner
return dispatch(decrementProgress());;
};
}
Finally, here's the reducer file that is supposed to update the application's state depending on authentication success / failure:
const initialState = {
firstName: '',
id: '',
isLoggedIn: false,
isLoggingIn: false,
lastName: '',
username: '',
};
export default function reducer(state = initialState, action) {
switch (action.type) {
case 'AUTHENTICATION_LOGIN_ATTEMPT': {
const newState = Object.assign({}, state);
newState.isLoggingIn = true;
return newState;
}
case 'AUTHENTICATION_LOGIN_FAILURE':
case 'AUTHENTICATION_SESSION_CHECK_FAILURE':
case 'AUTHENTICATION_LOGOUT_SUCCESS': {
const newState = Object.assign({}, initialState);
return newState;
}
case 'AUTHENTICATION_LOGIN_SUCCESS':
case 'AUTHENTICATION_SESSION_CHECK_SUCCESS': {
const newState = Object.assign({}, state);
newState.firstName = action.json.firstName;
newState.id = action.json._id;
newState.isLoggedIn = true;
newState.isLoggingIn = false;
newState.lastName = action.json.lastName;
newState.username = action.json.username;
return newState;
}
case 'AUTHENTICATION_LOGOUT_FAILURE': {
//todo: hanle error
return state;
}
default: {
return state;
}
}
}
Found the solution: "the this.setState({ redirect: true });" line needed to be removed from the action file.
I'm writing a program where the user inputs a number into a React frontend and a Node.js Express backend gets all possible prime numbers under the user number and responds back with the median element of that prime number array.
Server works and the frontend successfully sends a number to the server, but the server response, when I print it in the console, is:
Promise { <state>: "pending" }
undefined
What am I doing wrong?
Frontend React component:
import React, {Component} from 'react';
class NumberInputField extends Component {
constructor() {
super();
this.state = {
number: 0,
errorText: ''
}
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({[e.target.name]:e.target.value});
}
onError(errText) {
this.setState((previousState, props) => {
return { errorText: errText}
})
}
onSubmit(e) {
e.preventDefault();
console.log("> Submitting form");
//console.log(this.state);
fetch('http://localhost:3000/setprime', {
method: 'POST',
body: JSON.stringify(this.state),
})
.then(r => {
console.log(r.json());
})
.then(data => {
console.log(data);
})
.catch(e => {
console.log(e);
this.onError(e.toString());
})
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input type="text" name="number" onChange={this.onChange}/>
<input type="submit" value="Submit"/>
</form>
<p className="errorLabel">{this.state.errorText}</p>
</div>
);
}
}
export default NumberInputField;
server.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var serverhelpers = require("./serverhelpers");
var cors = require("cors");
app.use(cors());
app.use ( bodyParser.json( { type: "*/*" } ));
app.post("/setprime", (req, res) => {
console.log(req.body);
console.log("Received number " + req.body.number + " from frontend");
let primes = getAllPrimes(req.body.number);
let median = getMedianArray(primes);
console.log("Primes: " + primes);
console.log("Median: " + median);
res.setHeader("Content-type", "application/json");
return res.send(median);
});
app.listen(3000);
console.log("Server listening on port 3000.");
Thank you
the problem is with :
.then(r => {
console.log(r.json());
})
the return value of r.json() is Promise
youhave to return it :
.then(r => {
//console.log(r.json());
return r.json();
})
you should see data logged afterwards.