diff --git a/package.json b/package.json index 11f3de0..48d27f2 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,11 @@ "react-dom": "^16.6.0", "react-icons": "^3.7.0", "react-image-fallback": "^8.0.0", + "react-redux": "^7.1.3", "react-router-dom": "^5.1.2", - "react-scripts": "^3.3.0" + "react-scripts": "^3.3.0", + "redux": "^4.0.4", + "redux-thunk": "^2.3.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index e6b85e1..01a0511 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,6 @@ import React, { Component } from "react"; +import {Provider} from 'react-redux'; +import store from './store'; import "./styles.css"; import Header from "./components/Header"; @@ -6,27 +8,16 @@ import Router from "./components/Router"; import Mentor from "./components/Mentor"; import Footer from "./components/Footer"; -class App extends Component { - constructor(props) { - super(props); - this.state = { - search: "" - }; - } - - search = val => { - this.setState({ search: val }); - }; - - render() { +const App =()=>{ return ( +
-
+
- +
+ ); - } } export default App; diff --git a/src/actions/products.js b/src/actions/products.js new file mode 100644 index 0000000..e69de29 diff --git a/src/actions/search.js b/src/actions/search.js new file mode 100644 index 0000000..9731175 --- /dev/null +++ b/src/actions/search.js @@ -0,0 +1,6 @@ +export const performSearch = (target)=>{ + return dispatch=>{ + console.log(target) + dispatch({type:'SET_DATA',target:target,data:[]}) + } +} \ No newline at end of file diff --git a/src/actions/user.js b/src/actions/user.js new file mode 100644 index 0000000..0a0b567 --- /dev/null +++ b/src/actions/user.js @@ -0,0 +1,22 @@ + +export const loginUser=(email,password,closeModal)=>{ + let re = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/; + + + + return dispatch=>{ + if (!re.test(email)) { + dispatch({type:'FAIL_LOGIN'}) + + alert("Invalid Credentials !!!"); + + } + if (email === "10seconds@gmail.com" && password === "test@123") { + alert("Successful Login !!!"); + closeModal(); + dispatch({type:'USER_CURRENT_SET',data:{ + email}}) + } + + } +} \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js index 67096e2..999e174 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,4 +1,7 @@ import React, { Component } from "react"; +import {connect} from 'react-redux'; +import {performSearch} from '../actions/search'; +import {loginUser} from '../actions/user'; // import Login from './Login'; import { Link } from "react-router-dom"; import LoginContainer from "./LoginContainer"; @@ -8,7 +11,6 @@ class Header extends Component { constructor(props) { super(props); this.state = { - username: "Hi!", search: "", menu: true }; @@ -30,9 +32,7 @@ class Header extends Component { } }; - user = val => { - this.setState({ username: val }); - }; + search = event => { this.setState({ search: event.target.value }); @@ -40,7 +40,9 @@ class Header extends Component { submit = event => { event.preventDefault(); - this.props.handleSearch(this.state.search); + + + this.props.performSearch(this.state.search); }; render() { @@ -91,7 +93,7 @@ class Header extends Component { - + @@ -101,4 +103,14 @@ class Header extends Component { } } -export default Header; +//debo de pasar el user para mostrar la informacion +//y el action de perform search + +const mapDispatchToProps=(dispatch)=>({ + performSearch:(target)=>dispatch(performSearch(target)), + loginUser:(username,password,action)=>dispatch(loginUser(username,password,action)) + }) +const mapStateToProps=(state)=>({user:state.user}); + + +export default connect(mapStateToProps,mapDispatchToProps)(Header); diff --git a/src/components/Login.js b/src/components/Login.js index 674ad34..7238ec6 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -6,8 +6,7 @@ class Login extends Component { super(); this.state = { email: "", - password: "", - emailError: false + password: "" }; } @@ -23,24 +22,17 @@ class Login extends Component { this.setState({ [evt.target.name]: evt.target.value, emailError: false }); }; + + //debe de ir en un action handleLoginSubmit = evt => { evt.preventDefault(); const { email, password } = this.state; - let re = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/; - if (!re.test(email)) { - this.setState({ emailError: true }); - return; - } - if (email === "10seconds@gmail.com" && password === "test@123") { - alert("Successful Login !!!"); - this.props.closeModal(); - return; - } - alert("Invalid Credentials !!!"); + this.props.loginUser(email,password,this.props.closeModal); + }; render() { - let { emailError } = this.state; + let { error } = this.props.user; return (
@@ -52,7 +44,7 @@ class Login extends Component {
diff --git a/src/components/Mentor.js b/src/components/Mentor.js index c668dae..a060569 100644 --- a/src/components/Mentor.js +++ b/src/components/Mentor.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import {connect} from 'react-redux'; // import Header from "./components/Header"; import { data, getProduct } from "../response/response"; import MentorList from "../components/MentorList"; @@ -160,4 +161,8 @@ class Mentor extends Component { } } -export default Mentor; +const mapStateToProps = (state)=>({ + search:state.search.target +}) + +export default connect(mapStateToProps,null)(Mentor); diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000..334f479 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,10 @@ +import products from './products'; +import user from './user'; +import search from './search'; + + +export { + products, + user, + search +}; \ No newline at end of file diff --git a/src/reducers/products.js b/src/reducers/products.js new file mode 100644 index 0000000..c09f26a --- /dev/null +++ b/src/reducers/products.js @@ -0,0 +1,39 @@ + +const defaultState={ + data:[], + loading:false, + error:null +} + + const products=(state=defaultState,action)=>{ + const {type} = action; + switch (type){ + case 'FETCHING_PRODUCTS': + return { + data:[], + loading:true, + error:null + } + break; + case 'SET_PRODUCTS': + const {data} = action; + return { + data, + loading:false, + error:null + } + break; + case 'FETCH_PRODUCTS_FAIL': + const {error} = action; + return { + data:[], + loading:false, + error + } + break; + default: + + return state; + } +} +export default products; \ No newline at end of file diff --git a/src/reducers/search.js b/src/reducers/search.js new file mode 100644 index 0000000..fe2f6b4 --- /dev/null +++ b/src/reducers/search.js @@ -0,0 +1,31 @@ +const defaultState = { + target:'', + data:[], + isSearching:false +} + +const search = (state=defaultState,action)=>{ + const {type} = action; + switch(type){ + case "PERFORMING_SEARCH": + return { + target:action.target, + data:[], + isSearching:true + } + break; + case "SET_DATA": + return { + target:action.target, + data:action.data, + isSearching:false + } + break; + default: + return state; + + + } +} + +export default search; \ No newline at end of file diff --git a/src/reducers/user.js b/src/reducers/user.js new file mode 100644 index 0000000..72e17b3 --- /dev/null +++ b/src/reducers/user.js @@ -0,0 +1,33 @@ +const defaultState={ + data:{}, + isAuthenticated:false, + error:false +}; + + +const user = (state=defaultState,action)=>{ + const {type}=action; + + switch(type){ + case 'USER_CURRENT_SET': + return { + isAuthenticated: true, + user: action.user + } + break; + case 'FAIL_LOGIN': + return { + isAuthenticated:false, + error:true, + user:{} + + } + break; + + + default: + return state + } +}; + +export default user; diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..7c96afc --- /dev/null +++ b/src/store.js @@ -0,0 +1,23 @@ +import {createStore,applyMiddleware,compose,combineReducers} from 'redux'; +import thunk from 'redux-thunk'; +import {products,user,search} from './reducers'; + + +function logger({getState}) { + return next => action => { + console.log('will dispatch', action) + + // Call the next dispatch method in the middleware chain. + const returnValue = next(action) + + console.log('state after dispatch', getState()) + // This will likely be the action itself, unless + // a middleware further in chain changed it. + return returnValue + } +} + +const store = createStore(combineReducers({products,user,search}), + compose(applyMiddleware(thunk,logger))); + +export default store;