2023-05-29

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?



No comments:

Post a Comment