feat: [FC-86] Home page course list section

.env.test

@@ -23,3 +23,4 @@ PARAGON_THEME_URLS={}
 HOMEPAGE_PROMO_VIDEO_YOUTUBE_ID='test-youtube-id'
 ENABLE_COURSE_DISCOVERY=true
 ENABLE_PROGRAMS=true
+INFO_EMAIL=support@example.com

src/App.test.tsx

@@ -1,6 +1,6 @@
-import { mockCourseDiscoveryResponse } from './catalog/__mocks__';
+import { mockCourseListSearchResponse } from './__mocks__';
 import messages from './catalog/messages';
-import { useCourseDiscovery } from './catalog/data/hooks';
+import { useCourseListSearch } from './data/course-list-search/hooks';
 import {
   render, within, waitFor, screen,
 } from './setupTest';
@@ -16,11 +16,11 @@ jest.mock('@edx/frontend-platform', () => ({
   })),
 }));
 
-jest.mock('./catalog/data/hooks', () => ({
-  useCourseDiscovery: jest.fn(),
+jest.mock('./data/course-list-search/hooks', () => ({
+  useCourseListSearch: jest.fn(),
 }));
 
-const mockCourseDiscovery = useCourseDiscovery as jest.Mock;
+const mockCourseListSearch = useCourseListSearch as jest.Mock;
 
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: ({ children }: { children: React.ReactNode }) => <div data-testid="app-provider">{children}</div>,
@@ -39,8 +39,8 @@ describe('App', () => {
     document.body.innerHTML = '';
   });
 
-  mockCourseDiscovery.mockReturnValue({
-    data: mockCourseDiscoveryResponse,
+  mockCourseListSearch.mockReturnValue({
+    data: mockCourseListSearchResponse,
     isLoading: false,
     isError: false,
   });
@@ -70,16 +70,16 @@ describe('App', () => {
       screen.getByText(
         messages.totalCoursesHeading.defaultMessage.replace(
           '{totalCourses}',
-          mockCourseDiscoveryResponse.results.length,
+          mockCourseListSearchResponse.results.length,
         ),
       ),
     ).toBeInTheDocument();
 
     const courseCards = screen.getAllByRole('link');
-    expect(courseCards.length).toBe(mockCourseDiscoveryResponse.results.length);
+    expect(courseCards.length).toBe(mockCourseListSearchResponse.results.length);
 
     courseCards.forEach((card, index) => {
-      const course = mockCourseDiscoveryResponse.results[index];
+      const course = mockCourseListSearchResponse.results[index];
       const cardContent = within(card);
 
       expect(card).toHaveAttribute('href', `/courses/${course.id}/about`);

src/__mocks__/course.ts

@@ -1,12 +1,15 @@
-export const mockCourseResponse = {
+import { Course } from '@src/generic/course-card/types';
+
+export const mockCourseResponse: Course = {
   id: 'course-v1:edX+DemoX+Demo_Course',
   data: {
     id: 'course-v1:edX+DemoX+Demo_Course',
     course: 'Demo Course',
     start: '2024-04-01T00:00:00Z',
     imageUrl: '/asset-v1:edX+DemoX+Demo_Course+type@asset+block@course_image.jpg',
     org: 'edX',
-    orgImg: '/asset-v1:edX+DemoX+Demo_Course+type@asset+block@org_image.jpg',
+    orgImageUrl: '/asset-v1:edX+DemoX+Demo_Course+type@asset+block@org_image.jpg',
+    advertisedStart: 'Winter 2025',
     content: {
       displayName: 'Demonstration Course',
       overview: 'Course overview',

src/catalog/__mocks__/courseDiscovery.ts → src/__mocks__/courseListSearch.ts

@@ -1,4 +1,4 @@
-export const mockCourseDiscoveryResponse = {
+export const mockCourseListSearchResponse = {
   took: 1,
   total: 3,
   results: [
@@ -18,6 +18,8 @@ export const mockCourseDiscoveryResponse = {
         start: '2030-01-01T00:00:00',
         number: '123',
         org: 'OpenEdx',
+        orgImageUrl: '/asset-v1:OpenEdx+123+2023+type@asset+block@org_image.jpg',
+        advertisedStart: 'Winter 2025',
         modes: [
           'audit',
         ],
@@ -41,6 +43,8 @@ export const mockCourseDiscoveryResponse = {
         start: '2030-01-01T00:00:00',
         number: '312',
         org: 'OpenEdx',
+        orgImageUrl: '/asset-v1:OpenEdx+312+2024+type@asset+block@org_image.jpg',
+        advertisedStart: 'Winter 2025',
         modes: [
           'audit',
         ],
@@ -64,6 +68,8 @@ export const mockCourseDiscoveryResponse = {
         start: '2030-01-01T00:00:00',
         number: '654',
         org: 'dev',
+        orgImageUrl: '/asset-v1:dev+654+2024+type@asset+block@org_image.jpg',
+        advertisedStart: 'Winter 2025',
         modes: [
           'audit',
         ],

src/__mocks__/index.ts

@@ -1 +1,2 @@
 export { mockCourseResponse } from './course';
+export { mockCourseListSearchResponse } from './courseListSearch';

src/catalog/CatalogPage.test.tsx

@@ -1,20 +1,20 @@
 import { render, within, screen } from '../setupTest';
-import { useCourseDiscovery } from './data/hooks';
-import { mockCourseDiscoveryResponse } from './__mocks__';
+import { useCourseListSearch } from '../data/course-list-search/hooks';
+import { mockCourseListSearchResponse } from '../__mocks__';
 import CatalogPage from './CatalogPage';
 import messages from './messages';
 
-jest.mock('./data/hooks', () => ({
-  useCourseDiscovery: jest.fn(),
+jest.mock('../data/course-list-search/hooks', () => ({
+  useCourseListSearch: jest.fn(),
 }));
 
-const mockUseCourseDiscovery = useCourseDiscovery as jest.Mock;
+const mockUseCourseListSearch = useCourseListSearch as jest.Mock;
 
 describe('CatalogPage', () => {
   beforeEach(() => jest.clearAllMocks());
 
   it('should show loading state', () => {
-    mockUseCourseDiscovery.mockReturnValue({
+    mockUseCourseListSearch.mockReturnValue({
       isLoading: true,
       isError: false,
       data: null,
@@ -25,11 +25,11 @@ describe('CatalogPage', () => {
   });
 
   it('should show empty courses state', () => {
-    mockUseCourseDiscovery.mockReturnValue({
+    mockUseCourseListSearch.mockReturnValue({
       isLoading: false,
       isError: false,
       data: {
-        ...mockCourseDiscoveryResponse,
+        ...mockCourseListSearchResponse,
         results: [],
       },
     });
@@ -42,19 +42,19 @@ describe('CatalogPage', () => {
   });
 
   it('should display courses when data is available', () => {
-    mockUseCourseDiscovery.mockReturnValue({
+    mockUseCourseListSearch.mockReturnValue({
       isLoading: false,
       isError: false,
-      data: mockCourseDiscoveryResponse,
+      data: mockCourseListSearchResponse,
     });
 
     render(<CatalogPage />);
     expect(screen.getByText(
-      messages.totalCoursesHeading.defaultMessage.replace('{totalCourses}', mockCourseDiscoveryResponse.results.length),
+      messages.totalCoursesHeading.defaultMessage.replace('{totalCourses}', mockCourseListSearchResponse.results.length),
     )).toBeInTheDocument();
 
     // Verify all courses are displayed
-    mockCourseDiscoveryResponse.results.forEach(course => {
+    mockCourseListSearchResponse.results.forEach(course => {
       expect(screen.getByText(course.data.content.displayName)).toBeInTheDocument();
     });
   });

src/catalog/CatalogPage.tsx

@@ -8,7 +8,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   AlertNotification, CourseCard, Loading, SubHeader,
 } from '../generic';
-import { useCourseDiscovery } from './data/hooks';
+import { useCourseListSearch } from '../data/course-list-search/hooks';
 import messages from './messages';
 
 const GRID_LAYOUT = { xl: [{ span: 9 }, { span: 3 }] };
@@ -19,7 +19,7 @@ const CatalogPage = () => {
     data: courseData,
     isLoading,
     isError,
-  } = useCourseDiscovery();
+  } = useCourseListSearch();
 
   if (isLoading) {
     return (

src/constants.ts

@@ -17,3 +17,5 @@ export const DEFAULT_VIDEO_MODAL_HEIGHT = 500;
 export const DEFAULT_VIDEO_MODAL_WIDTH = 'auto';
 
 export const DEFAULT_VIDEO_MODAL_SIZE = 'lg';
+
+export const DATE_FORMAT_OPTIONS = { month: 'short', day: 'numeric', year: 'numeric' } as const;

src/catalog/data/__tests__/courseDiscovery.test.tsx → src/data/course-list-search/__tests__/courseListSearch.test.tsx

@@ -2,61 +2,61 @@ import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-import { renderHook, waitFor } from '../../../setupTest';
-import { mockCourseDiscoveryResponse } from '../../__mocks__';
-import { fetchCourseDiscovery } from '../api';
-import { useCourseDiscovery } from '../hooks';
-import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '../constants';
-import { getCourseDiscoveryUrl } from '../urls';
+import { renderHook, waitFor } from '@src/setupTest';
+import { mockCourseListSearchResponse } from '@src/__mocks__';
+import { fetchCourseListSearch } from '../api';
+import { useCourseListSearch } from '../hooks';
+import { getCourseListSearchUrl } from '../urls';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedHttpClient: jest.fn(),
 }));
 
 const mockGetAuthenticatedHttpClient = getAuthenticatedHttpClient as jest.Mock;
 
-describe('Course Discovery Data Layer', () => {
-  describe('fetchCourseDiscovery', () => {
+const CUSTOM_PAGE_SIZE = 21;
+const CUSTOM_PAGE_INDEX = 2;
+
+describe('Course List Search Data Layer', () => {
+  describe('fetchCourseListSearch', () => {
     beforeEach(() => jest.clearAllMocks());
 
-    it('should fetch course discovery data with default parameters', async () => {
-      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseDiscoveryResponse });
+    it('should fetch course list search data with default parameters', async () => {
+      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseListSearchResponse });
       mockGetAuthenticatedHttpClient.mockReturnValue({ post: mockPost });
 
-      const result = await fetchCourseDiscovery();
+      const result = await fetchCourseListSearch();
 
-      expect(mockPost).toHaveBeenCalledWith(getCourseDiscoveryUrl(), {
-        page_size: DEFAULT_PAGE_SIZE,
-        page_index: DEFAULT_PAGE_INDEX,
-      });
-      expect(result).toEqual(mockCourseDiscoveryResponse);
+      expect(mockPost).toHaveBeenCalledTimes(1);
+      const [url] = mockPost.mock.calls[0];
+      expect(url).toBe(getCourseListSearchUrl());
+      expect(result).toEqual(mockCourseListSearchResponse);
     });
 
-    it('should fetch course discovery data with custom parameters', async () => {
-      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseDiscoveryResponse });
+    it('should fetch course list search data with custom parameters', async () => {
+      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseListSearchResponse });
       mockGetAuthenticatedHttpClient.mockReturnValue({ post: mockPost });
 
-      const customPageSize = 21;
-      const customPageIndex = 2;
+      await fetchCourseListSearch(CUSTOM_PAGE_SIZE, CUSTOM_PAGE_INDEX, true);
 
-      await fetchCourseDiscovery(customPageSize, customPageIndex);
+      const [url, formData] = mockPost.mock.calls[0];
 
-      expect(mockPost).toHaveBeenCalledWith(getCourseDiscoveryUrl(), {
-        page_size: customPageSize,
-        page_index: customPageIndex,
-      });
+      expect(url).toBe(getCourseListSearchUrl());
+      expect((formData as FormData).get('page_size')).toBe(String(CUSTOM_PAGE_SIZE));
+      expect((formData as FormData).get('page_index')).toBe(String(CUSTOM_PAGE_INDEX));
+      expect((formData as FormData).get('enable_course_sorting_by_start_date')).toBe('true');
     });
 
     it('should handle API errors', async () => {
       const error = new Error('API Error');
       const mockPost = jest.fn().mockRejectedValue(error);
       mockGetAuthenticatedHttpClient.mockReturnValue({ post: mockPost });
 
-      await expect(fetchCourseDiscovery()).rejects.toThrow('API Error');
+      await expect(fetchCourseListSearch()).rejects.toThrow('API Error');
     });
   });
 
-  describe('useCourseDiscovery', () => {
+  describe('useCourseListSearch', () => {
     const queryClient = new QueryClient({
       defaultOptions: {
         queries: {
@@ -77,26 +77,26 @@ describe('Course Discovery Data Layer', () => {
     });
 
     it('should return loading state initially', () => {
-      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseDiscoveryResponse });
+      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseListSearchResponse });
       mockGetAuthenticatedHttpClient.mockReturnValue({ post: mockPost });
 
-      const { result } = renderHook(() => useCourseDiscovery(), { wrapper });
+      const { result } = renderHook(() => useCourseListSearch(), { wrapper });
 
       expect(result.current.isLoading).toBe(true);
       expect(result.current.data).toBeUndefined();
     });
 
     it('should return data when fetch is successful', async () => {
-      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseDiscoveryResponse });
+      const mockPost = jest.fn().mockResolvedValue({ data: mockCourseListSearchResponse });
       mockGetAuthenticatedHttpClient.mockReturnValue({ post: mockPost });
 
-      const { result } = renderHook(() => useCourseDiscovery(), { wrapper });
+      const { result } = renderHook(() => useCourseListSearch(), { wrapper });
 
       await waitFor(() => {
         expect(result.current.isLoading).toBe(false);
       });
 
-      expect(result.current.data).toEqual(mockCourseDiscoveryResponse);
+      expect(result.current.data).toEqual(mockCourseListSearchResponse);
       expect(result.current.isError).toBe(false);
     });
 
@@ -105,7 +105,7 @@ describe('Course Discovery Data Layer', () => {
       const mockPost = jest.fn().mockRejectedValue(error);
       mockGetAuthenticatedHttpClient.mockReturnValue({ post: mockPost });
 
-      const { result } = renderHook(() => useCourseDiscovery(), { wrapper });
+      const { result } = renderHook(() => useCourseListSearch(), { wrapper });
 
       await waitFor(() => {
         expect(result.current.isLoading).toBe(false);