feat: cleaner card value hook

src/containers/CourseCard/components/Banners/CertificateBanner.jsx

@@ -1,24 +1,26 @@
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 
 import { Hyperlink } from '@edx/paragon';
 import { CheckCircle } from '@edx/paragon/icons';
 
 import { selectors } from 'data/redux';
 import Banner from 'components/Banner';
+import { getCardValue, getCardValues } from 'hooks';
 
 const { cardData } = selectors;
 
 const restrictedMessage = 'Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting ';
 
 export const CertificateBanner = ({ courseNumber }) => {
-  const cardValue = (sel) => useSelector(cardData.cardSelector(sel, courseNumber));
+  const cardValue = getCardValue(courseNumber);
 
-  const isRestricted = cardValue(cardData.isRestricted);
-  const isAudit = cardValue(cardData.isAudit);
-  const isVerified = cardValue(cardData.isVerified);
+  const { isRestricted, isAudit, isVerified } = getCardValues(courseNumber, {
+    isRestricted: cardData.isRestricted,
+    isAudit: cardData.isAudit,
+    isVerified: cardData.isVerified,
+  });
   if (isRestricted) {
     return (
       <Banner variant="danger">
@@ -31,12 +33,21 @@ export const CertificateBanner = ({ courseNumber }) => {
       </Banner>
     );
   }
-  const isPassing = cardValue(cardData.isPassing);
-  const minPassingGrade = cardValue(cardData.minPassingGrade);
-  const isCourseRunFinished = cardValue(cardData.isCourseRunFinished);
-  const isCertDownloadable = cardValue(cardData.isCertDownloadable);
-  const isCertEarnedButUnavailable = cardValue(cardData.isCertEarnedButUnavailable);
-  const certAvailableDate = cardValue(cardData.certAvailableDate);
+  const {
+    isPassing,
+    minPassingGrade,
+    isCourseRunFinished,
+    isCertDownloadable,
+    isCertEarnedButUnavailable,
+    certAvailableDate,
+  } = getCardValues(courseNumber, {
+    isPassing: cardData.isPassing,
+    minPassingGrade: cardData.minPassingGrade,
+    isCourseRunFinished: cardData.isCourseRunFinished,
+    isCertDownloadable: cardData.isCertDownloadable,
+    isCertEarnedButUnavailable: cardData.isCertEarnedButUnavailable,
+    certAvailableDate: cardData.certAvailableDate,
+  });
   if (!isPassing) {
     if (isAudit) {
       return (<Banner> Grade required to pass the course: {minPassingGrade}% </Banner>);

src/containers/CourseCard/components/CourseCardActions.jsx

@@ -1,22 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 
 import { Button } from '@edx/paragon';
 import { Locked } from '@edx/paragon/icons';
 
 import { selectors } from 'data/redux';
+import { getCardValues } from 'hooks';
 
 const { cardData } = selectors;
 
 export const CourseCardActions = ({ courseNumber }) => {
-  const cardValue = (sel) => useSelector(cardData.cardSelector(sel, courseNumber));
-  const canUpgrade = cardValue(cardData.canUpgrade);
-  const isAudit = cardValue(cardData.isAudit);
-  const isAuditAccessExpired = cardValue(cardData.isAuditAccessExpired);
-  const isVerified = cardValue(cardData.isVerified);
-  const isPending = cardValue(cardData.isCourseRunPending);
-  const isFinished = cardValue(cardData.isCourseRunFinished);
+  const {
+    canUpgrade,
+    isAudit,
+    isAuditAccessExpired,
+    isVerified,
+    isPending,
+    isFinished,
+  } = getCardValues(courseNumber, {
+    canUpgrade: cardData.canUpgrade,
+    isAudit: cardData.isAudit,
+    isAuditAccessExpired: cardData.isAuditAccessExpired,
+    isVerified: cardData.isVerified,
+    isPending: cardData.isCourseRunPending,
+    isFinished: cardData.isCourseRunFinished,
+  });
 
   let primary;
   let secondary = null;

src/containers/CourseCard/index.jsx

@@ -6,7 +6,7 @@ import { Card } from '@edx/paragon';
 
 import { selectors } from 'data/redux';
 
-import { getCardValue } from 'hooks';
+import { getCardValues } from 'hooks';
 
 import RelatedProgramsBadge from './components/RelatedProgramsBadge';
 import CourseCardMenu from './components/CourseCardMenu';
@@ -20,11 +20,17 @@ import CourseCardActions from './components/CourseCardActions';
 const { cardData } = selectors;
 
 export const CourseCard = ({ courseNumber }) => {
-  const cardValue = getCardValue(courseNumber);
-  const title = cardValue(cardData.courseTitle);
-  const bannerUrl = cardValue(cardData.courseBannerUrl);
-  const accessExpirationDate = cardValue(cardData.courseRunAccessExpirationDate);
-  const providerName = cardValue(cardData.providerName);
+  const {
+    title,
+    bannerUrl,
+    accessExpirationDate,
+    providerName,
+  } = getCardValues(courseNumber, {
+    title: cardData.courseTitle,
+    bannerUrl: cardData.courseBannerUrl,
+    accessExpirationDate: cardData.courseRunAccessExpirationDate,
+    providerName: cardData.providerName,
+  });
   return (
     <div className="mb-3">
       <Card orientation="horizontal">

src/data/redux/cardData/selectors.js

@@ -64,4 +64,5 @@ export default StrictDict({
   cardSelector,
   ...cardSelectors,
   programs,
+  fieldKeys,
 });

src/hooks.js

@@ -4,7 +4,17 @@ import { selectors } from 'data/redux';
 
 const { cardData } = selectors;
 
-export const getCardValue = (courseNumber) => (sel) => useSelector(cardData.cardSelector(sel, courseNumber));
+export const getCardValue = (courseNumber) => (sel) => (
+  useSelector(cardData.cardSelector(sel, courseNumber))
+);
+
+export const getCardValues = (courseNumber, mapping) => {
+  const cardValue = getCardValue(courseNumber);
+  return Object.keys(mapping).reduce(
+    (obj, key) => ({ ...obj, [key]: cardValue(mapping[key]) }),
+    {},
+  );
+};
 
 export const nullMethod = () => ({});