Vamos começar criando o serviço que vai fazer isso
updateUserProfile: async (params: updateProfile) => {
const token = await SecureStore.getItemAsync("onebitshop-token");
const res = await api.put("/profile", params, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return res;
},
Agora podemos criar a tipagem de updateProfile
interface updateProfile {
name: string;
email: string;
phone: string;
}
A senha vai acabar ficando para depois, pois ela precisa de um serviço separado.
Vamos agora para os fieldsAbled, pois usaremos isso aqui lá, e dentro do arquivo FieldsAbled nós iremos criar os fields aqui
const [fields, setFields] = useState({
name: "",
email: "",
phone: "",
currentPassword: "",
newPassword: "",
confirmNewPassword: "",
});
const [address, setAddress] = useState([]);
<DropDownComponent
placeholder="Seus endereços"
setSelected={setSelect}
data={address}
saveMethod="value"
/>
Com os fields prontos, podemos passar para o nosso fieldsAbled o userInfo de dentro do form
{!editable ? <FieldsDisabled /> : <FieldsAbled userInfo={userInfo} />}
interface Props {
userInfo: User;
}
const FieldsAbled = ({ userInfo }: Props) => {
Agora, vamos pegar os endereços dele, para que a gente possa exibir para ele
const handleSetInfos = async () => {
const res = await addressService.getAddress();
const value = res.data.map((address: Address) => {
return { value: `${address.street} Nº${address.number}`, disabled: true };
});
setAddress(value);
setFields({
...fields,
name: userInfo.name,
email: userInfo.email,
phone: userInfo.phone,
});
};
useEffect(() => {
handleSetInfos();
}, []);
Dessa forma, nós já temos ao entrar o fieldsAbled as informações setadas e o endereço aparecendo, podemos ver pelo endereço. Agora, basta a gente puxar os fields para ficarem de value aqui
return (
<>
<InputContainer>
<Input
value={fields.name}
onChangeText={(val) => {
setFields({
...fields,
name: val,
});
}}
/>
</InputContainer>
<InputContainer>
<Input
value={fields.email}
onChangeText={(val) => {
setFields({
...fields,
email: val,
});
}}
/>
</InputContainer>
<InputContainer>
<Input
value={fields.phone}
onChangeText={(val) => {
setFields({
...fields,
phone: val,
});
}}
/>
</InputContainer>
<DropDownComponent
placeholder="Seus endereços"
setSelected={setSelect}
data={address}
saveMethod="value"
/>
<InputContainer>
<Input
placeholder="Senha Antiga"
placeholderTextColor="#C0C0C1"
secureTextEntry
onChangeText={(val) => {
setFields({
...fields,
currentPassword: val,
});
}}
/>
</InputContainer>
<InputContainer>
<Input
placeholder="Senha Nova"
placeholderTextColor="#C0C0C1"
secureTextEntry
onChangeText={(val) => {
setFields({
...fields,
newPassword: val,
});
}}
/>
</InputContainer>
<InputContainer>
<Input
placeholder="Confirmar Senha"
placeholderTextColor="#C0C0C1"
secureTextEntry
onChangeText={(val) => {
setFields({
...fields,
confirmNewPassword: val,
});
}}
/>
</InputContainer>
</>
);
Ao fazer isso, podemos ver todas as informações organizadas. Podemos agora criar o handleUpdate, para que a gente faça as alterações. E caso o email seja alterado, vamos dar logout, pois a pessoa vai precisar logar de novo para continuar
const handleUpdateInfo = async () => {
const res = await profileService.updateUserProfile(fields);
if (res.status === 400) {
Alert.alert("Esse email pertence a outra conta");
return;
}
if (fields.email !== userInfo.email) {
logout();
}
Alert.alert("Informações atualizadas com sucesso!");
};
Agora, podemos testar e ver se está tudo certo