From f28514784a10201fa5d87e8234f43558803e568f Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Wed, 14 Feb 2024 15:15:54 -0500
Subject: [PATCH] feat(unit-links): Updated Course UI

Updated course UI for indention and removed link for sequentials.
---
 src/course-home/outline-tab/SequenceLink.jsx | 154 ++++++++++---------
 src/course-home/outline-tab/UnitLink.jsx     |   8 +-
 src/courseware/data/api.js                   |   3 +-
 3 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
index 0bfac7d081..7e8aa04f43 100644
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -1,8 +1,5 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { Collapsible, Hyperlink, IconButton } from '@edx/paragon';
 import {
@@ -11,10 +8,8 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-// import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import UnitLink from './UnitLink';
@@ -40,8 +35,8 @@ function SequenceLink({
     complete,
     description,
     due,
-    legacyWebUrl,
-    showLink,
+    // legacyWebUrl,
+    // showLink,
     title,  
     unitIds,
   } = sequence;
@@ -54,80 +49,99 @@ function SequenceLink({
   const {
     userTimezone,
   } = useModel('outline', courseId);
-  const {
-    course
-  } = useModel('outline', courseId);
-  const {
-    canLoadCourseware,
-  } = useModel('courseHomeMeta', courseId);
+
+  // const {
+  //   canLoadCourseware,
+  // } = useModel('courseHomeMeta', courseId);
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
+
   const [open, setOpen] = useState(defaultOpen);
   
-  
   useEffect(() => {
-    setOpen(defaultOpen);
-  }, []);
+    setOpen(expand);
+  }, [expand]);
+
+
 
   // canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
-  const coursewareUrl = (
-    canLoadCourseware
-      ? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
-      : <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
-  );
-  const displayTitle = showLink ? coursewareUrl : title;
+  // const coursewareUrl = (
+  //   canLoadCourseware
+  //     ? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
+  //     : <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
+  // );
+  // const displayTitle = showLink ? coursewareUrl : title;
   const sequenceTitle = (
     <div className="row w-100 m-0">
-      <div className="col-auto p-0">
-        {complete ? (
-          <FontAwesomeIcon
-            icon={fasCheckCircle}
-            fixedWidth
-            className="float-left mt-1 text-success"
-            aria-hidden="true"
-            title={intl.formatMessage(messages.completedSection)}
-          />
-        ) : (
-          <FontAwesomeIcon
-            icon={farCheckCircle}
-            fixedWidth
-            className="float-left mt-1 text-gray-400"
-            aria-hidden="true"
-            title={intl.formatMessage(messages.incompleteSection)}
-          />
-        )}
-      </div>
-      <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle">{displayTitle}</span>
-        <span className="sr-only">
-          , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
-        </span>
-        <EffortEstimate className="ml-3 align-middle" block={sequence} />      
-      </div>
-      {due && (
-          <div className="row w-100 m-0 ml-3 pl-3">
-            <small className="text-body pl-2">
-              <FormattedMessage
-                id="learning.outline.sequence-due"
-                defaultMessage="{description} due {assignmentDue}"
-                description="Used below an assignment title"
-                values={{
-                  assignmentDue: (
-                    <FormattedTime
-                      key={`${id}-due`}
-                      day="numeric"
-                      month="short"
-                      year="numeric"
-                      timeZoneName="short"
-                      value={due}
-                      {...timezoneFormatArgs}
-                    />
-                  ),
-                  description: description || '',
-                }}
+       { unitIds.length > 0 ? (
+          <div className="row w-100 m-0">
+          <div className="col-auto p-0">
+            {complete ? (
+              <FontAwesomeIcon
+                icon={fasCheckCircle}
+                fixedWidth
+                className="float-left mt-1 text-success"
+                aria-hidden="true"
+                title={intl.formatMessage(messages.completedSection)}
               />
-            </small>
+            ) : (
+              <FontAwesomeIcon
+                icon={farCheckCircle}
+                fixedWidth
+                className="float-left mt-1 text-gray-400"
+                aria-hidden="true"
+                title={intl.formatMessage(messages.incompleteSection)}
+              />
+            )}
+          </div>
+          <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
+            <span className="align-middle">{title}</span>
+            <span className="sr-only">
+              , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
+            </span>
+            <EffortEstimate className="ml-3 align-middle" block={sequence} />      
+          </div>
+          {due && (
+              <div className="row w-100 m-0 ml-3 pl-3">
+                <small className="text-body pl-2">
+                  <FormattedMessage
+                    id="learning.outline.sequence-due"
+                    defaultMessage="{description} due {assignmentDue}"
+                    description="Used below an assignment title"
+                    values={{
+                      assignmentDue: (
+                        <FormattedTime
+                          key={`${id}-due`}
+                          day="numeric"
+                          month="short"
+                          year="numeric"
+                          timeZoneName="short"
+                          value={due}
+                          {...timezoneFormatArgs}
+                        />
+                      ),
+                      description: description || '',
+                    }}
+                  />
+                </small>
+              </div>
+            )}
+        </div>
+        ) : (
+          <div className="row w-100 m-0">
+            <div className="col-auto p-0">
+              <FontAwesomeIcon
+                  icon={farCheckCircle}
+                  fixedWidth
+                  className="float-left mt-1 text-gray-400"
+                  aria-hidden="true"
+                  title={intl.formatMessage(messages.incompleteSection)}
+                />
+            </div>
+            <div className="col-10 ml-3 p-0 font-weight-bold text-muted-500">
+              <span className="align-middle">{title} (No Units)</span>
+            </div>
           </div>
         )}
     </div>
diff --git a/src/course-home/outline-tab/UnitLink.jsx b/src/course-home/outline-tab/UnitLink.jsx
index d669407056..9c5f289f01 100644
--- a/src/course-home/outline-tab/UnitLink.jsx
+++ b/src/course-home/outline-tab/UnitLink.jsx
@@ -52,7 +52,7 @@ function UnitLink({
 
     return (
       <li>
-        <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
+        <div className={classNames('pl-3', { 'mt-2 pt-2 border-top border-light': !first })}>
           <div className="row w-100 m-0">
             <div className="col-auto p-0">
               {complete ? (
@@ -107,14 +107,8 @@ function UnitLink({
             </div>
           )}
         </div>
-
       </li>
-
-
-
-
     )
-
 }
 
 UnitLink.propTypes = {
diff --git a/src/courseware/data/api.js b/src/courseware/data/api.js
index ccbc3d61c3..857d83d699 100644
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -134,6 +134,7 @@ export async function getCourseMetadata(courseId) {
   return normalizeMetadata(metadata);
 }
 
+
 function normalizeSequenceMetadata(sequence) {
   return {
     sequence: {
@@ -180,7 +181,7 @@ export async function getSequenceMetadata(sequenceId) {
     .get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, {});
 
   return normalizeSequenceMetadata(data);
-}
+} 
 
 const getSequenceHandlerUrl = (courseId, sequenceId) => `${getConfig().LMS_BASE_URL}/courses/${courseId}/xblock/${sequenceId}/handler`;