feat(badges): Render Badge Progress on outline page when badge earned.

The following changes were made: - Add unique key for BadgeProgressCard - Return `badge_progress` from LMS API outline call and use it to display `Badge Progress` on outline page.
CUCWD · Jan 9, 2024 · 2cab667 · 2cab667
1 parent cb756b6
commit 2cab667
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,8 +44,10 @@
     "@reduxjs/toolkit": "1.8.1",
     "classnames": "2.3.1",
     "core-js": "3.21.1",
+    "iframe-resizer": "^4.3.2",
     "js-cookie": "3.0.1",
     "lodash.camelcase": "4.3.0",
+    "lodash.snakecase": "^4.1.1",
     "mime-types": "^2.1.34",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.34",

diff --git a/src/course-home/badges-tab/BadgeProgressTab.jsx b/src/course-home/badges-tab/BadgeProgressTab.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 // import PropTypes from 'prop-types';
+import snakeCase from 'lodash.snakecase';
 import { useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { StatusAlert } from '@edx/paragon';
@@ -94,9 +95,13 @@ const renderBadgeProgress = () => {
               <div className="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                 {progress && (
                   <div className="row equal-col-height">
-                    {progress.map(learnerProgress => (
-                      <BadgeProgressCard key={learnerProgress.blockId} data={learnerProgress} />
-                    ))}
+                    {progress.map(learnerProgress => {
+                      const itemKey = snakeCase(`card ${learnerProgress.blockDisplayName} ${username}`);
+                      return (
+                        <BadgeProgressCard key={`${itemKey}`} data={learnerProgress} />
+                      )
+                    }
+                    )}
                   </div>
                 )}
               </div>

diff --git a/src/course-home/badges-tab/badge-header/BadgeTabsNavigation.jsx b/src/course-home/badges-tab/badge-header/BadgeTabsNavigation.jsx
@@ -38,13 +38,13 @@ function BadgeTabsNavigation({
           className="badge-nav-tabs"
           aria-label={intl.formatMessage(messages['learn.navigation.badge.tabs.label'])}
         >
-          <LinkedLogo
+          {/* <LinkedLogo
             className="logo"
             href="https://badgr.com/auth/login"
             src={logo}
             alt="Badgr"
             target="_blank"
-          />
+          /> */}
           {tabs.map(({
             url, title, slug, disabled,
           }) => (

diff --git a/src/course-home/badges-tab/badge-progress/banner/BadgeProgressBanner.jsx b/src/course-home/badges-tab/badge-progress/banner/BadgeProgressBanner.jsx
@@ -13,21 +13,21 @@ import React from 'react';
        : "Here is your progress through the badges available for this course. Click each badge to learn more or to save and share badges you've earned."
    );
 
-   // d-flex justify-content-left
-   return (
-     <div className={[classNames('row', 'learningpath', indicatorProgress, 'mb-4', 'pt-4', 'pb-4', 'pr-5', 'pl-5')]}>
-       { hasProgress && (
-         <>
-           <div className="row w-100">
-             <h2 className="col">{getPathTitle()}</h2>
-           </div>
-           <div className="row w-100">
-             <p className="col">
-               {getPathSubHeading()}
-             </p>
-           </div>
-         </>
-       )}
+  // d-flex justify-content-left
+  return (
+    <div className={[classNames('row', 'learningpath', indicatorProgress, 'ml-0', 'mr-0', 'mb-4', 'pt-4', 'pb-4', 'pr-5', 'pl-5')]}>
+      { hasProgress && (
+        <>
+          <div className="row w-100">
+            <h2 className="col">{getPathTitle()}</h2>
+          </div>
+          <div className="row w-100">
+            <p className="col">
+              {getPathSubHeading()}
+            </p>
+          </div>
+        </>
+      )}
 
        { !hasProgress && (
          <h2>This course either has no learner progress or is not setup for badging.</h2>

diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js
@@ -131,6 +131,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
 
       case 'chapter':
         models.sections[block.id] = {
+          badgeProgress: block.badge_progress,
           complete: block.complete,
           id: block.id,
           title: block.display_name,

diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
@@ -163,6 +163,7 @@ function OutlineTab({ intl }) {
                 {courses[rootCourseId].sectionIds.map((sectionId) => (
                   <Section
                     key={sectionId}
+                    org={org}
                     courseId={courseId}
                     defaultOpen={sections[sectionId].resumeBlock}
                     expand={expandAll}

diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, IconButton } from '@edx/paragon';
+import { Button, Collapsible, IconButton } from '@edx/paragon';
 import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -13,13 +13,15 @@ import genericMessages from '../../generic/messages';
 import messages from './messages';
 
 function Section({
+  org,
   courseId,
   defaultOpen,
   expand,
   intl,
   section,
 }) {
   const {
+    badgeProgress,
     complete,
     sequenceIds,
     title,
@@ -40,6 +42,8 @@ function Section({
     setOpen(defaultOpen);
   }, []);
 
+  const badgeProgressUrl = './badges/progress';
+
   const sectionTitle = (
     <div className="row w-100 m-0">
       <div className="col-auto p-0">
@@ -66,6 +70,19 @@ function Section({
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>
+        {badgeProgress ? (
+          <>
+            {badgeProgressUrl && (
+                <span className="col-2 col-sm-auto p-3">
+                  <Button variant="brand" size="inline" href={badgeProgressUrl}>
+                    Badge Progress
+                  </Button>
+                </span>
+              )}
+          </>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );