feat: integrate ConfirmationModal for quitting all courses with user confirmation

This commit is contained in:
swve 2025-06-12 16:26:01 +02:00
parent 1dd100352b
commit 3345fb871c

View file

@ -12,6 +12,7 @@ import useSWR from 'swr'
import { removeCourse } from '@services/courses/activity' import { removeCourse } from '@services/courses/activity'
import { revalidateTags } from '@services/utils/ts/requests' import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
function Trail(params: any) { function Trail(params: any) {
let orgslug = params.orgslug let orgslug = params.orgslug
@ -59,20 +60,28 @@ function Trail(params: any) {
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<TypeOfContentTitle title="Trail" type="tra" /> <TypeOfContentTitle title="Trail" type="tra" />
{trail?.runs?.length > 0 && ( {trail?.runs?.length > 0 && (
<button <ConfirmationModal
onClick={handleQuitAllCourses} confirmationButtonText={isQuittingAll ? `Quitting Courses (${quittingProgress}%)` : "Quit All Courses"}
disabled={isQuittingAll} confirmationMessage="Are you sure you want to quit all courses? This action cannot be undone and you will lose all your progress."
className={`px-4 py-2 rounded-lg font-medium text-sm transition-all dialogTitle="Quit All Courses?"
${isQuittingAll dialogTrigger={
? 'bg-gray-100 text-gray-500 cursor-not-allowed' <button
: 'bg-red-100 text-red-700 hover:bg-red-200' disabled={isQuittingAll}
}`} className={`px-4 py-2 rounded-lg font-medium text-sm transition-all
> ${isQuittingAll
{isQuittingAll ? 'bg-gray-100 text-gray-500 cursor-not-allowed'
? `Quitting Courses (${quittingProgress}%)` : 'bg-red-100 text-red-700 hover:bg-red-200'
: 'Quit All Courses' }`}
>
{isQuittingAll
? `Quitting Courses (${quittingProgress}%)`
: 'Quit All Courses'
}
</button>
} }
</button> functionToExecute={handleQuitAllCourses}
status="warning"
/>
)} )}
</div> </div>
{!trail ? ( {!trail ? (