General course info card created (#61)

* feat: setting up query provider and course info hook and api

* feat: general course info card created

* refactor: adaptations to work with te real api and some code improvements

* refactor: updating run variable name to match api response name

* chore: removing duplicated courseId on route for course info page

Author: jacobo-dominguez-wgu

package-lock.json

@@ -2,10 +2,10 @@ import { CurrentAppProvider, getAppConfig } from '@openedx/frontend-base';
 
 import { appId } from './constants';
 
-import './main.scss';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Outlet } from 'react-router-dom';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import './main.scss';
 
 const queryClient = new QueryClient();
 

src/Main.tsx

@@ -11,7 +11,7 @@ const app: App = {
   slots: [],
   config: {
     NODE_ENV: 'development',
-    LMS_BASE_URL: 'http://localhost:18000'
+    LMS_BASE_URL: 'http://local.openedx.io:8000'
   }
 };
 

src/app.ts

@@ -1,10 +1,33 @@
 import { screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import CourseInfoPage from './CourseInfoPage';
 import { renderWithIntl } from '../testUtils';
 
+jest.mock('./components/generalCourseInfo', () => ({
+  GeneralCourseInfo: () => <div>General Course Info Component</div>,
+}));
+
 describe('CourseInfoPage', () => {
-  it('renders course information', () => {
-    renderWithIntl(<CourseInfoPage />);
-    expect(screen.getByText('Course Info')).toBeInTheDocument();
+  const renderComponent = () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    return renderWithIntl(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <CourseInfoPage />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  it('renders GeneralCourseInfo component', () => {
+    renderComponent();
+    expect(screen.getByText('General Course Info Component')).toBeInTheDocument();
   });
 });

src/courseInfo/CourseInfoPage.test.tsx

@@ -1,11 +1,11 @@
-import EnrollmentInformation from './components/enrollmentInformation/EnrollmentInformation';
+import { Container } from '@openedx/paragon';
+import { GeneralCourseInfo } from './components/generalCourseInfo';
 
 const CourseInfoPage = () => {
   return (
-    <div>
-      <h1>Course Info</h1>
-      <EnrollmentInformation />
-    </div>
+    <Container className="mt-4.5 mb-4" fluid="xl">
+      <GeneralCourseInfo />
+    </Container>
   );
 };
 

src/courseInfo/CourseInfoPage.tsx

@@ -0,0 +1,105 @@
+import { screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { GeneralCourseInfo } from './GeneralCourseInfo';
+import { useCourseInfo } from '../../../data/apiHook';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createQueryMock, renderWithIntl } from '../../../testUtils';
+
+jest.mock('../../../data/apiHook');
+jest.mock('react-router', () => ({
+  useParams: () => ({ courseId: 'test-course-id' }),
+}));
+
+const mockUseCourseInfo = useCourseInfo as jest.MockedFunction<typeof useCourseInfo>;
+
+const mockCourseInfo = {
+  org: 'TestOrg',
+  courseId: 'CS101',
+  courseRun: '2024_T1',
+  displayName: 'Introduction to Computer Science',
+  start: '2024-01-15T00:00:00Z',
+  end: '2024-06-15T00:00:00Z',
+  hasStarted: true,
+  hasEnded: false,
+};
+
+describe('GeneralCourseInfo', () => {
+  let queryClient: QueryClient;
+  const renderComponent = () => {
+    return renderWithIntl(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <GeneralCourseInfo />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+    jest.clearAllMocks();
+  });
+
+  it('displays skeleton when is in loading state', () => {
+    mockUseCourseInfo.mockReturnValue(createQueryMock(undefined, true));
+    const { container } = renderComponent();
+    expect(container.querySelector('.react-loading-skeleton')).toBeInTheDocument();
+  });
+
+  it('renders course information', () => {
+    mockUseCourseInfo.mockReturnValue(createQueryMock(mockCourseInfo));
+    renderComponent();
+
+    expect(screen.getByText(mockCourseInfo.org)).toBeInTheDocument();
+    expect(screen.getByText(mockCourseInfo.courseId)).toBeInTheDocument();
+    expect(screen.getByText(mockCourseInfo.courseRun)).toBeInTheDocument();
+    expect(screen.getByText(mockCourseInfo.displayName)).toBeInTheDocument();
+  });
+
+  it('displays active status for ongoing course', () => {
+    mockUseCourseInfo.mockReturnValue(createQueryMock(mockCourseInfo));
+    renderComponent();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('displays upcoming status for future course', () => {
+    const upcomingCourse = { ...mockCourseInfo, hasStarted: false };
+    mockUseCourseInfo.mockReturnValue(createQueryMock(upcomingCourse));
+    renderComponent();
+    expect(screen.getByText('Upcoming')).toBeInTheDocument();
+  });
+
+  it('displays archived status for ended course', () => {
+    const archivedCourse = { ...mockCourseInfo, hasStarted: true, hasEnded: true };
+    mockUseCourseInfo.mockReturnValue(createQueryMock(archivedCourse));
+    renderComponent();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+  });
+
+  it('displays formatted dates', () => {
+    mockUseCourseInfo.mockReturnValue(createQueryMock(mockCourseInfo));
+    renderComponent();
+    expect(screen.getByText(/Jan 15, 2024/)).toBeInTheDocument();
+    expect(screen.getByText(/Jun 15, 2024/)).toBeInTheDocument();
+  });
+
+  it('displays "Not set" fallback for all missing course data fields', () => {
+    const incompleteCourseInfo = {
+      org: null,
+      courseId: null,
+      run: null,
+      displayName: null,
+      start: null,
+      end: null,
+    };
+    mockUseCourseInfo.mockReturnValue(createQueryMock(incompleteCourseInfo));
+    renderComponent();
+    const notSetElements = screen.getAllByText(/Not Set/);
+    expect(notSetElements.length).toBeGreaterThanOrEqual(6); // org, courseId, run, status, displayName, start date, end date
+  });
+});

src/courseInfo/components/enrollmentInformation/EnrollmentInformation.tsx

@@ -0,0 +1,71 @@
+import { Card, Skeleton } from '@openedx/paragon';
+import { StatusBadge } from './StatusBadge';
+import { useCourseInfo } from '../../../data/apiHook';
+import { useParams } from 'react-router';
+import { FormattedDate, useIntl } from '@openedx/frontend-base';
+import { useCallback } from 'react';
+import messages from './messages';
+
+const COURSE_STATUS = {
+  ACTIVE: 'Active',
+  ARCHIVED: 'Archived',
+  UPCOMING: 'Upcoming',
+};
+
+const GeneralCourseInfo = () => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams();
+  const { data: courseInfo, isLoading } = useCourseInfo(courseId);
+  const NOT_SET_FALLBACK = intl.formatMessage(messages.courseInfoNotSetFallback);
+
+  const getCourseStatus = useCallback((courseInfo) => {
+    if (!courseInfo || (courseInfo.hasStarted === undefined && courseInfo.hasEnded === undefined)) return NOT_SET_FALLBACK;
+    if (!courseInfo.hasStarted) return COURSE_STATUS.UPCOMING;
+    if (courseInfo.hasStarted && !courseInfo.hasEnded) return COURSE_STATUS.ACTIVE;
+    if (courseInfo.hasStarted && courseInfo.hasEnded) return COURSE_STATUS.ARCHIVED;
+    return NOT_SET_FALLBACK;
+  }, [NOT_SET_FALLBACK]);
+
+  const renderDate = (date: string | null) => {
+    if (!date) return NOT_SET_FALLBACK;
+    /// Added UTC timezone because it was showing the date with 1 day offset
+    return <FormattedDate value={date} year="numeric" month="short" day="2-digit" timeZone="UTC" />;
+  };
+
+  if (isLoading && !courseInfo) {
+    return (
+      <Card className="general-course-info">
+        <Card.Section>
+          <Skeleton count={3} />
+        </Card.Section>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="general-course-info">
+      <Card.Section>
+        <div className="x-small mb-1.5">
+          <span className="mr-2">{courseInfo.org ?? NOT_SET_FALLBACK}</span>/
+          <span className="mx-2">{courseInfo.courseId ?? NOT_SET_FALLBACK}</span>/
+          <span className="ml-2">{courseInfo.courseRun ?? NOT_SET_FALLBACK}</span>
+        </div>
+        <h3 className="text-primary-700 mb-3">{courseInfo.displayName ?? NOT_SET_FALLBACK}</h3>
+        <div className="d-flex align-items-center">
+          <div className="mr-4">
+            <StatusBadge status={getCourseStatus(courseInfo)} />
+          </div>
+          <div className="x-small text-body">
+            <p className="mb-0">
+              {renderDate(courseInfo.start)}
+              {' – '}
+              {renderDate(courseInfo.end)}
+            </p>
+          </div>
+        </div>
+      </Card.Section>
+    </Card>
+  );
+};
+
+export { GeneralCourseInfo };

src/courseInfo/components/enrollmentInformation/messages.ts

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { StatusBadge } from './StatusBadge';
+
+describe('StatusBadge', () => {
+  it('renders status text', () => {
+    render(<StatusBadge status="active" />);
+    expect(screen.getByText('active')).toBeInTheDocument();
+  });
+
+  it('applies success variant for active status', () => {
+    render(<StatusBadge status="active" />);
+    const badge = screen.getByText('active');
+    expect(badge).toHaveClass('badge-success');
+  });
+
+  it('applies light variant for archived status', () => {
+    render(<StatusBadge status="archived" />);
+    const badge = screen.getByText('archived');
+    expect(badge).toHaveClass('badge-light');
+  });
+
+  it('applies warning variant for upcoming status', () => {
+    render(<StatusBadge status="upcoming" />);
+    const badge = screen.getByText('upcoming');
+    expect(badge).toHaveClass('badge-warning');
+  });
+
+  it('applies light variant for unknown status', () => {
+    render(<StatusBadge status="unknown" />);
+    const badge = screen.getByText('unknown');
+    expect(badge).toHaveClass('badge-light');
+  });
+
+  it('handles case insensitive status matching', () => {
+    render(<StatusBadge status="ACTIVE" />);
+    const badge = screen.getByText('ACTIVE');
+    expect(badge).toHaveClass('badge-success');
+  });
+
+  it('applies correct CSS classes', () => {
+    render(<StatusBadge status="active" />);
+    const badge = screen.getByText('active');
+    expect(badge).toHaveClass('py-1.5', 'px-3', 'x-small', 'font-weight-normal');
+  });
+});