-
diff --git a/auth/client/src/actions/index.js b/auth/client/src/actions/index.js
index 616738f..f153afb 100644
--- a/auth/client/src/actions/index.js
+++ b/auth/client/src/actions/index.js
@@ -13,15 +13,7 @@ export function signinUser({ email, password }) {
return function(dispatch) {
// Submit email/password to the server
axios.post(`${ROOT_URL}/signin`, { email, password })
- .then(response => {
- // If request is good...
- // - Update state to indicate user is authenticated
- dispatch({ type: AUTH_USER });
- // - Save the JWT token
- localStorage.setItem('token', response.data.token);
- // - redirect to the route '/feature'
- browserHistory.push('/feature');
- })
+ .then(response => authUser(dispatch, response))
.catch(() => {
// If request is bad...
// - Show an error to the user
@@ -33,16 +25,24 @@ export function signinUser({ email, password }) {
export function signupUser({ email, password }) {
return function(dispatch) {
axios.post(`${ROOT_URL}/signup`, { email, password })
- .then(response => {
- dispatch({ type: AUTH_USER });
- localStorage.setItem('token', response.data.token);
- browserHistory.push('/feature');
- })
+ .then(response => authUser(dispatch, response))
.catch(response => dispatch(authError(response.data.error)));
}
}
-export function authError(error) {
+
+//refactoring actions optimization, external from (signinUser e signupUser)
+export function authUser(dispatch, response) {
+ // If request is good...
+ // - Update state to indicate user is authenticated
+ dispatch({ type: AUTH_USER });
+ // - Save the JWT token
+ localStorage.setItem('token', response.data.token); // localStorage is a Web API (DOM) we just set a name and pass the token
+ // - redirect to the route '/feature'
+ browserHistory.push('/feature');
+}
+
+export function authError(error) { //this action is external from (signinUser e signupUser) coz it's easier to share with these 2 (so no repeat)
return {
type: AUTH_ERROR,
payload: error
diff --git a/auth/client/src/components/app.js b/auth/client/src/components/app.js
index 8807875..f968714 100644
--- a/auth/client/src/components/app.js
+++ b/auth/client/src/components/app.js
@@ -8,7 +8,7 @@ export default class App extends Component {
return (
- {this.props.children}
+ {this.props.children} {/* has child routes to show*/}
);
}
diff --git a/auth/client/src/components/auth/signin.js b/auth/client/src/components/auth/signin.js
index 0fffc0e..21925dc 100644
--- a/auth/client/src/components/auth/signin.js
+++ b/auth/client/src/components/auth/signin.js
@@ -1,14 +1,14 @@
import React, { Component } from 'react';
-import { reduxForm } from 'redux-form';
-import * as actions from '../../actions';
+import { reduxForm } from 'redux-form';// import the HOC from redux-form
+import * as actions from '../../actions';//import actions creators
class Signin extends Component {
- handleFormSubmit({ email, password }) {
- // Need to do something to log user in
- this.props.signinUser({ email, password });
+
+ componentWillMount() {// clear the server err for every back and forth to the page for renderAlert()
+ this.props.authError('');
}
-
- renderAlert() {
+
+renderAlert() { // show up the err msg if it exists [funct called in render..]
if (this.props.errorMessage) {
return (
@@ -17,12 +17,19 @@ class Signin extends Component {
);
}
}
+
+ handleFormSubmit({ email, password }) {//callback #1
+ // Need to do something to log user in
+ this.props.signinUser({ email, password });//call the action creator
+ }
+
+
render() {
- const { handleSubmit, fields: { email, password }} = this.props;
+ const { handleSubmit, fields: { email, password }} = this.props;//hooks up handleSubmit (method from redux-form to the fields)
return (
-
@@ -45,10 +77,13 @@ class Signup extends Component {
}
}
-function validate(formProps) {
+function validate(formProps) {// the arg is provided by HOC redux-form [and is a obj of the fields-value]
const errors = {};
-
- if (!formProps.email) {
+
+ //console.log(formProps);
+
+ /* keeping this for didactic purpose
+ if (!formProps.email) {
errors.email = 'Please enter an email';
}
@@ -58,7 +93,18 @@ function validate(formProps) {
if (!formProps.passwordConfirm) {
errors.passwordConfirm = 'Please enter a password confirmation';
- }
+ }*/
+
+ //my compressed approach of the above
+ Object.keys(formProps).map(field =>
+ {
+ if (!formProps[field]) {
+ //errors[field] = 'Please enter ' + (field === 'email' ? 'an ' : 'a ') + field;
+ errors[field] = `Please enter ${(field === 'email' ? 'an ' : 'a ') + splitString(field)}`;
+ }
+ }
+ )
+
if (formProps.password !== formProps.passwordConfirm) {
errors.password = 'Passwords must match';
diff --git a/auth/client/src/components/feature.js b/auth/client/src/components/feature.js
index bc71398..d900211 100644
--- a/auth/client/src/components/feature.js
+++ b/auth/client/src/components/feature.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
+//import RequireAuth from './auth/require_auth'; ALT V just in case we want to use the HOC here
class Feature extends Component {
componentWillMount() {
@@ -18,4 +19,5 @@ function mapStateToProps(state) {
return { message: state.auth.message };
}
-export default connect(mapStateToProps, actions)(Feature);
+export default connect(mapStateToProps, actions)(Feature);
+// ALT V just in case we wanna use HOC here not in the route, wrap like this RequireAuth(Feature)
diff --git a/auth/client/src/components/header.js b/auth/client/src/components/header.js
index e6c4166..29f76ea 100644
--- a/auth/client/src/components/header.js
+++ b/auth/client/src/components/header.js
@@ -11,7 +11,7 @@ class Header extends Component {
} else {
// show a link to sign in or sign up
- return [
+ return [ // returns an array of li (so don't have err without div, rendering multiple items at the same level)
Sign In
,
diff --git a/auth/client/src/index.js b/auth/client/src/index.js
index 1ec27bf..e7d9f9f 100644
--- a/auth/client/src/index.js
+++ b/auth/client/src/index.js
@@ -16,13 +16,13 @@ import reducers from './reducers';
import { AUTH_USER } from './actions/types';
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
-const store = createStoreWithMiddleware(reducers);
+const store = createStoreWithMiddleware(reducers); // create store outside to get it before check the token
const token = localStorage.getItem('token');
// If we have a token, consider the user to be signed in
if (token) {
// we need to update application state
- store.dispatch({ type: AUTH_USER });
+ store.dispatch({ type: AUTH_USER }); // we can dispatch the action to the reducers [so if user is already auth we know it]
}
ReactDOM.render(
diff --git a/auth/client/src/reducers/auth_reducer.js b/auth/client/src/reducers/auth_reducer.js
index 1e750f9..861d302 100644
--- a/auth/client/src/reducers/auth_reducer.js
+++ b/auth/client/src/reducers/auth_reducer.js
@@ -8,7 +8,7 @@ import {
export default function(state = {}, action) {
switch(action.type) {
case AUTH_USER:
- return { ...state, error: '', authenticated: true };
+ return { ...state, error: '', authenticated: true }; // reset error in case user is auth
case UNAUTH_USER:
return { ...state, authenticated: false };
case AUTH_ERROR:
diff --git a/auth/client/src/reducers/index.js b/auth/client/src/reducers/index.js
index bec4976..5d68c58 100644
--- a/auth/client/src/reducers/index.js
+++ b/auth/client/src/reducers/index.js
@@ -1,9 +1,9 @@
import { combineReducers } from 'redux';
-import { reducer as form } from 'redux-form';
+import { reducer as form } from 'redux-form';// imp the reducer from redux-form and create an alias [... as form] to use a clearer name
import authReducer from './auth_reducer';
const rootReducer = combineReducers({
- form,
+ form,// include the reducer from redux-form [form: form ES6 abbreviation]
auth: authReducer
});
diff --git a/auth/client/style/style.css b/auth/client/style/style.css
index ee7dba2..86d18d1 100644
--- a/auth/client/style/style.css
+++ b/auth/client/style/style.css
@@ -1,3 +1,4 @@
.error {
color: red;
}
+.captext { text-transform: capitalize;}
diff --git a/auth/server/controllers/authentication.js b/auth/server/controllers/authentication.js
index 58898ac..bf5cc1a 100644
--- a/auth/server/controllers/authentication.js
+++ b/auth/server/controllers/authentication.js
@@ -4,13 +4,13 @@ const config = require('../config');
function tokenForUser(user) {
const timestamp = new Date().getTime();
- return jwt.encode({ sub: user.id, iat: timestamp }, config.secret);
+ return jwt.encode({ sub: user.id, iat: timestamp }, config.secret); // sub: and iat: are existing properties of jwt to be setted
}
exports.signin = function(req, res, next) {
// User has already had their email and password auth'd
// We just need to give them a token
- res.send({ token: tokenForUser(req.user) });
+ res.send({ token: tokenForUser(req.user) }); // req.user is returned from our Locastrategy in passport.js
}
exports.signup = function(req, res, next) {
@@ -39,7 +39,7 @@ exports.signup = function(req, res, next) {
user.save(function(err) {
if (err) { return next(err); }
- // Repond to request indicating the user was created
+ // Repond to request indicating the user was created and returning the user token
res.json({ token: tokenForUser(user) });
});
});
diff --git a/auth/server/models/user.js b/auth/server/models/user.js
index 11c93d8..acba23f 100644
--- a/auth/server/models/user.js
+++ b/auth/server/models/user.js
@@ -29,7 +29,7 @@ userSchema.pre('save', function(next) {
});
});
-userSchema.methods.comparePassword = function(candidatePassword, callback) {
+userSchema.methods.comparePassword = function(candidatePassword, callback) { // attach a new funct to our schema
bcrypt.compare(candidatePassword, this.password, function(err, isMatch) {
if (err) { return callback(err); }
diff --git a/auth/server/router.js b/auth/server/router.js
index 28dc265..901366e 100644
--- a/auth/server/router.js
+++ b/auth/server/router.js
@@ -2,11 +2,11 @@ const Authentication = require('./controllers/authentication');
const passportService = require('./services/passport');
const passport = require('passport');
-const requireAuth = passport.authenticate('jwt', { session: false });
+const requireAuth = passport.authenticate('jwt', { session: false });// session: false means we don't want cookies set (we use jwt)
const requireSignin = passport.authenticate('local', { session: false });
module.exports = function(app) {
- app.get('/', requireAuth, function(req, res) {
+ app.get('/', requireAuth, function(req, res) { // we say to use the requireAuth (we create above) to handle this route req before sendig a res
res.send({ message: 'Super secret code is ABC123' });
});
app.post('/signin', requireSignin, Authentication.signin);
diff --git a/auth/server/services/passport.js b/auth/server/services/passport.js
index dc8d776..3de62eb 100644
--- a/auth/server/services/passport.js
+++ b/auth/server/services/passport.js
@@ -6,17 +6,17 @@ const ExtractJwt = require('passport-jwt').ExtractJwt;
const LocalStrategy = require('passport-local');
// Create local strategy
-const localOptions = { usernameField: 'email' };
+const localOptions = { usernameField: 'email' }; // just to set that if it searchs for user has to loook at email
const localLogin = new LocalStrategy(localOptions, function(email, password, done) {
// Verify this email and password, call done with the user
// if it is the correct email and password
// otherwise, call done with false
User.findOne({ email: email }, function(err, user) {
- if (err) { return done(err); }
- if (!user) { return done(null, false); }
+ if (err) { return done(err); }// err in the operation
+ if (!user) { return done(null, false); } // no err but email (so user) not found
// compare passwords - is `password` equal to user.password?
- user.comparePassword(password, function(err, isMatch) {
+ user.comparePassword(password, function(err, isMatch) { //comparePassword is a method we created in user
if (err) { return done(err); }
if (!isMatch) { return done(null, false); }
@@ -27,22 +27,22 @@ const localLogin = new LocalStrategy(localOptions, function(email, password, don
// Setup options for JWT Strategy
const jwtOptions = {
- jwtFromRequest: ExtractJwt.fromHeader('authorization'),
- secretOrKey: config.secret
+ jwtFromRequest: ExtractJwt.fromHeader('authorization'),//where to find the jtw (in this case header-authorization from the request)
+ secretOrKey: config.secret //what to use to decript the token (so we can have the user id back)
};
// Create JWT strategy
const jwtLogin = new JwtStrategy(jwtOptions, function(payload, done) {
// See if the user ID in the payload exists in our database
- // If it does, call 'done' with that other
+ // If it does, call 'done' with that user
// otherwise, call done without a user object
- User.findById(payload.sub, function(err, user) {
- if (err) { return done(err, false); }
+ User.findById(payload.sub, function(err, user) {// payload is the obj created with jwt.encode attached to the token in the db
+ if (err) { return done(err, false); } // if there is an err and we cannot find user (coz of the err)
if (user) {
- done(null, user);
+ done(null, user);// there is no err an we find a user
} else {
- done(null, false);
+ done(null, false);// there is no err but we don't find the user
}
});
});
diff --git a/hoc/index.html b/hoc/index.html
index 22a662b..ac29ebf 100644
--- a/hoc/index.html
+++ b/hoc/index.html
@@ -3,7 +3,6 @@
-
diff --git a/hoc/src/components/app.js b/hoc/src/components/app.js
index 8807875..06d6f87 100644
--- a/hoc/src/components/app.js
+++ b/hoc/src/components/app.js
@@ -8,7 +8,7 @@ export default class App extends Component {
return (
- {this.props.children}
+ {this.props.children} {/* this coz the route of "resorces" component is called as child-route in the "App" component */}
);
}
diff --git a/hoc/src/components/header.js b/hoc/src/components/header.js
index b91771f..2e41b82 100644
--- a/hoc/src/components/header.js
+++ b/hoc/src/components/header.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import * as actions from '../actions';
class Header extends Component {
- authButton() {
+ authButton() { // uses a function to return the right piece of component
if (this.props.authenticated) {
return ;
}
diff --git a/hoc/src/components/require_authentication.js b/hoc/src/components/require_authentication.js
index 23c2523..078ff7a 100644
--- a/hoc/src/components/require_authentication.js
+++ b/hoc/src/components/require_authentication.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
-export default function(ComposedComponent) {
+export default function(ComposedComponent) { // as a HOC export a function with a class and not just a class
class Authentication extends Component {
- static contextTypes = {
+ static contextTypes = { // you have to create a contextTypes to get access here at the context (that is like props but accessible from everywhere)
router: React.PropTypes.object
}
@@ -13,14 +13,14 @@ export default function(ComposedComponent) {
}
}
- componentWillUpdate(nextProps) {
+ componentWillUpdate(nextProps) { // nextProps is a reference to the props when tehre's an update (life cicle method componentWillUpdate works so)
if (!nextProps.authenticated) {
this.context.router.push('/');
}
}
render() {
- return
+ return // the HOC will render the passed component to compose, that can use props as an usual one
}
}
@@ -28,5 +28,5 @@ export default function(ComposedComponent) {
return { authenticated: state.authenticated };
}
- return connect(mapStateToProps)(Authentication);
+ return connect(mapStateToProps)(Authentication); // so 'connect' compose 'Authentication' that compose te passed component (so 2 nested HOC)
}
diff --git a/hoc/src/index.js b/hoc/src/index.js
index 97718b6..cd1aa6d 100644
--- a/hoc/src/index.js
+++ b/hoc/src/index.js
@@ -15,7 +15,7 @@ ReactDOM.render(
-
+ {/* this is a nested route so the component will show just for the child route [and requireAuth is the HOC we created that augments the 'Resources' component ] */}
diff --git a/middlewares/index.html b/middlewares/index.html
index 22a662b..ac29ebf 100644
--- a/middlewares/index.html
+++ b/middlewares/index.html
@@ -3,7 +3,6 @@
-
diff --git a/middlewares/src/components/user_list.js b/middlewares/src/components/user_list.js
index ffecf3b..5cf7633 100644
--- a/middlewares/src/components/user_list.js
+++ b/middlewares/src/components/user_list.js
@@ -9,7 +9,7 @@ class UserList extends Component {
renderUser(user) {
return (
-
- {this.props.users.map(this.renderUser)}
+ {this.props.users.map(usr => this.renderUser(usr))} {/*is the same to call the callback map funct as [.map(this.renderUser]*/}
);
}
diff --git a/middlewares/src/index.js b/middlewares/src/index.js
index bdecc8c..cea0116 100644
--- a/middlewares/src/index.js
+++ b/middlewares/src/index.js
@@ -7,7 +7,7 @@ import App from './components/app';
import reducers from './reducers';
import Async from './middlewares/async';
-const createStoreWithMiddleware = applyMiddleware(Async)(createStore);
+const createStoreWithMiddleware = applyMiddleware(Async)(createStore); // compose the store with middlewares
ReactDOM.render(
diff --git a/middlewares/src/middlewares/async.js b/middlewares/src/middlewares/async.js
index 9f39577..4f50f76 100644
--- a/middlewares/src/middlewares/async.js
+++ b/middlewares/src/middlewares/async.js
@@ -5,7 +5,7 @@ export default function({ dispatch }) {
// we dont care about it, send it on
if (!action.payload || !action.payload.then) {
return next(action);
- }
+ } // This case hadle no just another potential action that we don't want to treat here, but also the same(new) action in the new 'state' [and that's why we don't check for the action.type]
// Make sure the action's promise resolves
action.payload
@@ -13,7 +13,7 @@ export default function({ dispatch }) {
// create a new action with the old type, but
// replace the promise with the reponse data
const newAction = { ...action, payload: response };
- dispatch(newAction);
+ dispatch(newAction); /* dispatch the new action to the top of the middleware stack (so the action will be evalueted again and do some other operation if/when needed [not this one the case now but you never know]) and finally goes to reducers*/
});
}
}
diff --git a/middlewares/src/reducers/users.js b/middlewares/src/reducers/users.js
index 37f4383..f54d79f 100644
--- a/middlewares/src/reducers/users.js
+++ b/middlewares/src/reducers/users.js
@@ -5,7 +5,7 @@ import {
export default function(state = [], action) {
switch (action.type) {
case FETCH_USERS:
- return [ ...state, ...action.payload.data ];
+ return [ ...state, ...action.payload.data ]; // spread operator combine the prev state with the new one (payload)
}
return state;
diff --git a/testing/src/components/comment_list.js b/testing/src/components/comment_list.js
index 1032c89..0e2c78a 100644
--- a/testing/src/components/comment_list.js
+++ b/testing/src/components/comment_list.js
@@ -10,7 +10,7 @@ const CommentList = (props) => {
};
function mapStateToProps(state) {
- return { comments: state.comments };
+ return { comments: state.commenti }; // it takes state.commenti and assigns to comments from use here as props
}
export default connect(mapStateToProps)(CommentList);
diff --git a/testing/src/reducers/index.js b/testing/src/reducers/index.js
index b44a7b8..1825202 100644
--- a/testing/src/reducers/index.js
+++ b/testing/src/reducers/index.js
@@ -2,7 +2,9 @@ import { combineReducers } from 'redux';
import commentsReducer from './comments';
const rootReducer = combineReducers({
- comments: commentsReducer
+ //commenti: (state = []) => state
+ commenti: commentsReducer
+
});
export default rootReducer;
diff --git a/testing/test/components/comment_list_test.js b/testing/test/components/comment_list_test.js
index 27fb515..8fee425 100644
--- a/testing/test/components/comment_list_test.js
+++ b/testing/test/components/comment_list_test.js
@@ -5,7 +5,7 @@ describe('CommentList', () => {
let component;
beforeEach(() => {
- const props = { comments: ['New Comment', 'Other New Comment'] };
+ const props = { commenti: ['New Comment', 'Other New Comment'] }; // it uses the real state 'commenti' and not the prorp from mapStateToProps of the component rendered
component = renderComponent(CommentList, null, props);
});
diff --git a/testing/test/test_helper.js b/testing/test/test_helper.js
index 08bbc3c..778d074 100644
--- a/testing/test/test_helper.js
+++ b/testing/test/test_helper.js
@@ -14,26 +14,26 @@ global.document = jsdom.jsdom('');
global.window = global.document.defaultView;
const $ = jquery(global.window);
-// build 'renderComponent' helper that should render a given react class
+// build 'renderComponent' helper that should render a given react class
function renderComponent(ComponentClass, props, state) {
- const componentInstance = TestUtils.renderIntoDocument(
+ const componentInstance = TestUtils.renderIntoDocument( // this testutil method create the component ready to be use in a DOM later [complete also with state and props passed by the main funct 'renderComponent']
);
- return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML
+ return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML [in the specified DOM, in this case that one created by jsdom and warpped in jquery]
}
// Build helper for simulating events
-$.fn.simulate = function(eventName, value) {
+$.fn.simulate = function(eventName, value) { //$.fn. creates a new jquery method for our jquery instance
if (value) {
- this.val(value);
+ this.val(value);// this is the jquery obj and the jq method .val(value) sets the value passed, nothing new here
}
- TestUtils.Simulate[eventName](this[0]);
+ TestUtils.Simulate[eventName](this[0]); // refer to react-addons-test-utils doc to undurstend this [react doc - addons - testutil]
}
// Set up chai-jquery
-chaiJquery(chai, chai.util, $);
+chaiJquery(chai, chai.util, $); // chaijq set up function, see doc if you want
export { renderComponent, expect };