commit

json/dataUser.js

@@ -1,4 +1,4 @@
-exports = [
+module.exports = [
 	{
 		id: "2A080F42-AE7F-407B-976E-DE5FA87BD277",
 		username: "dikti",

pages/login.js

@@ -2,25 +2,13 @@ import { connect } from "react-redux";
 // import Router, { withRouter } from "next/router";
 import { login } from "@/store/actions/user";
 
+import dataUser from "../json/dataUser";
 import React, { Component } from "react";
 import BasePage from "@/components/Layout/BasePage";
 import { Row, Col, Input, Card, CardHeader, CardBody, CardFooter, CustomInput } from "reactstrap";
 
 import FormValidator from "@/components/Forms/Validator.js";
 
-/**
- * Validation flow using controlled components
- *
- * 1- User type on input
- * 2- onChange event trigger validation
- * 3- Validate methods are listed using "data-validate"
- *    attribute. Content must be an array in json format.
- * 4- The validation returns an object with format {[input name]: status}
- *    where status is an array of boolean per each method
- * 5- Methods that requires an argument, read the 'data-param' attribute
- * 6- Similarly, onSubmit event does a bulk validation on all form elements
- */
-
 class Login extends Component {
 	state = {
 		/* Group each form state in an object.
@@ -72,10 +60,15 @@ class Login extends Component {
 		console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
 		if (!hasError) {
 			const { username, password } = this.state.formLogin;
-			console.log(this.state);
+			let user = dataUser.filter((e) => e.username === username && e.password === password);
+			if (user.length) {
+				user = user[0];
+				console.log(user);
+			}
 			this.dispatch(login(username, password));
+
+			e.preventDefault();
 		}
-		e.preventDefault();
 	};
 
 	/* Simplify error check */
@@ -122,5 +115,6 @@ class Login extends Component {
 	}
 }
 Login.Layout = BasePage;
+const mapStateToProps = (state) => ({ user: state.user });
 
-export default connect(null)(Login);
+export default connect(mapStateToProps)(Login);

store/actions/user.js

@@ -1,16 +1,13 @@
-export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
-export const LOGIN_FAIL = 'LOGIN_FAIL'
+export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
+export const LOGIN_FAIL = "LOGIN_FAIL";
 
 import dataUser from "@/json/dataUser";
 
-export const login = (username, password) => dispatch => {
-    let data = dataUser.filter(value => value.username === username)
-    if (!data.length) {
-        return dispatch({type: LOGIN_FAIL})
-    }
-    data = data[0]
-    if(data.password !== password) {
-        return dispatch({type: LOGIN_FAIL})
-    }
-    return dispatch({type: LOGIN_SUCCESS, payload: data})
-}
+export const login = (username, password) => (dispatch) => {
+	let data = dataUser.filter((value) => value.username === username && value.password === password);
+	if (!data.length) {
+		return dispatch({ type: LOGIN_FAIL });
+	}
+	data = data[0];
+	return dispatch({ type: LOGIN_SUCCESS, payload: data });
+};

store/store.js

@@ -5,10 +5,11 @@ import { saveState } from "./persisted.store.cookies.js";
 
 export default function configureStore(initialState) {
 	const enhancers = compose(typeof window !== "undefined" && window.devToolsExtension ? window.devToolsExtension() : (f) => f);
-
+	// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || enhancers;
 	const store = createStore(
 		reducers,
-		applyMiddleware(thunk)
+		enhancers(applyMiddleware(thunk))
+
 		// {
 		// 	...initialState,
 		// },