Merge pull request #299 from learnhouse/feat/add-loading-states

Add loading toasts

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 (
         <div className='flex w-full flex-col'>
             <AssignmentProvider assignment_uuid={'assignment_' + params.assignmentuuid}>
@@ -93,9 +93,11 @@ 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 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.')

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()
   }

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()
   }

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`)
     }

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)

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) {

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()