fix(certificates): use real certificate data

src/components/ProfilePage/Certificates.jsx

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { Row, Col, Card, CardBody, CardTitle, Button, Form } from 'reactstrap';
 import { connect } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
 
 import messages from './Certificates.messages';
 
@@ -45,22 +43,30 @@ class Certificates extends React.Component {
   }
 
   renderCertificate({
-    type: { name }, title, organization, downloadUrl,
+    certificateType, courseDisplayName, courseOrganization, downloadUrl,
   }) {
     return (
       <Col key={downloadUrl} sm={6}>
         <Card className="mb-4 certificate">
           <CardBody>
             <CardTitle>
-              <p className="small mb-0">{name}</p>
-              <h4 className="certificate-title">{title}</h4>
+              <p className="small mb-0">{certificateType}</p>
+              <h4 className="certificate-title">{courseDisplayName}</h4>
             </CardTitle>
-            <p className="small mb-0">From</p>
-            <h6 className="mb-4">{organization}</h6>
+            <p className="small mb-0">
+              <FormattedMessage
+                id="profile.certificate.organization.label"
+                defaultMessage="From"
+              />
+            </p>
+            <h6 className="mb-4">{courseOrganization}</h6>
             <div>
               <Button outline color="primary" href={downloadUrl} target="blank">
-                <FontAwesomeIcon className="ml-n1 mr-2" icon={faDownload} />
-                Download
+                <FormattedMessage
+                  id="profile.view.certificate"
+                  defaultMessage="View Certificate"
+                  description="view certificate button label"
+                />
               </Button>
             </div>
           </CardBody>

src/config/environment.js

@@ -14,6 +14,7 @@ export const configuration = {
   ENVIRONMENT: process.env.NODE_ENV,
   ACCOUNTS_API_BASE_URL: `${process.env.LMS_BASE_URL}/api/user/v1/accounts`,
   PREFERENCES_API_BASE_URL: `${process.env.LMS_BASE_URL}/api/user/v1/preferences`,
+  CERTIFICATES_API_BASE_URL: `${process.env.LMS_BASE_URL}/api/certificates/v0/certificates`,
 };
 
 export const features = {};

src/constants/certificates.js

@@ -0,0 +1,6 @@
+const CERTIFICATE_TYPES = {
+  verified: 'Verified Certificate',
+  professional: 'Professional Certificate',
+};
+
+export default CERTIFICATE_TYPES;

src/selectors/ProfilePageSelector.js

@@ -27,7 +27,7 @@ export const editableFormModeSelector = createSelector(
     // If the prop doesn't exist, that means it hasn't been set (for the current user's profile)
     // or is being hidden from us (for other users' profiles)
     let propExists = account[formId] != null && account[formId].length > 0;
-    propExists = formId === 'certificates' ? certificates !== null : propExists; // overwrite for certificates
+    propExists = formId === 'certificates' ? certificates.length > 0 : propExists; // overwrite for certificates
     // If this isn't the current user's profile...
     if (!isCurrentUserProfile) {
       // then there are only two options: static or nothing.

src/services/ProfileApiService.js

@@ -1,4 +1,7 @@
+import camelcaseKeys from 'camelcase-keys';
+
 import apiClient from '../config/apiClient';
+import CERTIFICATE_TYPES from '../constants/certificates';
 import { configuration } from '../config/environment';
 import { unflattenAndTransformKeys, flattenAndTransformKeys } from './utils';
 
@@ -25,6 +28,18 @@ export function mapClientKey(key) {
   return clientToServerKeyMap[key] || key;
 }
 
+function transformCertificateData(data) {
+  const transformedData = [];
+  data.forEach((cert) => {
+    transformedData.push({
+      ...camelcaseKeys(cert),
+      certificateType: CERTIFICATE_TYPES[cert.certificate_type],
+      downloadUrl: `${configuration.LMS_BASE_URL}${cert.download_url}`,
+    });
+  });
+  return transformedData;
+}
+
 export function getAccount(username) {
   return new Promise((resolve, reject) => {
     apiClient
@@ -138,30 +153,17 @@ export function patchPreferences(username, preferences) {
   });
 }
 
-export function getCourseCertificates(username) { // eslint-disable-line no-unused-vars
-  return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
-    const dummyData = [
-      // {
-      //   type: {
-      //     key: 'micro_masters',
-      //     name: 'Micro Masters',
-      //   },
-      //   title: 'Microtonal Scales',
-      //   organization: 'New England Conservatory',
-      //   downloadUrl: 'https://pics.me.me/booplesnoot-36468371.png',
-      // },
-      // {
-      //   type: {
-      //     key: 'micro_masters',
-      //     name: 'Micro Masters',
-      //   },
-      //   title: 'Kazoo Pinch Harmonics',
-      //   organization: 'New England Conservatory',
-      //   downloadUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR88selLYRHDQemO8MnY3w3ajlSuKZcoRhVTp3eGvKq2HMRTn8q',
-      // },
-    ];
-    setTimeout(() => {
-      resolve(dummyData);
-    }, 200);
+export function getCourseCertificates(username) {
+  const url = `${configuration.CERTIFICATES_API_BASE_URL}/${username}/`;
+
+  return new Promise((resolve, reject) => {
+    apiClient
+      .get(url)
+      .then(({ data }) => {
+        resolve(transformCertificateData(data));
+      })
+      .catch((error) => {
+        reject(error);
+      });
   });
 }