chore: clean up redux hook usage

src/containers/RelatedProgramsModal/components/ProgramCard.jsx

@@ -54,15 +54,14 @@ export const ProgramCard = ({ data }) => {
 };
 ProgramCard.propTypes = {
   data: PropTypes.shape({
-    estimatedNumberOfWeeks: PropTypes.number,
-    numberOfCourses: PropTypes.number,
     bannerUrl: PropTypes.string,
+    estimatedNumberOfWeeks: PropTypes.number,
     logoUrl: PropTypes.string,
-    title: PropTypes.string,
-    provider: PropTypes.string,
+    numberOfCourses: PropTypes.number,
     programType: PropTypes.string,
     programUrl: PropTypes.string,
-    programTypeUrl: PropTypes.string,
+    provider: PropTypes.string,
+    title: PropTypes.string,
   }).isRequired,
 };
 

src/containers/RelatedProgramsModal/hooks.js

@@ -1,27 +1,10 @@
-import { selectors } from 'data/redux';
-import { useCardValues } from 'hooks';
-
-const { cardData } = selectors;
-const { programs } = cardData;
+import { hooks as appHooks } from 'data/redux';
 
 export const useProgramData = ({
   courseNumber,
-}) => {
-  const data = useCardValues(courseNumber, {
-    courseTitle: cardData.courseTitle,
-    relatedPrograms: cardData.relatedPrograms,
-  });
-  return {
-    courseTitle: data.courseTitle,
-    relatedPrograms: data.relatedPrograms.map(program => ({
-      estimatedNumberOfWeeks: programs.estimatedNumberOfWeeks(program),
-      numberOfCourses: programs.numberOfCourses(program),
-      programType: programs.programType(program),
-      programTypeUrl: programs.programTypeUrl(program),
-      provider: programs.provider(program),
-      title: programs.title(program),
-    })),
-  };
-};
+}) => ({
+  courseTitle: appHooks.useCardCourseData(courseNumber).title,
+  relatedPrograms: appHooks.useCardRelatedProgramsData(courseNumber).list,
+});
 
 export default useProgramData;

src/containers/RelatedProgramsModal/hooks.test.js

@@ -1,67 +1,26 @@
-import { testCardValues } from 'testUtils';
-import * as appHooks from 'hooks';
-import { selectors } from 'data/redux';
+import { hooks as appHooks } from 'data/redux';
 
 import * as hooks from './hooks';
 
-jest.mock('data/redux/cardData/selectors', () => ({
-  ...jest.requireActual('data/redux/cardData/selectors'),
-  programs: {
-    estimatedNumberOfWeeks: (p) => p.estimatedNumberOfWeeks,
-    numberOfCourses: (p) => p.numberOfCourses,
-    programType: (p) => p.programType,
-    programTypeUrl: (p) => p.programTypeUrl,
-    provider: (p) => p.provider,
-    title: (p) => p.title,
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseData: jest.fn(),
+    useCardRelatedProgramsData: jest.fn(),
   },
 }));
 
-const { fieldKeys } = selectors.cardData;
-
 const courseNumber = 'test-course-number';
 
 const courseTitle = 'test-course-title';
-const relatedPrograms = [
-  {
-    estimatedNumberOfWeeks: 1,
-    numberOfCourses: 2,
-    programType: 'test-program-type-1',
-    programTypeUrl: 'test-program-type-1-url',
-    provider: 'test-provider-1',
-    title: 'test-program-title-1',
-  },
-  {
-    estimatedNumberOfWeeks: 2,
-    numberOfCourses: 3,
-    programType: 'test-program-type-2',
-    programTypeUrl: 'test-program-type-2-url',
-    provider: 'test-provider-2',
-    title: 'test-program-title-2',
-  },
-  {
-    estimatedNumberOfWeeks: 3,
-    numberOfCourses: 5,
-    programType: 'test-program-type-3',
-    programTypeUrl: 'test-program-type-3-url',
-    provider: 'test-provider-3',
-    title: 'test-program-title-3',
-  },
-];
+const relatedPrograms = ['some', 'programs'];
 
 describe('RelatedProgramsModal hooks', () => {
-  let out;
-  beforeEach(() => {
-    appHooks.useCardValues.mockReturnValueOnce({ courseTitle, relatedPrograms });
-    out = hooks.useProgramData({ courseNumber });
-  });
-  testCardValues(courseNumber, {
-    courseTitle: fieldKeys.courseTitle,
-    relatedPrograms: fieldKeys.relatedPrograms,
-  });
-  test('courseTitle loads course title', () => {
-    expect(out.courseTitle).toEqual(courseTitle);
-  });
-  test('relatedPrograms loads from course run related programs', () => {
-    expect(out.relatedPrograms).toEqual(relatedPrograms);
+  it('forwards course title and related programs list by course number', () => {
+    appHooks.useCardCourseData.mockReturnValue({ title: courseTitle });
+    appHooks.useCardRelatedProgramsData.mockReturnValue({ list: relatedPrograms });
+    const out = hooks.useProgramData({ courseNumber });
+    expect(appHooks.useCardCourseData).toHaveBeenCalledWith(courseNumber);
+    expect(appHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(courseNumber);
+    expect(out).toEqual({ courseTitle, relatedPrograms });
   });
 });

src/containers/RelatedProgramsModal/index.jsx

@@ -40,7 +40,7 @@ export const RelatedProgramsModal = ({
           columnSizes={{ lg: 6, xlg: 4, xs: 12 }}
         >
           {relatedPrograms.map((programData) => (
-            <ProgramCard key={`${programData.programUrl}`} data={programData} />
+            <ProgramCard key={programData.programUrl} data={programData} />
           ))}
         </CardGrid>
       </ModalDialog.Body>