Skip to content

Commit

Permalink
feat(unit-links): Fixing formatting
Browse files Browse the repository at this point in the history 
Fixing the formatting based on the lint testing
  • Loading branch information
@JackSteele24 @becdavid
JackSteele24 authored and becdavid committed Jun 13, 2024
1 parent f285147 commit bf5efa6
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 156 deletions.
39 changes: 18 additions & 21 deletions src/course-home/data/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { logInfo } from '@edx/frontend-platform/logging';
import { appendBrowserTimezoneToUrl } from '../../utils';


const calculateAssignmentTypeGrades = (points, assignmentWeight, numDroppable) => {
let dropCount = numDroppable;
// Drop the lowest grades
Expand Down Expand Up @@ -158,25 +157,26 @@ export function normalizeOutlineBlocks(courseId, blocks) {
showLink: !!block.legacy_web_url,
title: block.display_name,
unitIds: block.children || [],
};
};
break;
case 'vertical':
models.units[block.id] = {
complete: block.complete,
description: block.description,
due: block.due,
effortActivities: block.effort_activities,
effortTime: block.effort_time,
icon: block.icon,
id: block.id,
legacyWebUrl: block.legacy_web_url,
// The presence of an legacy URL for the sequence indicates that we want this
// sequence to be a clickable link in the outline (even though, if the new
// courseware experience is active, we will ignore `legacyWebUrl` and build a
// link to the MFE ourselves).
showLink: !!block.legacy_web_url,
title: block.display_name,
}
models.units[block.id] = {
complete: block.complete,
description: block.description,
due: block.due,
effortActivities: block.effort_activities,
effortTime: block.effort_time,
icon: block.icon,
id: block.id,
legacyWebUrl: block.legacy_web_url,
// The presence of an legacy URL for the sequence indicates that we want this
// sequence to be a clickable link in the outline (even though, if the new
// courseware experience is active, we will ignore `legacyWebUrl` and build a
// link to the MFE ourselves).
showLink: !!block.legacy_web_url,
title: block.display_name,
};
break;

default:
logInfo(`Unexpected course block type: ${block.type} with ID ${block.id}. Expected block types are course, chapter, and sequential.`);
Expand Down Expand Up @@ -377,9 +377,6 @@ export function getTimeOffsetMillis(headerDate, requestTime, responseTime) {
return timeOffsetMillis;
}




export async function getOutlineTabData(courseId) {
const url = `${getConfig().LMS_BASE_URL}/api/course_home/outline/${courseId}`;
let { tabData } = {};
Expand Down
5 changes: 2 additions & 3 deletions src/course-home/outline-tab/Section.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ function Section({
},
} = useModel('outline', courseId);


const [open, setOpen] = useState(defaultOpen);

useEffect(() => {
Expand Down Expand Up @@ -97,13 +96,13 @@ function Section({
)}
>
<ol className="list-unstyled">
{sequenceIds.map((sequenceId, index) => (
{sequenceIds.map((sequenceId) => (
<SequenceLink
key={sequenceId}
id={sequenceId}
courseId={courseId}
defaultOpen={sequences[sequenceId].resumeBlock}
expand={expand}
expand={expand}
sequence={sequences[sequenceId]}
/>
))}
Expand Down
131 changes: 62 additions & 69 deletions src/course-home/outline-tab/SequenceLink.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Collapsible, Hyperlink, IconButton } from '@edx/paragon';
import { Collapsible, IconButton } from '@edx/paragon';
import {
FormattedMessage,
FormattedTime,
Expand All @@ -14,15 +13,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import UnitLink from './UnitLink';


import EffortEstimate from '../../shared/effort-estimate';
import { useModel } from '../../generic/model-store';

import genericMessages from '../../generic/messages';
import messages from './messages';



function SequenceLink({
id,
intl,
Expand All @@ -37,7 +33,7 @@ function SequenceLink({
due,
// legacyWebUrl,
// showLink,
title,
title,
unitIds,
} = sequence;
const {
Expand All @@ -56,15 +52,12 @@ function SequenceLink({

const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};


const [open, setOpen] = useState(defaultOpen);

useEffect(() => {
setOpen(expand);
}, [expand]);



// canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
// const coursewareUrl = (
// canLoadCourseware
Expand All @@ -74,8 +67,8 @@ function SequenceLink({
// const displayTitle = showLink ? coursewareUrl : title;
const sequenceTitle = (
<div className="row w-100 m-0">
{ unitIds.length > 0 ? (
<div className="row w-100 m-0">
{unitIds.length > 0 ? (
<div className="row w-100 m-0">
<div className="col-auto p-0">
{complete ? (
<FontAwesomeIcon
Expand All @@ -100,56 +93,56 @@ function SequenceLink({
<span className="sr-only">
, {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
</span>
<EffortEstimate className="ml-3 align-middle" block={sequence} />
<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 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 className="col-10 ml-3 p-0 font-weight-bold text-muted-500">
<span className="align-middle">{title} (No Units)</span>
</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>
)
);

return (
<li>
<Collapsible
<Collapsible
className="mb-2"
styling="card-lg"
title={sequenceTitle}
Expand All @@ -162,29 +155,29 @@ function SequenceLink({
onClick={() => { setOpen(true); }}
size="sm"
/>
)}
)}
iconWhenOpen={(
<IconButton
alt={intl.formatMessage(genericMessages.close)}
icon={faMinus}
onClick={() => { setOpen(false); }}
size="sm"
/>
)}
>
<ol className="list-unstyled">
{unitIds.map((unitId, index) => (
<UnitLink
key={unitId}
id={unitId}
courseId={courseId}
unit={units[unitId]}
sequenceId={id}
first={index === 0}
></UnitLink>
))}
</ol>
</Collapsible>
)}
>
<ol className="list-unstyled">
{unitIds.map((unitId, index) => (
<UnitLink
key={unitId}
id={unitId}
courseId={courseId}
unit={units[unitId]}
sequenceId={id}
first={index === 0}
/>
))}
</ol>
</Collapsible>
</li>
);
}
Expand Down
Loading

0 comments on commit bf5efa6

Please sign in to comment.