diff --git a/frontend/src/components/CreateChoreModal.tsx b/frontend/src/components/CreateChoreModal.tsx index fe34554..bf9c0c9 100644 --- a/frontend/src/components/CreateChoreModal.tsx +++ b/frontend/src/components/CreateChoreModal.tsx @@ -13,7 +13,7 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess title: '', description: '', room: '', - frequency: 'once', + frequency: 'daily', assigned_to: undefined, due_date: '', }); @@ -43,7 +43,25 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess await choreService.createChore(formData); onSuccess(); } catch (err: any) { - setError(err.response?.data?.detail || 'Failed to create task'); + // Handle different error response formats + let errorMessage = 'Failed to create task'; + + if (err.response?.data) { + const errorData = err.response.data; + + // Check if it's a validation error array + if (Array.isArray(errorData.detail)) { + errorMessage = errorData.detail + .map((e: any) => `${e.loc?.join('.')}: ${e.msg}`) + .join(', '); + } else if (typeof errorData.detail === 'string') { + errorMessage = errorData.detail; + } else if (typeof errorData === 'string') { + errorMessage = errorData; + } + } + + setError(errorMessage); } finally { setIsLoading(false); } @@ -90,7 +108,7 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess type="text" value={formData.title} onChange={handleChange} - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900" placeholder="e.g., Vacuum living room" required /> @@ -106,7 +124,7 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess value={formData.description} onChange={handleChange} rows={3} - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900" placeholder="Additional details..." /> @@ -121,7 +139,7 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess type="text" value={formData.room} onChange={handleChange} - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900" placeholder="e.g., Living Room, Kitchen" required /> @@ -136,12 +154,13 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess name="frequency" value={formData.frequency} onChange={handleChange} - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900" required > - + + @@ -155,7 +174,7 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess name="assigned_to" value={formData.assigned_to || ''} onChange={handleChange} - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900" > {users.map(user => ( @@ -176,7 +195,7 @@ const CreateChoreModal: React.FC = ({ onClose, onSuccess type="date" value={formData.due_date} onChange={handleChange} - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900" />