From c68fa66ff88bf0de80f50944070dfe028728b85f Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 13 Aug 2024 18:13:58 +0200 Subject: [PATCH] feat: Add loading toasts --- .../dash/assignments/[assignmentuuid]/page.tsx | 6 ++++-- .../EditCourseStructure/Buttons/NewActivityButton.tsx | 11 +++++++++++ .../DraggableElements/ActivityElement.tsx | 11 +++++++++-- .../Objects/CourseUpdates/CourseUpdates.tsx | 2 ++ .../Activities/Create/NewActivityModal/Assignment.tsx | 2 ++ .../Objects/Modals/Course/Create/CreateCourse.tsx | 2 ++ .../components/Objects/Thumbnails/CourseThumbnail.tsx | 4 ++++ 7 files changed, 34 insertions(+), 4 deletions(-) diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx index c55684fa..1027ed60 100644 --- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx +++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx @@ -20,7 +20,7 @@ const AssignmentSubmissionsSubPage = dynamic(() => import('./subpages/Assignment function AssignmentEdit() { const params = useParams<{ assignmentuuid: string; }>() const searchParams = useSearchParams() - const [selectedSubPage, setSelectedSubPage] = React.useState( searchParams.get('subpage') || 'editor') + const [selectedSubPage, setSelectedSubPage] = React.useState(searchParams.get('subpage') || 'editor') return (
@@ -92,10 +92,12 @@ function PublishingState() { async function updateAssignmentPublishState(assignmentUUID: string) { const res = await updateAssignment({ published: !assignment?.assignment_object?.published }, assignmentUUID, access_token) - const res2 = await updateActivity({ published: !assignment?.assignment_object?.published }, assignment?.activity_object?.activity_uuid, access_token) + const res2 = await updateActivity({ published: !assignment?.assignment_object?.published }, assignment?.activity_object?.activity_uuid, access_token) + const toast_loading = toast.loading('Updating assignment...') if (res.success && res2) { mutate(`${getAPIUrl()}assignments/${assignmentUUID}`) toast.success('The assignment has been updated successfully') + toast.dismiss(toast_loading) } else { toast.error('Error updating assignment, please retry later.') diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx index 77d02ff0..896632ff 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx @@ -14,6 +14,7 @@ import { useLHSession } from '@components/Contexts/LHSessionContext' import { useRouter } from 'next/navigation' import React, { useEffect } from 'react' import { mutate } from 'swr' +import toast from 'react-hot-toast' type NewActivityButtonProps = { chapterId: string @@ -41,8 +42,11 @@ function NewActivityButton(props: NewActivityButtonProps) { props.orgslug, { revalidate: 1800 } ) + const toast_loading = toast.loading('Creating activity...') await createActivity(activity, props.chapterId, org.org_id, access_token) mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`) + toast.dismiss(toast_loading) + toast.success('Activity created successfully') setNewActivityModal(false) await revalidateTags(['courses'], props.orgslug) router.refresh() @@ -55,9 +59,13 @@ function NewActivityButton(props: NewActivityButtonProps) { activity: any, chapterId: string ) => { + toast.loading('Uploading file and creating activity...') await createFileActivity(file, type, activity, chapterId, access_token) mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`) setNewActivityModal(false) + toast.dismiss() + toast.success('File uploaded successfully') + toast.success('Activity created successfully') await revalidateTags(['courses'], props.orgslug) router.refresh() } @@ -68,6 +76,7 @@ function NewActivityButton(props: NewActivityButtonProps) { activity: any, chapterId: string ) => { + const toast_loading = toast.loading('Creating activity and uploading file...') await createExternalVideoActivity( external_video_data, activity, @@ -75,6 +84,8 @@ function NewActivityButton(props: NewActivityButtonProps) { ) mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`) setNewActivityModal(false) + toast.dismiss(toast_loading) + toast.success('Activity created successfully') await revalidateTags(['courses'], props.orgslug) router.refresh() } diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx index 264d3ce5..81374057 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx @@ -25,6 +25,7 @@ import { mutate } from 'swr' import { deleteAssignmentUsingActivityUUID, getAssignmentFromActivityUUID } from '@services/courses/assignments' import { useOrg } from '@components/Contexts/OrgContext' import { useCourse } from '@components/Contexts/CourseContext' +import toast from 'react-hot-toast' type ActivitiyElementProps = { orgslug: string @@ -51,6 +52,7 @@ function ActivityElement(props: ActivitiyElementProps) { const activityUUID = props.activity.activity_uuid async function deleteActivityUI() { + const toast_loading = toast.loading('Deleting activity...') // Assignments if (props.activity.activity_type === 'TYPE_ASSIGNMENT') { await deleteAssignmentUsingActivityUUID(props.activity.activity_uuid, access_token) @@ -59,10 +61,13 @@ function ActivityElement(props: ActivitiyElementProps) { await deleteActivity(props.activity.activity_uuid, access_token) mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`) await revalidateTags(['courses'], props.orgslug) + toast.dismiss(toast_loading) + toast.success('Activity deleted successfully') router.refresh() } async function changePublicStatus() { + const toast_loading = toast.loading('Updating assignment...') await updateActivity( { ...props.activity, @@ -72,6 +77,8 @@ function ActivityElement(props: ActivitiyElementProps) { access_token ) mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`) + toast.dismiss(toast_loading) + toast.success('The activity has been updated successfully') await revalidateTags(['courses'], props.orgslug) router.refresh() } @@ -158,8 +165,8 @@ function ActivityElement(props: ActivitiyElementProps) { {/* Publishing */}
changePublicStatus()} diff --git a/apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx b/apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx index 62085e29..a0709a6e 100644 --- a/apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx +++ b/apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx @@ -234,7 +234,9 @@ const DeleteUpdateButton = ({ update }: any) => { const handleDelete = async () => { const res = await deleteCourseUpdate(course.courseStructure.course_uuid, update.courseupdate_uuid, session.data?.tokens?.access_token) + const toast_loading = toast.loading('Deleting update...') if (res.status === 200) { + toast.dismiss(toast_loading) toast.success('Update deleted successfully') mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`) } diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx index cd304165..17ea3fbe 100644 --- a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx +++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx @@ -66,8 +66,10 @@ function NewAssignment({ submitActivity, chapterId, course, closeModal }: any) { chapter_id: chapterId, activity_id: activity_res?.id, }, session.data?.tokens?.access_token) + const toast_loading = toast.loading('Creating assignment...') if (res.success) { + toast.dismiss(toast_loading) toast.success('Assignment created successfully') } else { toast.error(res.data.detail) diff --git a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx index 6f8ce885..f3246ee4 100644 --- a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx +++ b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx @@ -76,9 +76,11 @@ function CreateCourseModal({ closeModal, orgslug }: any) { thumbnail, session.data?.tokens?.access_token ) + const toast_loading = toast.loading('Creating course...') if (res.success) { await revalidateTags(['courses'], orgslug) setIsSubmitting(false) + toast.dismiss(toast_loading) toast.success('Course created successfully') if (res.data.org_id == orgId) { diff --git a/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx b/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx index 0362779f..5a4ada50 100644 --- a/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx +++ b/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx @@ -11,6 +11,7 @@ import { useLHSession } from '@components/Contexts/LHSessionContext' import Link from 'next/link' import { useRouter } from 'next/navigation' import React, { useEffect } from 'react' +import toast from 'react-hot-toast' type PropsType = { course: any @@ -28,7 +29,10 @@ function CourseThumbnail(props: PropsType) { const session = useLHSession() as any; async function deleteCourses(course_uuid: any) { + const toast_loading = toast.loading('Deleting course...') await deleteCourseFromBackend(course_uuid, session.data?.tokens?.access_token) + toast.dismiss(toast_loading) + toast.success('Course deleted successfully') await revalidateTags(['courses'], props.orgslug) router.refresh()