jessikitty/family-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix text color visibility and error handling, update frequency options

Browse Source
This commit is contained in:
jessikitty
2026-01-28 17:04:16 +11:00
parent 3f73ead13f
commit 2b0f3f66c8
1 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/CreateChoreModal.tsx
View File

@@ -13,7 +13,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
title: '',
description: '',
room: '',
frequency: 'once',
frequency: 'daily',
assigned_to: undefined,
due_date: '',
});
@@ -43,7 +43,25 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ 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<CreateChoreModalProps> = ({ 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<CreateChoreModalProps> = ({ 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..."
/>
</div>
@@ -121,7 +139,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ 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<CreateChoreModalProps> = ({ 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
>
<option value="once">Once</option>
<option value="on_trigger">On Trigger</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option>
</select>
</div>
@@ -155,7 +174,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ 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"
>
<option value="">Unassigned</option>
{users.map(user => (
@@ -176,7 +195,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ 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"
/>
</div>