remchi / bookworm-react Goto Github PK
View Code? Open in Web Editor NEWSource code for free live-coding series on YouTube
Home Page: https://www.youtube.com/watch?v=Pi5apIbuiYg&list=PLuNEz8XtB51KthRFiVtI8cmXNL9qlQJ5U
Source code for free live-coding series on YouTube
Home Page: https://www.youtube.com/watch?v=Pi5apIbuiYg&list=PLuNEz8XtB51KthRFiVtI8cmXNL9qlQJ5U
decode() doesn't verify the authenticity of the jwt from localStorage (in index.js), so PrivateRoutes might be accessible with a forged jwt
Can I ask you why in the LoginForm.js we need the onChange
method and why we can't get data from the form onSubmit
?
I think it's really expensive to update the state everytime a user change an input, isn't it?
https://github.com/Remchi/bookworm-react/blob/master/src/components/forms/LoginForm.js#L17-L20
Can't we do something like this instead?
onSubmit = e => {
this.setState({
data: { email: document.getElementById("email").value, password: document.getElementById("password").value }
});
}
Maybe something more beautiful...?
I don't know why but my page refreshed after I clicked on login button even when my fields are not validate. I set e.preventDefault()
to onSubmit
function and put errors on console.log
, when my fields are not validate console.log
print right error messages but when every field are valid console.log
print undefined.
onSubmit = (e) => {
const errors = this.validate(this.state.data);
this.setState({ errors });
e.preventDefault();
console.log('Err: ' + errors.email + ", " + errors.password)
};
validate = (data) => {
const errors = {};
if(!Validator.isEmail(data.email)) {
errors.email = "invalid email";
}
if (!data.password) {
errors.password = "Can't be blank";
}
return errors;
};
Nice tutorial, this really helped me to understand better how react works.
Can you explain how can we do an oauth2 login? I know how to do that in backend, but never did it at de client side.
POST http://localhost:3000/api/users 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:58
Axios.(anonymous function) @ Axios.js:78
wrap @ bind.js:9
signup @ api.js:7
(anonymous) @ users.js:4
(anonymous) @ index.js:11
(anonymous) @ bindActionCreators.js:3
SignupPage._this.submit @ SignupPage.js:8
SignupForm._this.onSubmit @ SignupForm.js:32
apply @ _apply.js:15
baseInvoke @ _baseInvoke.js:21
apply @ _apply.js:16
(anonymous) @ _overRest.js:32
handleSubmit @ Form.js:122
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4477
batchedUpdates$1 @ react-dom.development.js:16660
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4556
interactiveUpdates$1 @ react-dom.development.js:16715
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
SignupForm.js:54 Uncaught TypeError: Cannot read property 'email' of undefined
at SignupForm.render (SignupForm.js:54)
at finishClassComponent
TypeError: Cannot read property 'catch' of undefined
LoginForm.onSubmit
C:/xampp/htdocs/bookworm-app/src/component/Forms/LoginForm.js:27
this.setState({ errors });
if (Object.keys(errors).length === 0) {
this.setState({ loading: true });
this.props
.submit(this.state.data)
.catch(err =>this.setState({ errors: err.response.data.errors, loading: false }));
}
Hello, when I try to save a book i get this error,
TypeError: Cannot read property 'catch' of undefined
BookForm._this.onSubmit
C:/code/bookworm/src/components/forms/BookForm.js:55
52 | this.setState({ errors });
53 | if (Object.keys(errors).length === 0) {
54 | this.setState({ loading: true });
55 | this.props
56 | .submit(this.state.data)
57 | .catch(err =>
58 | this.setState({ errors: err.response.data.errors, loading: false })
I run mongo db in cmd windows like this :
C:\Program Files\MongoDB\Server\3.4\bin\mongod --dbpath C:\code\bookworm-api --port 27017
Hey, I am interested in knowing that what plugin you were using in the videos of this project. I was seeing the videos and I noticed that all the code was being automatically formatted on save whether it is HTML, js or jsx.
You pronounced the name but I am not getting clearly. I searched for it but no luck.
Please tell me. Thanx.
This feature includes a lot of small tasks:
Hi Remchi, Need mysql with express js for bookworm react
Hi ,
In server side middleware routing call is not working. It works well without routing. I am using express 4.16.4, node 10.15.2.
index.js
import express from "express";
import path from "path";
import mongoose from "mongoose";
import bodyParser from "body-parser";
import auth from "./routes/auth";
const app = express();
// app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
mongoose.connect("mongodb://localhost/bookworm", { useNewUrlParser: true });
console.log("post request");
app.use("api/auth", auth);
// app.post("/api/auth", (req, res) => {
// res.status(400).json({ errors: { global: "Invalid Credentials" } });
// });
app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"));
});
app.listen(8080, () => console.log("Running on localhost:8080"));
auth.js
import express from "express";
import User from "../models/User";
const router = express.Router();
router.route("/").post((req, res) => {
const { credentials } = req.body;
console.log(req.body);
User.findOne({ email: credentials.email }).then(user => {
if (user) {
res.json({ success: true });
} else {
res.status(400).json({ errors: { global: "Invalid Credentials" } });
}
});
});
export default router;
When user Logged in the state of User reducer should update with token and email. But in redux devtool action showing user object having email and token property data from server but state is empty. i am following your tutorial so below are codes the progress i have made up to.
code for api.js
import axios from 'axios'
export default {
user:{
login:(credential) => axios.post('/api/auth',{credential}).then(res => res.data.user)
}
}
code for auth.js
import {USER_LOGGED_IN} from '../types'
import api from '../api'
export const userLoggedIn = user => ({
type: USER_LOGGED_IN,
user
});
export const login = (credential) =>(dispatch) => api.user.login(credential).then(user => dispatch(userLoggedIn(user)))
code for reducer user.js
import { USER_LOGGED_IN } from "../types";
const initailState = {
email:'',
token:''
}
export default function user(state = initailState, action = {}) {
switch (action.type) {
case USER_LOGGED_IN:
return action.user;
default:
return state;
}
}
rootreducer code
import { combineReducers } from "redux";
import user from "./reducers/user";
// import books from "./reducers/books";
export default combineReducers({
user:()=>({})
});
Unhandled Rejection (TypeError): Cannot read property 'push' of undefined
at line
submit=(data)=>this.props.login(data).then(()=>this.props.histroy.push("/"))
Please Check.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.