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: '', title: '',
description: '', description: '',
room: '', room: '',
frequency: 'once', frequency: 'daily',
assigned_to: undefined, assigned_to: undefined,
due_date: '', due_date: '',
}); });
@@ -43,7 +43,25 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
await choreService.createChore(formData); await choreService.createChore(formData);
onSuccess(); onSuccess();
} catch (err: any) { } 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 { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -90,7 +108,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
type="text" type="text"
value={formData.title} value={formData.title}
onChange={handleChange} 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" placeholder="e.g., Vacuum living room"
required required
/> />
@@ -106,7 +124,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
value={formData.description} value={formData.description}
onChange={handleChange} onChange={handleChange}
rows={3} 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..." placeholder="Additional details..."
/> />
</div> </div>
@@ -121,7 +139,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
type="text" type="text"
value={formData.room} value={formData.room}
onChange={handleChange} 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" placeholder="e.g., Living Room, Kitchen"
required required
/> />
@@ -136,12 +154,13 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
name="frequency" name="frequency"
value={formData.frequency} value={formData.frequency}
onChange={handleChange} 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 required
> >
<option value="once">Once</option> <option value="on_trigger">On Trigger</option>
<option value="daily">Daily</option> <option value="daily">Daily</option>
<option value="weekly">Weekly</option> <option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option> <option value="monthly">Monthly</option>
</select> </select>
</div> </div>
@@ -155,7 +174,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
name="assigned_to" name="assigned_to"
value={formData.assigned_to || ''} value={formData.assigned_to || ''}
onChange={handleChange} 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> <option value="">Unassigned</option>
{users.map(user => ( {users.map(user => (
@@ -176,7 +195,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
type="date" type="date"
value={formData.due_date} value={formData.due_date}
onChange={handleChange} 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> </div>