Initial redux set up

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",

src/App.js

@@ -1,32 +1,23 @@
 import React, { Component } from "react";
+import {Provider} from 'react-redux';
+import store from './store';
 import "./styles.css";
 
 import Header from "./components/Header";
 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 (
+      <Provider store={store}>
       <div className="App">
-        <Header handleSearch={this.search} />
+        <Header/>
         <Router />
-        <Mentor search={this.state.search} />
+        <Mentor />
         <Footer />
       </div>
+      </Provider>
     );
-  }
 }
 export default App;

src/actions/search.js

@@ -0,0 +1,6 @@
+export const performSearch = (target)=>{
+		return dispatch=>{
+			console.log(target)
+			dispatch({type:'SET_DATA',target:target,data:[]})
+		}
+}

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 === "[email protected]" && password === "test@123") {
+      alert("Successful Login !!!");
+      closeModal();
+		dispatch({type:'USER_CURRENT_SET',data:{
+			email}})
+	}
+
+    }
+}

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,17 +32,17 @@ class Header extends Component {
     }
   };
 
-  user = val => {
-    this.setState({ username: val });
-  };
+
 
   search = event => {
     this.setState({ search: event.target.value });
   };
 
   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 {
                 </button>
               </form>
 
-              <LoginContainer />
+              <LoginContainer loginUser={this.props.loginUser} user={this.props.user}/>
 
             </div>
           </nav>
@@ -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);

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 === "[email protected]" && 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 (
       <div className="login-form">
         <div className="row">
@@ -52,7 +44,7 @@ class Login extends Component {
                   <label htmlFor="exampleInputEmail1">Email address</label>
                   <input
                     type="email"
-                    className={`form-control ${emailError ? "is-invalid" : ""}`}
+                    className={`form-control ${error ? "is-invalid" : ""}`}
                     id="exampleInputEmail1"
                     aria-describedby="emailHelp"
                     placeholder="[email protected]"

src/components/LoginContainer.js

@@ -46,6 +46,8 @@ class LoginContainer extends Component {
                     <div className="modal-body" style={themeBackground}>
                         <Login 
                             closeModal = {this.toggleModal}
+                            user={this.props.user}
+                            loginUser={this.props.loginUser}
                         />
                     </div>
                 </div>

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);

src/reducers/index.js

@@ -0,0 +1,10 @@
+import products from './products';
+import user from './user';
+import search from './search';
+
+
+export {
+	products,
+	user,
+	search
+};

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;

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;

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;

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;