Fix React error #130 - Remove authentication race condition
- Remove setTimeout delays in AdminAuthContext login function - Make authentication state updates synchronous - Replace setTimeout navigation with state-based navigation in AdminLoginPage - Add proper error handling and component lifecycle management in CreateEventPage - Prevent navigation if component unmounts during async operations This fixes the issue where users would see React error #130 during login and couldn't create events or save settings. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Calendar,
|
||||
@@ -45,6 +45,13 @@ const COLOR_THEMES = [
|
||||
|
||||
export const CreateEventPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const isMountedRef = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
event_type: 'wedding',
|
||||
@@ -65,18 +72,27 @@ export const CreateEventPage: React.FC = () => {
|
||||
const createMutation = useMutation({
|
||||
mutationFn: eventsService.createEvent,
|
||||
onSuccess: (data) => {
|
||||
toast.success('Event created successfully!');
|
||||
navigate(`/admin/events/${data.id}`);
|
||||
if (isMountedRef.current) {
|
||||
toast.success('Event created successfully!');
|
||||
navigate(`/admin/events/${data.id}`);
|
||||
}
|
||||
},
|
||||
onError: (error: any) => {
|
||||
if (error.response?.data?.errors) {
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
if (error.code === 'ERR_NETWORK' || error.code === 'ERR_CONNECTION_RESET') {
|
||||
toast.error('Network error. Please check your connection and try again.');
|
||||
} else if (error.response?.data?.errors) {
|
||||
const newErrors: Record<string, string> = {};
|
||||
error.response.data.errors.forEach((err: any) => {
|
||||
newErrors[err.path] = err.msg;
|
||||
});
|
||||
setErrors(newErrors);
|
||||
} else if (error.response?.status === 401) {
|
||||
toast.error('Session expired. Please login again.');
|
||||
navigate('/admin/login');
|
||||
} else {
|
||||
toast.error('Failed to create event');
|
||||
toast.error(error.response?.data?.error || 'Failed to create event');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user