[aplicando redux]

src/components/LengthCaracters/LengthCaracters.js

@@ -1,24 +1,40 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { lengthPassword } from '../../redux/actions';
 import './LengthCaracters.css';
 
-export default class LengthCaracters extends Component {
+class LengthCaracters extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      lengthPassword: '4',
+    }
+  }
+
+  handleLength = ({ target: { value } }) => {
+    const { attLength } = this.props;
+    this.setState({ lengthPassword: value });
+
+    attLength(value);
+  }
 
   render() {
-    const { onChange, length } = this.props;
+    const { lengthPassword } = this.state;
 
     return (
       <section className="main_length">
-        <p className="legend">{`LENGTH: ${ length }`}</p>
+        <p className="legend">{`LENGTH: ${ lengthPassword }`}</p>
         <div className="box_style input_length">
           <span className="min_length">4</span>
           <input
             className="slider"
             type="range"
             min="4"
             max="20"
-            value={ length }
-            onChange={ onChange }
+            value={ lengthPassword }
+            onChange={ this.handleLength }
           />
 
           <span className="max_length">20</span>
@@ -31,6 +47,11 @@ export default class LengthCaracters extends Component {
 }
 
 LengthCaracters.propTypes = {
-  onChange: PropTypes.func,
-  length: PropTypes.string,
+  attLength: PropTypes.func,
 }.isRequired;
+
+const mapDispatchToProps = (dispatch) => ({
+  attLength: (value) => dispatch(lengthPassword(value)),
+})
+
+export default connect(null, mapDispatchToProps)(LengthCaracters);

src/components/Main/Main.js

@@ -1,65 +1,13 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import LengthCaracters from '../LengthCaracters/LengthCaracters';
 import Settings from '../Settings/Settings';
-import letters from '../../data/letters';
 import './Main.css'
 
-export default class Main extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      password: '',
-      lengthPassword: '4',
-      uppercase: false,
-      lowercase: false,
-      numbers: false,
-      symbols: false,
-      buttonDisabled: true,
-    }
-  }
-
-  handleLength = ({ target: { value } }) => {
-    this.setState({ lengthPassword: value });
-  }
-
-  createPassword = () => {
-    const { lengthPassword } = this.state;
-    let password = '';
-
-    for (let index = 1; index <= lengthPassword; index += 1) {
-      const index = Math.ceil(Math.random() * letters.length) - 1;
-      password += letters[index];
-    };
-
-    return password;
-  }
-
-  validationButton = () => {
-    const { uppercase, lowercase, numbers, symbols } = this.state;
-
-    const checkedCases = [ uppercase, lowercase, numbers, symbols ];
-    const validationButton = checkedCases.some((elem) => elem);
-
-    this.setState({ buttonDisabled: !validationButton })
-  }
-
-  handleChangeCheckbox = ({ target }) => {
-    const { name } = target;
-    this.setState((prevState) => ({
-      [name]: !prevState[name],
-    }), () => this.validationButton() );
-  }
-
-  handleClick = (event) => {
-    event.preventDefault();
-    const password = this.createPassword();
-
-    this.setState({ password });
-  }
-
+class Main extends Component {
   render() {
-    const { password, lengthPassword, uppercase, lowercase, numbers, symbols, buttonDisabled } = this.state;
+    const { password } = this.props;
 
     return (
       <main className="body_main">
@@ -68,17 +16,20 @@ export default class Main extends Component {
           : <p className="main_password">{ password }</p>
         }
 
-        <LengthCaracters length={ lengthPassword } onChange={ this.handleLength } />
-        <Settings
-          onClick={ this.handleClick }
-          onChange={ this.handleChangeCheckbox }
-          uppercase={ uppercase }
-          lowercase={ lowercase }
-          numbers={ numbers }
-          symbols={ symbols }
-          buttonDisabled={ buttonDisabled }
-        />
+        <LengthCaracters />
+        <Settings />
       </main>
     );
   }
 }
+
+Main.propTypes = {
+  password: PropTypes.string,
+}.isRequired;
+
+const mapStateToProps = (state) => {
+  const { password } = state.passwordReducer;
+  return { password };
+}
+
+export default connect(mapStateToProps, null)(Main);

src/components/Settings/Settings.js

@@ -1,59 +1,120 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import Checkbox from '../Checkbox/Checkbox';
 import BtnGenerate from '../BtnGenerate/BtnGenerate';
 import './Settings.css';
