How to Update user data with patch and react native
I have a react native app and I try to update the user data. Like firstname, lastname, etc.
And I am calling a api call. And I try to update a logged in user through passing arguments in the header of the api call. But apparently that doesn't work untill now. Only when I pass the arguments hardcoded then it works.
So this is the service:
export const AccountUpdateRequest = async (
first_name,
last_name,
email,
username,
password,
password2
) => {
const token = await retrieveToken();
console.log("response");
try {
if (token) {
const response = await fetch("http://192.168.1.65:8000/api/user/me/", {
method: "PATCH",
headers: {
Authorization: `Token ${token}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
first_name: first_name,
last_name: last_name,
email: email,
username: username,
password: password,
password2: password2,
}),
});
return await response.json();
} else {
throw new Error(token);
}
} catch (error) {
//console.log(error);
error("can't retrieve data");
}
};
And so this doens't work.
The old values are not updated:
Object {
"email": "n@n.nl",
"first_name": "helloThere",
"last_name": "jooh",
"username": "username999",
}
But I entered for firstName: helloTherejjj
But if I pass the properties hardcoded:
body: JSON.stringify({
first_name: "helloThere",
last_name: "jooh",
email: "hello@email.nl",
username: "username999",
password: "1234567890",
password2: "1234567890",
}),
Then it works.
And I have the context:
const UpdateUserProfileRequest = async (
first_name,
last_name,
email,
username,
password,
password2
) => {
setIsLoading(true);
AccountUpdateRequest(first_name, last_name, email, username, password, password2)
.then((u) => {
console.log(u);
setUser(u);
setIsLoading(false);
})
.catch((e) => {
setIsLoading(false);
setError(e.toString());
});
};
And the view with the input fields:
export const SetScreen = ({ navigation }) => {
const [username, setUsername] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [password2, setPassword2] = useState("");
const {
isLoading,
onLogout,
error,
passwordValidError,
UpdateUserProfileRequest,
} = useContext(AuthContext);
const changedText = (evt) => {
console.log("changed", firstName);
};
useEffect(() => {
AccountRequest().then((data) => {
setFirstName(data.first_name);
setLastName(data.last_name);
setEmail(data.email);
setUsername(data.username);
setPassword(data.password);
setPassword2(data.password2);
});
}, []);
return (
<>
<ScrollView style={styles.scrollView}>
<AccountBackground>
<AccountCover />
<Title>Instellingen</Title>
<AccountContainer>
<AuthInput
label="Voornaam"
value={firstName}
autoCapitalize="none"
onChange={changedText}
onChangeText={(fn) => setFirstName(fn)}
/>
<Spacer size="large">
<AuthInput
label="Achternaam"
value={lastName}
autoCapitalize="none"
textContentType="Achternaam"
onChangeText={(ln) => setLastName(ln)}
/>
</Spacer>
<Spacer size="large">
<AuthInput
label="E-mail"
value={email}
textContentType="emailAddress"
keyboardType="email-address"
autoCapitalize="none"
onChangeText={(em) => setEmail(em)}
/>
</Spacer>
<Spacer size="large">
<AuthInput
label="Username"
value={username}
textContentType="username"
keyboardType="username"
autoCapitalize="none"
onChangeText={(un) => setUsername(un)}
/>
</Spacer>
<Spacer size="large">
<AuthInput
label="Wachtwoord"
value={password}
textContentType="password"
secureTextEntry
autoCapitalize="none"
onChangeText={(p) => {
setPassword(p);
}}
error={passwordValidError}
/>
</Spacer>
<Spacer size="large">
<AuthInput
label="Herhaal wachtwoord"
value={password2}
textContentType="password2"
secureTextEntry
autoCapitalize="none"
onChangeText={(pas) => setPassword2(pas)}
/>
</Spacer>
{error && (
<ErrorContainer size="large">
<Text variant="error">{error}</Text>
</ErrorContainer>
)}
<Spacer size="large">
{!isLoading ? (
<AuthButton
ion-icon
name="log-out-outline"
mode="contained"
onPress={() => onLogout()}>
uitloggen
</AuthButton>
) : (
<ActivityIndicator animating={false} />
)}
</Spacer>
<Spacer size="large">
<AuthButton icon="email" mode="contained" onPress={() => UpdateUserProfileRequest()}>
save
</AuthButton>
</Spacer>
</AccountContainer>
<Spacer size="large">
<AuthButton mode="contained" onPress={() => navigation.goBack()}>
Back
</AuthButton>
</Spacer>
</AccountBackground>
</ScrollView>
</>
);
};
and AuthInput:
export const AuthInput = styled(TextInput)`
width: 200px;
background-color: #c6daf7;
`;
Question: how to update the user data with the given parameters?
Comments
Post a Comment