Skip to content

Commit ecbd47b

Browse files
MatheusCampos-450MatheusCampos-450
authored
Merge pull request #38 from Typext/feature/update-logged-user
feat(user update): implementing user update feat
2 parents e31b11f + 820a05f commit ecbd47b

File tree

13 files changed

+366
-92
lines changed

13 files changed

+366
-92
lines changed

‎src/DTOs/Auth.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@ export interface AuthState {
55
user: {
66
id: string;
77
type: string;
8-
email: string;
98
name: string;
9+
email: string;
10+
office: string;
11+
area: string;
12+
company: string;
13+
phone: string;
14+
password: string;
1015
};
1116
}
1217

@@ -46,8 +51,13 @@ export interface AuthContextData {
4651
user: {
4752
id: string;
4853
type: string;
49-
email: string;
5054
name: string;
55+
email: string;
56+
office: string;
57+
area: string;
58+
company: string;
59+
phone: string;
60+
password: string;
5161
};
5262
invitation: InvitationData;
5363
register: RegisterData;

‎src/DTOs/User.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
import { ReactNode } from 'react';
22

33
export interface IUser {
4-
name: string;
5-
username: string;
6-
email: string;
7-
}
8-
9-
interface UserData {
104
id: string;
11-
name: string;
125
type: string;
6+
name: string;
7+
email: string;
8+
office: string;
9+
area: string;
10+
company: string;
11+
phone: string;
12+
password: string;
1313
}
1414

1515
export interface UserContextData {
16-
users: Array<UserData>;
16+
users: Array<IUser>;
1717
updateUserTypeSuccess: boolean;
1818
deleteUserLoader: boolean;
1919
deleteUserError: string;
20+
updateUserInfoLoader: boolean;
21+
updateUserInfoError: string;
2022
getUsers(): void;
2123
clearAllSuccessStatus(): void;
2224
deleteUser(id: string): void;
2325
updateUserType(credentials: { id: string; userType: string }): void;
26+
updateUserInfo(credentials: IUser): void;
2427
}
2528

2629
export interface UserProviderProps {

‎src/components/FormUpdate/index.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
3+
import { Form } from '@unform/web';
4+
5+
import InputForm from 'components/InputForm';
6+
import Button from 'components/Button/Button';
7+
import Input from 'components/Input/Input';
8+
9+
import { Container } from './styles';
10+
11+
interface FormUpdateProps {
12+
handleSubmit: any;
13+
formRef: any;
14+
hasPasswordField?: boolean;
15+
inviteInfo: { name: string; email: string };
16+
user?: {
17+
id: string;
18+
type: string;
19+
name: string;
20+
email: string;
21+
office: string;
22+
area: string;
23+
company: string;
24+
phone: string;
25+
password: string;
26+
};
27+
}
28+
29+
function FormUpdate({
30+
handleSubmit,
31+
formRef,
32+
inviteInfo,
33+
hasPasswordField,
34+
user,
35+
}: FormUpdateProps) {
36+
return (
37+
<Container>
38+
<Form onSubmit={handleSubmit} ref={formRef} className="Content">
39+
<div className="inputContent">
40+
<InputForm
41+
name="name"
42+
title="Nome completo"
43+
defaultValue={inviteInfo?.name || user?.name}
44+
/>
45+
46+
<InputForm
47+
defaultValue={user?.office}
48+
name="office"
49+
title="Título / Cargo"
50+
/>
51+
52+
<InputForm defaultValue={user?.area} name="area" title="Área" />
53+
54+
<InputForm
55+
defaultValue={user?.company}
56+
name="company"
57+
title="Empresa"
58+
/>
59+
60+
<Input
61+
name="email"
62+
title="E-mail"
63+
styleWidth="40rem"
64+
defaultValue={inviteInfo?.email || user?.phone || ''}
65+
readOnly={!!inviteInfo?.email}
66+
/>
67+
68+
<InputForm defaultValue={user?.phone} name="phone" title="Telefone" />
69+
70+
{hasPasswordField && (
71+
<>
72+
<InputForm
73+
defaultValue={user?.password}
74+
name="password"
75+
title="Senha"
76+
type="password"
77+
/>
78+
79+
<InputForm
80+
name="password_confirmation"
81+
title="Confirme a senha"
82+
type="password"
83+
/>
84+
</>
85+
)}
86+
</div>
87+
88+
<Button color="var(--green)">Cadastrar</Button>
89+
</Form>
90+
</Container>
91+
);
92+
}
93+
94+
FormUpdate.defaultProps = {
95+
hasPasswordField: false,
96+
user: {
97+
name: '',
98+
email: '',
99+
office: '',
100+
area: '',
101+
company: '',
102+
phone: '',
103+
password: '',
104+
},
105+
};
106+
107+
export default FormUpdate;

‎src/components/FormUpdate/styles.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import styled from 'styled-components';
2+
3+
export const Container = styled.div`
4+
width: 100%;
5+
height: 100%;
6+
7+
.Content {
8+
display: flex;
9+
flex-direction: column;
10+
flex-wrap: wrap;
11+
justify-content: center;
12+
align-items: center;
13+
width: 100%;
14+
margin: 6rem 0;
15+
16+
.inputContent {
17+
display: flex;
18+
flex-wrap: wrap;
19+
align-items: center;
20+
justify-content: center;
21+
22+
width: 100%;
23+
max-width: 90rem;
24+
25+
> div {
26+
margin: 10px 15px;
27+
}
28+
}
29+
30+
.input-styled {
31+
margin: 1.25rem;
32+
}
33+
34+
button {
35+
margin-top: 6rem;
36+
}
37+
}
38+
`;

‎src/contexts/user.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,20 @@
22
import React, { useCallback, createContext, useState, useContext } from 'react';
33
import api from 'services/api';
44

5-
import { UserContextData, UserProviderProps } from 'DTOs/User';
5+
import { UserContextData, UserProviderProps, IUser } from 'DTOs/User';
66

77
const UsersContext = createContext<UserContextData>({} as UserContextData);
88

9-
interface UserData {
10-
id: string;
11-
name: string;
12-
type: string;
13-
}
14-
159
const UsersProvider = ({ children }: UserProviderProps) => {
16-
const [users, setUsers] = useState<UserData[]>([
17-
{ id: '', name: '', type: '' },
18-
]);
10+
const [users, setUsers] = useState<IUser[]>([{} as IUser]);
1911

2012
const [deleteUserLoader, setDeleteUserLoader] = useState<boolean>(false);
2113
const [deleteUserError, setDeleteUserError] = useState<string>('');
14+
15+
const [updateUserInfoError, setUpdateUserInfoError] = useState<string>('');
16+
const [updateUserInfoLoader, setUpdateUserInfoLoader] = useState<boolean>(
17+
false,
18+
);
2219
const [updateUserTypeSuccess, setUpdateUserTypeSuccess] = useState<boolean>(
2320
false,
2421
);
@@ -29,6 +26,16 @@ const UsersProvider = ({ children }: UserProviderProps) => {
2926
setUsers(response.data);
3027
}, []);
3128

29+
const updateUserInfo = useCallback(async data => {
30+
setUpdateUserInfoLoader(true);
31+
try {
32+
await api.put('/users/logged', data);
33+
} catch (error) {
34+
setUpdateUserInfoError(error?.response?.data?.validation.body.message);
35+
}
36+
setUpdateUserInfoLoader(false);
37+
}, []);
38+
3239
const updateUserType = useCallback(async ({ id, userType }) => {
3340
try {
3441
await api.patch(`/users/${id}`, { type: userType });
@@ -60,9 +67,12 @@ const UsersProvider = ({ children }: UserProviderProps) => {
6067
updateUserTypeSuccess,
6168
deleteUserLoader,
6269
deleteUserError,
70+
updateUserInfoError,
71+
updateUserInfoLoader,
6372
getUsers,
6473
deleteUser,
6574
updateUserType,
75+
updateUserInfo,
6676
clearAllSuccessStatus,
6777
}}
6878
>

‎src/pages/Register/index.tsx‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,17 @@ import React, { useRef, useCallback, useState } from 'react';
22
import { useParams } from 'react-router-dom';
33
import * as Yup from 'yup';
44

5-
import { Form } from '@unform/web';
65
import { FormHandles } from '@unform/core';
76

87
import { useAuth } from 'contexts/auth';
98
import { getInviteInfo } from 'services/auth';
9+
import FormUpdate from 'components/FormUpdate';
1010

1111
import LogoIcon from 'assets/logo.svg';
12-
import InputForm from 'components/InputForm';
13-
import Button from 'components/Button/Button';
1412

1513
import getValidationErrors from 'utils/getValidationErrors';
1614
import registerSchemaValidation from 'utils/registerSchemaValidation';
1715

18-
import Input from 'components/Input/Input';
1916
import RegisterModal from './components/RegisterModal';
2017

2118
import StyledRegisterNewUser from './styles';
@@ -71,41 +68,12 @@ const RegisterNewUser = () => {
7168
</a>
7269

7370
<div className="RegisterNewUser">
74-
<Form onSubmit={handleSubmit} ref={formRef} className="Content">
75-
<div className="inputContent">
76-
<InputForm
77-
name="name"
78-
title="Nome completo"
79-
defaultValue={inviteInfo?.name}
80-
/>
81-
82-
<InputForm name="office" title="Título / Cargo" />
83-
84-
<InputForm name="area" title="Área" />
85-
86-
<InputForm name="company" title="Empresa" />
87-
88-
<Input
89-
name="email"
90-
title="E-mail"
91-
styleWidth="40rem"
92-
defaultValue={inviteInfo?.email || ''}
93-
readOnly={!!inviteInfo?.email}
94-
/>
95-
96-
<InputForm name="phone" title="Telefone" />
97-
98-
<InputForm name="password" title="Senha" type="password" />
99-
100-
<InputForm
101-
name="password_confirmation"
102-
title="Confirme a senha"
103-
type="password"
104-
/>
105-
</div>
106-
107-
<Button color="var(--green)">Cadastrar</Button>
108-
</Form>
71+
<FormUpdate
72+
formRef={formRef}
73+
hasPasswordField
74+
inviteInfo={inviteInfo}
75+
handleSubmit={handleSubmit}
76+
/>
10977
</div>
11078
</StyledRegisterNewUser>
11179
</>

‎src/pages/Register/styles.ts‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,38 +26,6 @@ const StyledRegisterNewUser = styled.div`
2626
flex-direction: column;
2727
justify-content: center;
2828
align-items: center;
29-
30-
.Content {
31-
display: flex;
32-
flex-direction: column;
33-
flex-wrap: wrap;
34-
justify-content: center;
35-
align-items: center;
36-
width: 100%;
37-
margin: 6rem 0;
38-
39-
.inputContent {
40-
display: flex;
41-
flex-wrap: wrap;
42-
align-items: center;
43-
justify-content: center;
44-
45-
width: 100%;
46-
max-width: 80rem;
47-
48-
> div {
49-
margin: 10px 15px;
50-
}
51-
}
52-
53-
.input-styled {
54-
margin: 1.25rem;
55-
}
56-
57-
button {
58-
margin-top: 6rem;
59-
}
60-
}
6129
}
6230
6331
@media (max-width: 840px) {

0 commit comments

Comments
 (0)