Merge pull request #61 from guillermoscript/updates-of-packages

Update npm dependencies and CourseCard component

Author: guillermoscript

components/dashboards/student/course/CourseCard.tsx

@@ -46,7 +46,7 @@ const CourseCard = ({
                     alt='Course Image' className="rounded-md object-cover"
                 />
             </Link>
-            <div className="flex justify-center gap-4">
+            <div className="flex flex-wrap justify-center gap-4">
                 <Link
                     className={cn(
                         buttonVariants({ variant: 'default' }),

components/dashboards/student/course/EnrollButton.tsx

@@ -6,55 +6,44 @@ import { enrollUserToCourseAction } from '@/actions/dashboard/courseActions'
 import { Button } from '@/components/ui/button'
 import { useToast } from '@/components/ui/use-toast'
 
-export default function EnrollButton ({
-    courseId
-}: {
-    courseId: number
-}) {
+export default function EnrollButton ({ courseId }: { courseId: number }) {
     const { toast } = useToast()
     const [loading, setLoading] = useState(false)
 
     return (
-        <form
-            onSubmit={async (e) => {
-                e.preventDefault()
-                async () => {
-                    setLoading(true)
-                    try {
-                        const enrollUser = await enrollUserToCourseAction({
-                            courseId
-                        })
-
-                        console.log(enrollUser)
-
-                        if (enrollUser.status === 'error') {
-                            return toast({
-                                title: enrollUser.message,
-                                description: enrollUser.error,
-                                variant: 'destructive'
-                            })
-                        }
+        <Button
+            disabled={loading}
+            onClick={async () => {
+                setLoading(true)
+                try {
+                    const enrollUser = await enrollUserToCourseAction({
+                        courseId
+                    })
 
-                        toast({
-                            title: enrollUser.message
-                        })
-                    } catch (error) {
-                        toast({
-                            title: 'Error enrolling user',
-                            description: error.message,
+                    if (enrollUser.status === 'error') {
+                        return toast({
+                            title: enrollUser.message,
+                            description: enrollUser.error,
                             variant: 'destructive'
                         })
-                    } finally {
-                        setLoading(false)
                     }
+
+                    toast({
+                        title: enrollUser.message
+                    })
+                } catch (error) {
+                    toast({
+                        title: 'Error enrolling user',
+                        description: error.message,
+                        variant: 'destructive'
+                    })
+                } finally {
+                    setLoading(false)
                 }
-            }}
+            }
+            }
         >
-            <Button
-                disabled={loading}
-            >
-                {loading ? 'Enrolling...' : 'Enroll Now'}
-            </Button>
-        </form>
+            {loading ? 'Enrolling...' : 'Enroll Now'}
+        </Button>
     )
 }