Open
Description
_🛠️ Refactor suggestion_
Add error handling and loading state to the save function.
The current implementation lacks error handling during the profile update operation and doesn't provide any feedback to the user during the saving process.
+ const [isSaving, setIsSaving] = useState(false);
+ const [saveError, setSaveError] = useState<string | null>(null);
const handleSave = async () => {
+ setIsSaving(true);
+ setSaveError(null);
+ try {
const userController = new UserController();
profile.avatar = formData.avatar;
profile.profileBackground = formData.profileBackground;
profile.name = formData.name;
profile.username = formData.username;
profile.bio = formData.bio;
profile.department = formData.department;
profile.email = formData.email;
profile.grade = Number(formData.grade);
profile.identity = Number(formData.identity);
profile.phone = formData.phone;
await userController.updateUser(profile.id, profile);
setIsEditing(false);
+ } catch (error) {
+ setSaveError(error instanceof Error ? error.message : '更新資料時發生錯誤');
+ console.error('Failed to update profile:', error);
+ } finally {
+ setIsSaving(false);
+ }
}Then, add UI feedback for loading and error states:
<button
=> {
setIsEditing(!isEditing)
if (isEditing) {
handleSave()
}
}}
- className="text-blue-600 hover:underline"
+ className={`${isSaving ? 'text-gray-400' : 'text-blue-600'} hover:underline`}
+ disabled={isSaving}
>
- {isEditing ? '完成' : '編輯個人檔案'}
+ {isEditing ? (isSaving ? '保存中...' : '完成') : '編輯個人檔案'}
</button>
+ {saveError && (
+ <div className="mt-2 text-red-500 text-sm">
+ {saveError}
+ </div>
+ )}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
// new loading and error state
const [isSaving, setIsSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const handleSave = async () => {
setIsSaving(true);
setSaveError(null);
try {
const userController = new UserController();
profile.avatar = formData.avatar;
profile.profileBackground = formData.profileBackground;
profile.name = formData.name;
profile.username = formData.username;
profile.bio = formData.bio;
profile.department = formData.department;
profile.email = formData.email;
profile.grade = Number(formData.grade);
profile.identity = Number(formData.identity);
profile.phone = formData.phone;
await userController.updateUser(profile.id, profile);
setIsEditing(false);
} catch (error) {
setSaveError(error instanceof Error ? error.message : '更新資料時發生錯誤');
console.error('Failed to update profile:', error);
} finally {
setIsSaving(false);
}
}
<button
=> {
setIsEditing(!isEditing)
if (isEditing) {
handleSave()
}
}}
className={`${isSaving ? 'text-gray-400' : 'text-blue-600'} hover:underline`}
disabled={isSaving}
>
{isEditing ? (isSaving ? '保存中...' : '完成') : '編輯個人檔案'}
</button>
{saveError && (
<div className="mt-2 text-red-500 text-sm">
{saveError}
</div>
)}
🤖 Prompt for AI Agents
In src/routes/home/profile.tsx around lines 53 to 68, the handleSave function
lacks error handling and loading state management. To fix this, introduce a
loading state variable that is set to true when the save operation starts and
false when it ends. Wrap the updateUser call in a try-catch block to catch any
errors, and set an error state variable if an error occurs. Finally, update the
UI to display loading indicators and error messages based on these states to
provide user feedback during the save process.
Originally posted by @coderabbitai[bot] in #165 (comment)