noirtempest's avatar

UPDATING DATA LARAVEL + REACT NATIVE

I'm stucked on this its not updating any data but in the logs says successfully updated but its not updating any data

custom hooks:

import { useMutation, useQueryClient } from "@tanstack/react-query";
import AsyncStorage from "@react-native-async-storage/async-storage";
import axiosInstance, { getJWTHeader } from "../../../../../../utils/axiosConfig";
import { useNavigation } from "@react-navigation/native";
export const useEducations = () => {
    const queryClient = useQueryClient();
    const navigation = useNavigation();

    return useMutation(
        async (dataToUpdate) => {
            try {
                const userStr = await AsyncStorage.getItem("upcare_user");
                console.log('User string from AsyncStorage:', userStr);
                const user = userStr ? JSON.parse(userStr) : null;
                console.log('Parsed user:', user);
                await addEducation(dataToUpdate, user);
            } catch (error) {
                throw new Error("Failed to add education: " + error.message);
            }
        },
        {
            onMutate: (updatedUser) => {
                queryClient.setQueryData(['user'], updatedUser);
                console.log('Education added successfully:', updatedUser);
                navigation.goBack();
            },


            onSettled: () => {
                queryClient.invalidateQueries({ queryKey: ['user'] });
            },
        }
    );
}


async function updateEducation(dataToEdit, user) {
    if (!user) {
        throw new Error("User not found");
    }

    try {
        const headers = getJWTHeader(user);
        const { data } = await axiosInstance.put("/user/profile/edit-educations", dataToEdit, { headers });
        const updatedUser = { ...user, education: data.education }; // Assuming the response contains the updated education data
        await AsyncStorage.setItem('upcare_user', JSON.stringify(updatedUser));
        return updatedUser;
    } catch (error) {
        if (error.response && error.response.status === 422) {
            throw new Error("Failed to update education: " + JSON.stringify(error.response.data));
        } else {
            throw new Error("Failed to update education: " + error.message);
        }
    }
}

export const useUpdateEducations = () => {
    const queryClient = useQueryClient();
    const navigation = useNavigation();

    return useMutation(
        async (dataToUpdate) => {
            try {
                const userStr = await AsyncStorage.getItem("upcare_user");
                const user = userStr ? JSON.parse(userStr) : null;
                const updatedUser = await updateEducation(dataToUpdate, user);
                return updatedUser;
            } catch (error) {
                throw new Error("Failed to update education: " + error.message);
            }
        },
        {
            onSuccess: (updatedUser) => {
                queryClient.setQueryData(['user'], updatedUser);
                navigation.goBack();
            },
            onError: (error) => {
                console.error("Failed to update education:", error);
            },
            onSettled: () => {
                queryClient.invalidateQueries({ queryKey: ['user'] });
            },
        }
    );
}

and in this UpdateEducation screen:

const UpdateEducation = () => {
    const navigation = useNavigation();
    const route = useRoute();
    const { control, handleSubmit, setValue, watch } = useForm({
        defaultValues: {
            "level": route.params.educationItem?.level || '',
            "school_name": route.params.educationItem?.school_name || '',
            "course": route.params.educationItem?.course || '',
            "from": route.params.educationItem?.from || '',
            "to": route.params.educationItem?.to || '',
        },
    });

    const [fromValue, setFromValue] = useState(new Date(watch('from') || new Date()));
    const [toValue, setToValue] = useState(new Date(watch('to') || new Date()));

    const [showDatePicker, setShowDatePicker] = useState(false);
    const [selectedDateField, setSelectedDateField] = useState(null);

    const handleDateChange = (selectedDate) => {
        setShowDatePicker(false);
        if (selectedDateField && selectedDate) {
            setValue(selectedDateField, selectedDate);
            if (selectedDateField === 'from') {
                setFromValue(selectedDate);
            } else {
                setToValue(selectedDate);
            }
        }
    };

    const showDatePickerForField = (fieldName) => {
        setSelectedDateField(fieldName);
        setShowDatePicker(true);
    };

    const { mutate, isLoading } = useUpdateEducations();

    const onSave = handleSubmit(async (data) => {
        mutate(data);
    });


    const selectedLevel = watch('level');

    return (
        <AuthenticatedLayout>
            <Appbar.Header>
                <Appbar.BackAction onPress={() => navigation.goBack()} />
                <Appbar.Content title="Update Education" />
            </Appbar.Header>
            <View style={styles.container}>
                <View style={styles.formContainer}>
                    <Text style={styles.heading}>Education</Text>

                    <CustomSelectBox
                        control={control}
                        name="level"
                        label="School Level"
                        mode="outlined"
                        value={selectedLevel}
                        onChangeText={(text) => setValue('level', text)}
                        items={[
                            { label: 'Select a Level', value: '' },
                            { label: 'Elementary Education', value: 'elementary' },
                            { label: 'Junior High School', value: 'secondary' },
                            { label: 'Senior High School', value: 'secondary_k12' },
                            { label: 'Bacalaureate', value: 'bacalaureate' },
                            { label: "Master's Degree", value: 'master' },
                            { label: "Doctorate Degree", value: 'doctorate' },
                        ]}
                        rules={{ required: 'Please select a level' }}
                    />
                    <CustomTextInput
                        control={control}
                        name="school_name"
                        label="School Name"
                        mode="outlined"
                        rules={{ required: 'School Name is required' }}
                    />
                    {((selectedLevel === 'secondary_k12') || (selectedLevel === 'bacalaureate') || (selectedLevel === 'master') || (selectedLevel === 'doctorate')) && (
                        <CustomTextInput
                            control={control}
                            name="course"
                            mode="outlined"
                            label={(selectedLevel === 'bacalaureate' || selectedLevel === 'master' || selectedLevel === 'doctorate') ? 'Course' : 'Track'}
                            rules={{ required: (selectedLevel === 'secondary_k12') ? 'Track is required' : 'Course is required' }}
                        />
                    )}

                    <TouchableOpacity
                        style={styles.dateContainer}
                        onPress={() => showDatePickerForField('from')}
                    >
                        <CustomTextInput
                            placeholder="Start date"
                            control={control}
                            mode="outlined"
                            name="from"
                            label="Date Started"
                            editable={false}
                            value={moment(fromValue).format('YYYY-MM-DD')}
                            rules={{ required: 'Start Date is required' }}
                        />
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={styles.dateContainer}
                        onPress={() => showDatePickerForField('to')}
                    >
                        <CustomTextInput
                            placeholder="End date"
                            control={control}
                            mode="outlined"
                            name="to"
                            label="Date Ended"
                            editable={false}
                            value={moment(toValue).format('YYYY-MM-DD')}
                            rules={{ required: 'End Date is required' }}
                        />
                    </TouchableOpacity>

                    {showDatePicker && (
                        <DateTimePicker
                            value={selectedDateField === 'from' ? fromValue : toValue}
                            mode="date"
                            display="default"
                            onChange={handleDateChange}
                        />
                    )}
                    <Button mode="contained" onPress={onSave} disabled={isLoading}>
                        Update
                    </Button>
                </View>
            </View>
        </AuthenticatedLayout>
    );
};

the server side is working but I'm having a problem with the client side please help

0 likes
0 replies

Please or to participate in this conversation.