diff --git a/src/containers/CourseCard/components/Banners/CertificateBanner.jsx b/src/containers/CourseCard/components/Banners/CertificateBanner.jsx index 9074d5e..981e8ed 100644 --- a/src/containers/CourseCard/components/Banners/CertificateBanner.jsx +++ b/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 ( @@ -31,12 +33,21 @@ export const CertificateBanner = ({ courseNumber }) => { ); } - 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 ( Grade required to pass the course: {minPassingGrade}% ); diff --git a/src/containers/CourseCard/components/CourseCardActions.jsx b/src/containers/CourseCard/components/CourseCardActions.jsx index 40de33e..84af3c2 100644 --- a/src/containers/CourseCard/components/CourseCardActions.jsx +++ b/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; diff --git a/src/containers/CourseCard/index.jsx b/src/containers/CourseCard/index.jsx index 1bc4064..4141661 100644 --- a/src/containers/CourseCard/index.jsx +++ b/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 (
diff --git a/src/data/redux/cardData/selectors.js b/src/data/redux/cardData/selectors.js index e1450b0..cd7b4a6 100644 --- a/src/data/redux/cardData/selectors.js +++ b/src/data/redux/cardData/selectors.js @@ -64,4 +64,5 @@ export default StrictDict({ cardSelector, ...cardSelectors, programs, + fieldKeys, }); diff --git a/src/hooks.js b/src/hooks.js index 9caad1e..e78075d 100644 --- a/src/hooks.js +++ b/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 = () => ({});