diff --git a/app/javascript/containers/User/NewUser.jsx b/app/javascript/containers/User/NewUser.jsx
index 275e24b..c2e53d6 100644
--- a/app/javascript/containers/User/NewUser.jsx
+++ b/app/javascript/containers/User/NewUser.jsx
@@ -1,19 +1,17 @@
import React from "react"
import classes from './NewUser.sass'
-import {connect} from "react-redux";
-import {createStructuredSelector} from "reselect";
import UserForm from "../UserForm/UserForm";
import UserSettingsApi from "../../api/userSettingsApi";
-const NewUser = ({user}) => {
- const saveUser = () => {
- UserSettingsApi.updateUser(userSettingsParam);
+const NewUser = () => {
+ const saveUser = (userData) => {
+ // TODO: needs a create user
+ UserSettingsApi.updateUser(userData);
}
return (
@@ -21,9 +19,4 @@ const NewUser = ({user}) => {
);
};
-
-const mapStateToProps = createStructuredSelector({
- user: state => state.app.user
-});
-
-export default connect(mapStateToProps, null)(NewUser);
+export default NewUser;
diff --git a/app/javascript/containers/User/NewUser.test.js b/app/javascript/containers/User/NewUser.test.js
new file mode 100644
index 0000000..3f9976e
--- /dev/null
+++ b/app/javascript/containers/User/NewUser.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import NewUser from "./NewUser";
+
+configure({adapter: new Adapter()});
+
+describe('', () => {
+ it('renders components', () => {
+ const wrapper = mount();
+ expect(wrapper.find('input')).toHaveLength(5);
+ expect(wrapper.find('h1').text()).toEqual('Criar novo usuário');
+ });
+
+ describe('when click on save button', () => {
+ it('shows error message', () => {
+ const wrapper = mount();
+ wrapper.find('button').simulate('click');
+ expect(wrapper.find('TextInputWithLabel').get(0).props.error).toEqual('Este campo é obrigatório')
+ expect(wrapper.find('TextInputWithLabel').get(1).props.error).toEqual('Este campo é obrigatório')
+ expect(wrapper.find('TextInputWithLabel').get(2).props.error).toEqual('Este campo é obrigatório')
+ expect(wrapper.find('TextInputWithLabel').get(3).props.error).toEqual('Este campo é obrigatório')
+ expect(wrapper.find('TextInputWithLabel').get(4).props.error).toEqual(undefined)
+ });
+ });
+});
diff --git a/app/javascript/containers/UserForm/UserForm.jsx b/app/javascript/containers/UserForm/UserForm.jsx
index a080b27..b4e4369 100644
--- a/app/javascript/containers/UserForm/UserForm.jsx
+++ b/app/javascript/containers/UserForm/UserForm.jsx
@@ -9,21 +9,32 @@ const NO_PASSWORD = 'NO_PASSWORD';
// TODO: use this on UserSettings
// TODO: consider changing UserSettings to UpdateUser
+const initialUserData = {
+ id: null,
+ name: null,
+ email: null,
+ phone: null,
+ password: null,
+ passwordConfirmation: null,
+}
+
const UserForm = ({user, title, saveUser}) => {
- const [userSettings, setUserSettings] = useState({});
+ const [userData, setUserData] = useState(initialUserData);
const [formErrors, setFormErrors] = useState({});
useEffect(() => {
- const userData = {
- id: user.id,
- name: user.name,
- email: user.email,
- phone: user.phone,
- password: NO_PASSWORD,
- passwordConfirmation: NO_PASSWORD,
- };
-
- setUserSettings(userData)
+ if (user) {
+ const initialUserData = {
+ id: user.id,
+ name: user.name,
+ email: user.email,
+ phone: user.phone,
+ password: user.password,
+ passwordConfirmation: user.password,
+ };
+
+ setUserData(initialUserData)
+ }
return () => {
// cleanup
@@ -32,28 +43,28 @@ const UserForm = ({user, title, saveUser}) => {
const inputChangedHandler = (event, inputIdentifier) => {
- const updatedUserSettings = {
- ...userSettings
+ const updatedUserData = {
+ ...userData
};
- updatedUserSettings[inputIdentifier] = event.target.value;
+ updatedUserData[inputIdentifier] = event.target.value;
- setUserSettings(updatedUserSettings)
+ setUserData(updatedUserData)
console.log({formErrors})
if (Object.keys(formErrors).length > 0) {
- validateForm(updatedUserSettings);
+ validateForm(updatedUserData);
}
}
- const validateForm = (userSettings) => {
+ const validateForm = (userData) => {
let formValidation = new FormValidation();
- formValidation.email(userSettings.email)
- formValidation.password(userSettings.password, userSettings.passwordConfirmation)
- formValidation.phone(userSettings.phone)
- formValidation.requiredFields(['name', 'email', 'phone', 'password'], userSettings)
+ formValidation.email(userData.email)
+ formValidation.password(userData.password, userData.passwordConfirmation)
+ formValidation.phone(userData.phone)
+ formValidation.requiredFields(['name', 'email', 'phone', 'password'], userData)
setFormErrors(formValidation.errors)
@@ -61,21 +72,21 @@ const UserForm = ({user, title, saveUser}) => {
}
const submitHandler = () => {
- if (!validateForm(userSettings)) {
+ if (!validateForm(userData)) {
return
}
- let userSettingsParam = {
- id: userSettings.id,
- name: userSettings.name,
- email: userSettings.email,
- phone: userSettings.phone,
+ let userDataParam = {
+ id: userData.id,
+ name: userData.name,
+ email: userData.email,
+ phone: userData.phone,
};
- if (userSettings.password !== NO_PASSWORD) {
- userSettingsParam = {
- ...userSettingsParam,
- password: userSettings.password
+ if (userData.password !== NO_PASSWORD) {
+ userDataParam = {
+ ...userDataParam,
+ password: userData.password
}
}
@@ -95,21 +106,21 @@ const UserForm = ({user, title, saveUser}) => {
inputChangedHandler(event, 'name')}
/>
inputChangedHandler(event, 'email')}
/>
inputChangedHandler(event, 'phone')}
/>
@@ -120,7 +131,7 @@ const UserForm = ({user, title, saveUser}) => {
inputChangedHandler(event, 'password')}
@@ -128,7 +139,7 @@ const UserForm = ({user, title, saveUser}) => {
inputChangedHandler(event, 'passwordConfirmation')}