diff --git a/src/components/LengthCaracters/LengthCaracters.js b/src/components/LengthCaracters/LengthCaracters.js index eae01f5..5b1e6b6 100644 --- a/src/components/LengthCaracters/LengthCaracters.js +++ b/src/components/LengthCaracters/LengthCaracters.js @@ -1,15 +1,31 @@ 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 (
-

{`LENGTH: ${ length }`}

+

{`LENGTH: ${ lengthPassword }`}

4 20 @@ -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); diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js index 52e39a5..1cd0ffa 100644 --- a/src/components/Main/Main.js +++ b/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 (
@@ -68,17 +16,20 @@ export default class Main extends Component { :

{ password }

} - - + +
); } } + +Main.propTypes = { + password: PropTypes.string, +}.isRequired; + +const mapStateToProps = (state) => { + const { password } = state.passwordReducer; + return { password }; +} + +export default connect(mapStateToProps, null)(Main); diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index bfc5267..2657433 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -1,12 +1,64 @@ 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 (

SETTINGS

@@ -14,7 +66,7 @@ export default class Settings extends Component { label="Include Uppercase" id="settings_uppercase" checked={ uppercase } - onChange={ onChange } + onChange={ this.handleChangeCheckbox } name="uppercase" /> @@ -22,7 +74,7 @@ export default class Settings extends Component { label="Include Lowercase" id="settings_lowercase" checked={ lowercase } - onChange={ onChange } + onChange={ this.handleChangeCheckbox } name="lowercase" /> @@ -30,7 +82,7 @@ export default class Settings extends Component { label="Include Numbers" id="settings_numbers" checked={ numbers } - onChange={ onChange } + onChange={ this.handleChangeCheckbox } name="numbers" /> @@ -38,22 +90,31 @@ export default class Settings extends Component { label="Include Symbols" id="settings_symbols" checked={ symbols } - onChange={ onChange } + onChange={ this.handleChangeCheckbox } name="symbols" /> - + ); } } 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); diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js index e69de29..85169d2 100644 --- a/src/redux/actions/index.js +++ b/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, +}); diff --git a/src/redux/reducers/LengthPasswordReducer.js b/src/redux/reducers/LengthPasswordReducer.js index 1d4416f..6eaed6a 100644 --- a/src/redux/reducers/LengthPasswordReducer.js +++ b/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; diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 7be8407..5c4776b 100644 --- a/src/redux/reducers/index.js +++ b/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; diff --git a/src/redux/reducers/passwordReducer.js b/src/redux/reducers/passwordReducer.js new file mode 100644 index 0000000..61bccd1 --- /dev/null +++ b/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;