-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #23 from MarcoEscaleira/Redux_integration
Redux integration
- Loading branch information
Showing
13 changed files
with
334 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,95 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import {connect} from "react-redux"; | ||
import {actions} from "../store/decisions"; | ||
import {API_URL} from "../config"; | ||
|
||
const Form = (props) => ( | ||
<div className="questionForm"> | ||
<h1 className="questionForm__title">What do you want to do?</h1> | ||
<form | ||
className="questionForm__form" | ||
onSubmit={props.handleFormSubmit} | ||
autoComplete="off" | ||
> | ||
<input | ||
type="text" | ||
name="toDo" | ||
value={props.text} | ||
onChange={props.handleTextInput} | ||
className="questionForm__form__input" | ||
/> | ||
<button | ||
type="submit" className="questionForm__form__btn" | ||
> | ||
Decide | ||
</button> | ||
</form> | ||
</div> | ||
); | ||
|
||
class Form extends React.Component { | ||
handleFormSubmit = (e) => { | ||
e.preventDefault(); | ||
|
||
this.props.resetData(); | ||
|
||
const inputText = e.target.toDo.value.trim(); | ||
|
||
// Check if input is empty | ||
if (!inputText) { | ||
this.props.resetData(); | ||
this.props.handleTypeError("Please enter what you want to do"); | ||
return; | ||
} | ||
|
||
// Check if input is same as before | ||
if (this.props.oldTextInput === inputText) { | ||
this.props.resetData(); | ||
this.props.handleTypeError("Please do another thing!"); | ||
return; | ||
} | ||
|
||
this.props.setLoadingAnimation(); | ||
|
||
const request = async () => { | ||
const response = await fetch(`${API_URL}/?search=${inputText}`, { | ||
headers: { | ||
"Content-Type": "application/json", | ||
} | ||
}); | ||
const data = await response.json(); | ||
|
||
this.props.setData(data, inputText); | ||
}; | ||
request(); | ||
}; | ||
|
||
handleTextInput = (e) => { | ||
const textInput = e.target.value; | ||
this.props.handleTextInput(textInput); | ||
}; | ||
|
||
render() { | ||
return ( | ||
<div className="questionForm"> | ||
<h1 className="questionForm__title">What do you want to do?</h1> | ||
<form | ||
className="questionForm__form" | ||
onSubmit={this.handleFormSubmit} | ||
autoComplete="off" | ||
> | ||
<input | ||
type="text" | ||
name="toDo" | ||
value={this.props.textInput} | ||
onChange={this.handleTextInput} | ||
className="questionForm__form__input" | ||
/> | ||
<button | ||
type="submit" className="questionForm__form__btn" | ||
> | ||
Decide | ||
</button> | ||
</form> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
Form.propTypes = { | ||
handleFormSubmit: PropTypes.func, | ||
text: PropTypes.string, | ||
textInput: PropTypes.string, | ||
handleTextInput: PropTypes.func | ||
}; | ||
|
||
export default Form; | ||
const mapStateToProps = state => ({ | ||
textInput: state.textInput, | ||
oldTextInput: state.oldTextInput | ||
}); | ||
|
||
const mapDispatchToProps = { | ||
handleTextInput: actions.handleTextInput, | ||
resetData: actions.resetData, | ||
handleTypeError: actions.handleTypeError, | ||
setLoadingAnimation: actions.setLoadingAnimation, | ||
setData: actions.setData | ||
}; | ||
|
||
export default connect(mapStateToProps, mapDispatchToProps)(Form); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,14 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import {Provider} from 'react-redux'; | ||
import store from './store'; | ||
|
||
import 'normalize.css'; | ||
import './styles/styles.scss'; | ||
import AppRouter from './routers/AppRouter'; | ||
|
||
ReactDOM.render(<AppRouter />, document.getElementById('root')); | ||
ReactDOM.render(( | ||
<Provider store={store()}> | ||
<AppRouter /> | ||
</Provider> | ||
), document.getElementById('root')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,118 +1,30 @@ | ||
import React, { Component, Fragment } from 'react'; | ||
|
||
import Form from '../components/Form'; | ||
import Answer from '../components/Answer'; | ||
import HistoryBoard from '../components/HistoryBoard'; | ||
import ErrorModal from '../components/ErrorModal'; | ||
import {API_URL} from "../config"; | ||
import {connect} from "react-redux"; | ||
|
||
const DEFAULT_STATE = { | ||
print: false, | ||
data: {}, | ||
oldTextInput: '', | ||
textInput: '', | ||
typeError: { | ||
showModal: false, | ||
text: '' | ||
} | ||
}; | ||
|
||
class Home extends Component { | ||
state = { | ||
...DEFAULT_STATE | ||
}; | ||
|
||
handleFormSubmit = (e) => { | ||
e.preventDefault(); | ||
|
||
this.handleData(); | ||
|
||
const inputText = e.target.toDo.value.trim(); | ||
|
||
// Check if input is empty | ||
if (!inputText) { | ||
this.handleData(); | ||
this.handleTypeError("Please enter what you want to do"); | ||
return; | ||
} | ||
|
||
// Check if input is same as before | ||
if (this.state.oldTextInput === inputText) { | ||
this.handleData(); | ||
this.handleTypeError("Please do another thing!"); | ||
return; | ||
} | ||
|
||
//Loading animation | ||
this.setState(() => ({ print: true, data: { | ||
"msg": "loading", | ||
"img": "./gifs/Blocks-1s-200px.gif" | ||
} })); | ||
|
||
const request = async () => { | ||
const response = await fetch(`${API_URL}/?search=${inputText}`, { | ||
headers: { | ||
"Content-Type": "application/json", | ||
} | ||
}); | ||
const data = await response.json(); | ||
this.setState(() => ({ print: true, data, oldTextInput: inputText })); | ||
}; | ||
request(); | ||
}; | ||
|
||
handleState = () => this.setState(() => ({ ...DEFAULT_STATE })); | ||
|
||
handleData = () => this.setState(() => ({ | ||
print: false, | ||
data: {} | ||
})); | ||
|
||
handleTypeError = (text = '') => this.setState(() => ({ | ||
typeError: { | ||
showModal: true, | ||
text | ||
} | ||
})); | ||
|
||
closeTypeError = () => this.setState(() => ({ | ||
typeError: { | ||
showModal: false, | ||
text: '' | ||
} | ||
})); | ||
|
||
handleTextInput = (e) => { | ||
const textInput = e.target.value; | ||
if(!textInput || /^[a-z\d\-_\s]+$/i.test(textInput)) { | ||
this.setState(() => ({ textInput })); | ||
} | ||
}; | ||
|
||
render() { | ||
return ( | ||
<Fragment> | ||
<div className="container"> | ||
<Form | ||
handleFormSubmit={this.handleFormSubmit} | ||
handleTextInput={this.handleTextInput} | ||
text={this.state.textInput} | ||
/> | ||
{ this.state.print && | ||
<Answer | ||
handleData={this.handleState} | ||
data={this.state.data} | ||
/> | ||
<Form /> | ||
{ this.props.print && | ||
<Answer /> | ||
} | ||
<HistoryBoard /> | ||
</div> | ||
<ErrorModal | ||
show={this.state.typeError.showModal} | ||
text={this.state.typeError.text} | ||
closeCallback= {this.closeTypeError} | ||
/> | ||
<ErrorModal /> | ||
</Fragment> | ||
); | ||
} | ||
} | ||
|
||
export default Home; | ||
const mapStateToProps = state => ({ | ||
print: state.print | ||
}); | ||
|
||
export default connect(mapStateToProps)(Home); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.