rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enhance activity name update functionality with loading state and error handling

Browse source
This commit is contained in:
swve 2025-03-22 13:54:30 +01:00
parent 5a80dd17f1
commit 4a3176d702
1 changed files with 28 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

37
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -9,6 +9,7 @@ import {
FilePenLine, FilePenLine,
FileSymlink, FileSymlink,
Globe, Globe,
Loader2,
Lock, Lock,
MoreVertical, MoreVertical,
Pencil, Pencil,
@ -52,6 +53,7 @@ function ActivityElement(props: ActivitiyElementProps) {
const [selectedActivity, setSelectedActivity] = React.useState< const [selectedActivity, setSelectedActivity] = React.useState<
string | undefined string | undefined
>(undefined) >(undefined)
const [isUpdatingName, setIsUpdatingName] = React.useState<boolean>(false)
const activityUUID = props.activity.activity_uuid const activityUUID = props.activity.activity_uuid
const isMobile = useMediaQuery('(max-width: 767px)') const isMobile = useMediaQuery('(max-width: 767px)')
@ -92,18 +94,29 @@ function ActivityElement(props: ActivitiyElementProps) {
modifiedActivity?.activityId === activityId && modifiedActivity?.activityId === activityId &&
selectedActivity !== undefined selectedActivity !== undefined
) { ) {
setIsUpdatingName(true)
let modifiedActivityCopy = { let modifiedActivityCopy = {
...props.activity, ...props.activity,
name: modifiedActivity.activityName, name: modifiedActivity.activityName,
} }
await updateActivity(modifiedActivityCopy, activityUUID, access_token) try {
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`) await updateActivity(modifiedActivityCopy, activityUUID, access_token)
await revalidateTags(['courses'], props.orgslug) mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
router.refresh() await revalidateTags(['courses'], props.orgslug)
toast.success('Activity name updated successfully')
router.refresh()
} catch (error) {
toast.error('Failed to update activity name')
console.error('Error updating activity name:', error)
} finally {
setIsUpdatingName(false)
setSelectedActivity(undefined)
}
} else {
setSelectedActivity(undefined)
} }
setSelectedActivity(undefined)
} }
return ( return (
@ -142,20 +155,26 @@ function ActivityElement(props: ActivitiyElementProps) {
activityName: e.target.value, activityName: e.target.value,
}) })
} }
disabled={isUpdatingName}
/> />
<button <button
onClick={() => updateActivityName(props.activity.id)} onClick={() => updateActivityName(props.activity.id)}
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900" className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={isUpdatingName}
> >
<Save size={12} /> {isUpdatingName ? (
<Loader2 size={12} className="animate-spin" />
) : (
<Save size={12} />
)}
</button> </button>
</div> </div>
) : ( ) : (
<p className="first-letter:uppercase text-center sm:text-left"> {props.activity.name} </p> <p className="first-letter:uppercase text-center sm:text-left"> {props.activity.name} </p>
)} )}
<Pencil <Pencil
onClick={() => setSelectedActivity(props.activity.id)} onClick={() => !isUpdatingName && setSelectedActivity(props.activity.id)}
className="text-neutral-400 hover:cursor-pointer size-3 min-w-3" className={`text-neutral-400 hover:cursor-pointer size-3 min-w-3 ${isUpdatingName ? 'opacity-50 cursor-not-allowed' : ''}`}
/> />
</div> </div>