+import { savePassword } from '../../redux/actions';
+import letters from '../../data/letters';
+
+class Settings extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      uppercase: false,
+      lowercase: false,
+      numbers: false,
+      symbols: false,
+      buttonDisabled: true,
+    }
+  }
+
+  createPassword = () => {
+    const { lengthPassword } = this.props;
+    let password = '';
+
+    for (let index = 1; index <= lengthPassword; index += 1) {
+      const index = Math.ceil(Math.random() * letters.length) - 1;
+      password += letters[index];
+    };
+
+    return password;
+  }
+
+  handleClick = (event) => {
+    event.preventDefault();
+    const { savePassword } = this.props;
+    const password = this.createPassword();
+
+    savePassword(password);
+  }
+
+  handleChangeCheckbox = ({ target }) => {
+    const { name } = target;
+    this.setState((prevState) => ({
+      [name]: !prevState[name],
+    }), () => this.validationButton() );
+  }
+
+  validationButton = () => {
+    const { uppercase, lowercase, numbers, symbols } = this.state;
+
+    const checkedCases = [ uppercase, lowercase, numbers, symbols ];
+    const validationButton = checkedCases.some((elem) => elem);
+
+    this.setState({ buttonDisabled: !validationButton })
+  }
 
-export default class Settings extends Component {
   render() {
-    const { onClick, onChange, uppercase, lowercase, numbers, symbols, buttonDisabled } = this.props;
+    const { uppercase, lowercase, numbers, symbols, buttonDisabled } = this.state;
+
     return (
       <form className="main__form">
         <p className="legend">SETTINGS</p>
         <Checkbox
           label="Include Uppercase"
           id="settings_uppercase"
           checked={ uppercase }
-          onChange={ onChange }
+          onChange={ this.handleChangeCheckbox }
           name="uppercase"
         />
 
         <Checkbox
           label="Include Lowercase"
           id="settings_lowercase"
           checked={ lowercase }
-          onChange={ onChange }
+          onChange={ this.handleChangeCheckbox }
           name="lowercase"
         />
 
         <Checkbox
           label="Include Numbers"
           id="settings_numbers"
           checked={ numbers }
-          onChange={ onChange }
+          onChange={ this.handleChangeCheckbox }
           name="numbers"
         />
 
         <Checkbox
           label="Include Symbols"
           id="settings_symbols"
           checked={ symbols }
-          onChange={ onChange }
+          onChange={ this.handleChangeCheckbox }
           name="symbols"
         />
 
-        <BtnGenerate buttonDisabled={ buttonDisabled } onClick={ onClick }/>
+        <BtnGenerate
+          buttonDisabled={ buttonDisabled }
+          onClick={ this.handleClick }
+        />
       </form>
     );
   }
 }
 
 Settings.propTypes = {
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  uppercase: PropTypes.bool,
-  lowercase: PropTypes.bool,
-  numbers: PropTypes.bool,
-  symbols: PropTypes.bool,
-  buttonDisabled: PropTypes.bool,
+  savePassword: PropTypes.func,
+  lengthPassword: PropTypes.string,
 }.isRequired;
+
+const mapStateToProps = (state) => {
+  const { length } = state.lengthPasswordReducer;
+  return { lengthPassword: length };
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  savePassword: (password) => dispatch(savePassword(password))
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Settings);

src/redux/actions/index.js

@@ -0,0 +1,12 @@
+export const LENGTH_PASSWORD = 'LENGTH_PASSWORD';
+export const PASSWORD = 'PASSWORD';
+
+export const lengthPassword = (value) => ({
+  type: LENGTH_PASSWORD,
+  value,
+});
+
+export const savePassword = (value) => ({
+  type: PASSWORD,
+  value,
+});

src/redux/reducers/LengthPasswordReducer.js

@@ -1,12 +1,20 @@
+import { LENGTH_PASSWORD } from '../actions';
+
 const INITIAL_STATE = {
   length: 0,
 };
 
-const lengthPassowordReducer = (state = INITIAL_STATE, action) => {
+const lengthPasswordReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
+  case LENGTH_PASSWORD:
+    return {
+      ...state,
+      length: action.value,
+    };
+
   default:
     return state;
   }
 };
 
-export default lengthPassowordReducer;
+export default lengthPasswordReducer;

src/redux/reducers/index.js

@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import checkboxReducer from './CheckboxReducer';
-import lengthPassowordReducer from './LengthPasswordReducer';
+import lengthPasswordReducer from './LengthPasswordReducer';
+import passwordReducer from './passwordReducer';
 
 const rootReducer = combineReducers({
   checkboxReducer,
-  lengthPassowordReducer,
+  lengthPasswordReducer,
+  passwordReducer,
 });
 
 export default rootReducer;

src/redux/reducers/passwordReducer.js

@@ -0,0 +1,19 @@
+import { PASSWORD } from '../actions';
+
+const INITIAL_STATE = {
+  password: '',
+};
+
+const passwordReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+  case PASSWORD:
+    return {
+      ...state,
+      password: action.value,
+    };
+  default:
+    return state;
+  }
+};
+
+export default passwordReducer;