Mar 31, 2024
0
Level 1
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
Please or to participate in this conversation.