feat: use react-tanstack request handling & show enrollment errors

Author: bra-i-am

src/learningpath/CourseCard.jsx

@@ -2,6 +2,8 @@ import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Card, Button, Icon,
+  Stack,
+  Toast,
 } from '@openedx/paragon';
 import {
   AccessTime,
@@ -140,27 +142,26 @@ export const CourseCard = ({
       </Card.Section>
 
       <Card.Footer>
-        <div className="d-flex flex-column flex-lg-row w-100">
+        <Stack className="w-100" direction={isMedium ? 'vertical' : 'horizontal'} gap={2}>
           <Button
             variant="outline-primary"
             size="sm"
-            className="flex-fill py-2 mr-2"
+            className="flex-fill py-2"
             onClick={onClickViewButton}
           >
             {formatMessage(messages.moreDetails)}
           </Button>
 
-          {!disableStartButton && (
           <Button
             variant="primary"
             size="sm"
+            disabled={disableStartButton}
             className="flex-fill py-2"
             onClick={onClick}
           >
             { buttonText }
           </Button>
-          )}
-        </div>
+        </Stack>
       </Card.Footer>
     </Card>
   );
@@ -204,6 +205,7 @@ export const CourseCardWithEnrollment = ({
 
   const courseHomeUrl = buildCourseHomeUrl(course.id);
 
+  const [errorMessage, setErrorMessage] = useState('');
   const handleCourseAction = async () => {
     const { administrator } = getAuthenticatedUser();
 
@@ -213,31 +215,36 @@ export const CourseCardWithEnrollment = ({
     }
 
     setEnrolling(true);
-    try {
-      const result = await enrollCourseMutation.mutateAsync(course.id);
-      if (result.success) {
+    enrollCourseMutation.mutate(course.id, {
+      onSuccess: () => {
         window.location.href = courseHomeUrl;
-      } else {
-        // eslint-disable-next-line no-console
-        console.error('Failed to enroll in the course:', result.data?.error || 'Unknown error');
-      }
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Failed to enroll in the course:', error);
-    } finally {
-      setEnrolling(false);
-    }
+        setEnrolling(false);
+      },
+      onError: ({ response }) => {
+        setErrorMessage(response.data.detail);
+        setEnrolling(false);
+      },
+    });
   };
 
   return (
-    <CourseCard
-      course={courseWithEnrollment}
-      onClick={handleCourseAction}
-      onClickViewButton={onClick}
-      isEnrolledInLearningPath={isEnrolledInLearningPath}
-      orientationOverride={orientationOverride}
-      isEnrolledInCourse={courseWithEnrollment.isEnrolledInCourse}
-    />
+    <>
+      <Toast
+        onClose={() => setErrorMessage('')}
+        show={!!errorMessage}
+      >
+        {errorMessage}
+      </Toast>
+
+      <CourseCard
+        course={courseWithEnrollment}
+        onClick={handleCourseAction}
+        onClickViewButton={onClick}
+        isEnrolledInLearningPath={isEnrolledInLearningPath}
+        orientationOverride={orientationOverride}
+        isEnrolledInCourse={courseWithEnrollment.isEnrolledInCourse}
+      />
+    </>
   );
 };
 

src/learningpath/LearningPathDetails.jsx

@@ -3,6 +3,7 @@ import { useParams, Link, useSearchParams } from 'react-router-dom';
 import {
   Row, Spinner, Icon, ModalLayer, Button, Chip, Card, Collapsible, Col,
   Stack,
+  Toast,
 } from '@openedx/paragon';
 import {
   Person,
@@ -49,7 +50,7 @@ const LearningPathDetailPage = () => {
 
   const { data: learningPaths, isLoading: loadingLearningPaths } = useLearningPaths();
 
-  const key = learningPaths?.find((lp) => lp.slug === catalogId).id;
+  const key = learningPaths?.find((lp) => lp.slug === catalogId)?.id;
 
   const {
     data: detail,
@@ -70,20 +71,23 @@ const LearningPathDetailPage = () => {
     setIsModalOpen(false);
   };
 
-  const handleAllowAndContinue = async () => {
+  const [errorMessage, setErrorMessage] = useState('');
+  const handleAllowAndContinue = () => {
     if (detail && !detail.enrollmentDate) {
       setEnrolling(true);
       setIsModalOpen(false);
-      try {
-        await enrollMutation.mutateAsync(key);
-        setLocalStatus('accepted');
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Enrollment failed:', error);
-      } finally {
-        setActiveTab('courses');
-        setEnrolling(false);
-      }
+      enrollMutation.mutate(key, {
+        onSuccess: () => {
+          setLocalStatus('accepted');
+          setEnrolling(false);
+          setActiveTab('courses');
+        },
+        onError: ({ response }) => {
+          setErrorMessage(response.data.detail);
+          setEnrolling(false);
+        },
+
+      });
     }
   };
 
@@ -172,10 +176,12 @@ const LearningPathDetailPage = () => {
   } else if (detailError || !detail) {
     content = (
       <div className="p-4">
-        <p>{formatMessage(messages.failedToLoadDetail)}</p>
+        <p className="text-center">{formatMessage(messages.failedToLoadDetail)}</p>
         <Link to="/">
-          <Icon src={ChevronLeft} />
-          <span>{formatMessage(messages.backToMyCatalogs)}</span>
+          <Stack direction="horizontal">
+            <Icon src={ChevronLeft} />
+            <span>{formatMessage(messages.backToMyCatalogs)}</span>
+          </Stack>
         </Link>
       </div>
     );
@@ -338,6 +344,7 @@ const LearningPathDetailPage = () => {
                       learningPathSteps={detail?.steps}
                       learningPathId={key}
                       onCourseClick={handleCourseViewButton}
+                      isEnrolledInLearningPath={isEnrolledInLearningPath}
                     />
                   )}
                 </section>
@@ -378,6 +385,13 @@ const LearningPathDetailPage = () => {
 
   return (
     <>
+      <Toast
+        onClose={() => setErrorMessage('')}
+        show={!!errorMessage}
+      >
+        {errorMessage}
+      </Toast>
+
       {content}
 
       {selectedCourseKey && (

src/learningpath/data/api.js

@@ -109,40 +109,16 @@ export async function fetchAllCourseCompletions() {
 
 export async function enrollInLearningPath(learningPathId) {
   const client = getAuthenticatedHttpClient();
-  try {
-    const response = await client.post(
-      `${getConfig().LMS_BASE_URL}/partner_catalog/api/v1/catalogs/${learningPathId}/enroll/`,
-    );
-    return {
-      success: true,
-      status: response.status,
-    };
-  } catch (error) {
-    return {
-      success: false,
-      status: error.response?.status,
-      error,
-    };
-  }
+  return client.post(
+    `${getConfig().LMS_BASE_URL}/partner_catalog/api/v1/catalogs/${learningPathId}/enroll/`,
+  );
 }
 
 export async function enrollInCourse(learningPathId, courseId) {
   const client = getAuthenticatedHttpClient();
-  try {
-    const response = await client.post(
-      `${getConfig().LMS_BASE_URL}/partner_catalog/api/v1/catalogs/${learningPathId}/courses/${courseId}/enroll/`,
-    );
-    return {
-      success: true,
-      status: response.status,
-    };
-  } catch (error) {
-    return {
-      success: false,
-      status: error.response?.status,
-      error,
-    };
-  }
+  return client.post(
+    `${getConfig().LMS_BASE_URL}/partner_catalog/api/v1/catalogs/${learningPathId}/courses/${courseId}/enroll/`,
+  );
 }
 
 export async function fetchCourseEnrollmentStatus(courseId) {