-
{title}
+
+ {/* Top Line */}
+ {!first &&
}
+
+ {/* Dot */}
+
+
+ {/* Bottom Line */}
+ {!last &&
}
+
+ {/* Content */}
+
+
+
+
+
+ {badges}
+
+ {items.map((item) => {
+ const showLink = item.link && isLearnerAssignment(item);
+ const title = showLink ? (
{item.title}) : item.title;
+ const available = item.learnerHasAccess && (item.link || !isLearnerAssignment(item));
+ const textColor = available ? 'text-dark-500' : 'text-dark-200';
+ return (
+
+
{title}
+
{item.description}
+
+ );
+ })}
);
}
Day.propTypes = {
- dateInfo: PropTypes.shape({
- containsGatedContent: PropTypes.bool,
+ date: PropTypes.objectOf(Date).isRequired,
+ first: PropTypes.bool,
+ hasDueNextAssignment: PropTypes.bool,
+ intl: intlShape.isRequired,
+ items: PropTypes.arrayOf(PropTypes.shape({
date: PropTypes.string,
+ dateType: PropTypes.string,
+ description: PropTypes.string,
+ learnerHasAccess: PropTypes.bool,
link: PropTypes.string,
title: PropTypes.string,
- }).isRequired,
+ })).isRequired,
+ last: PropTypes.bool,
};
+
+Day.defaultProps = {
+ first: false,
+ hasDueNextAssignment: false,
+ last: false,
+};
+
+export default injectIntl(Day);
diff --git a/src/dates-tab/Day.scss b/src/dates-tab/Day.scss
new file mode 100644
index 00000000..87d1894b
--- /dev/null
+++ b/src/dates-tab/Day.scss
@@ -0,0 +1,48 @@
+$dot-radius: 0.3rem;
+$dot-size: $dot-radius * 2;
+$top-offset: 0.45rem;
+$left-offset: 0.2rem + $dot-radius;
+
+.dates-day {
+ position: relative;
+}
+
+.dates-line-top {
+ display: inline-block;
+ position: absolute;
+ left: $left-offset;
+ top: 0;
+ height: $top-offset;
+ z-index: 0;
+}
+
+.dates-dot {
+ display: inline-block;
+ position: absolute;
+ border-radius: 50%;
+ left: $dot-radius; // save room for today's larger size
+ top: $top-offset;
+ height: $dot-size;
+ width: $dot-size;
+ z-index: 1;
+
+ &.dates-bg-today {
+ left: 0;
+ top: $top-offset - $dot-radius;
+ height: $dot-size * 2;
+ width: $dot-size * 2;
+ }
+}
+
+.dates-line-bottom {
+ display: inline-block;
+ position: absolute;
+ top: $top-offset + $dot-size;
+ bottom: 0;
+ left: $left-offset;
+ z-index: 0;
+}
+
+.dates-bg-today {
+ background: #ffdb87;
+}
diff --git a/src/dates-tab/Timeline.jsx b/src/dates-tab/Timeline.jsx
index 64b19f2d..a3525280 100644
--- a/src/dates-tab/Timeline.jsx
+++ b/src/dates-tab/Timeline.jsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
import { useModel } from '../model-store';
import Day from './Day';
+import { daycmp, isLearnerAssignment } from './utils';
export default function Timeline() {
const {
@@ -11,14 +12,61 @@ export default function Timeline() {
} = useSelector(state => state.courseware);
const {
- dates,
+ courseDateBlocks,
} = useModel('dates', courseId);
+ // Group date items by day (assuming they are sorted in first place) and add some metadata
+ const groupedDates = [];
+ const now = new Date();
+ let foundNextDue = false;
+ let foundToday = false;
+ courseDateBlocks.forEach(dateInfo => {
+ const parsedDate = new Date(dateInfo.date);
+
+ let hasDueNextAssignment = false;
+ if (!foundNextDue && parsedDate >= now && isLearnerAssignment(dateInfo) && !dateInfo.complete) {
+ foundNextDue = true;
+ hasDueNextAssignment = true;
+ }
+
+ if (!foundToday) {
+ const compared = daycmp(parsedDate, now);
+ if (compared === 0) {
+ foundToday = true;
+ } else if (compared > 0) {
+ foundToday = true;
+ groupedDates.push({
+ date: now,
+ hasDueNextAssignment: false,
+ items: [],
+ });
+ }
+ }
+
+ if (groupedDates.length === 0 || daycmp(groupedDates[groupedDates.length - 1].date, parsedDate) !== 0) {
+ // Add new grouped date
+ groupedDates.push({
+ date: parsedDate,
+ hasDueNextAssignment,
+ items: [dateInfo],
+ first: groupedDates.length === 0,
+ });
+ } else {
+ if (hasDueNextAssignment) {
+ groupedDates[groupedDates.length - 1].hasNextAssigment = true;
+ }
+ groupedDates[groupedDates.length - 1].items.push(dateInfo);
+ }
+ });
+ if (groupedDates.length) {
+ groupedDates[groupedDates.length - 1].last = true;
+ }
+
return (
-
- {dates.map((date) => (
-
+ <>
+ {groupedDates.map((groupedDate) => (
+
))}
-
+
);
}
diff --git a/src/dates-tab/messages.js b/src/dates-tab/messages.js
new file mode 100644
index 00000000..65675ac8
--- /dev/null
+++ b/src/dates-tab/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ completed: {
+ id: 'learning.dates.badge.completed',
+ defaultMessage: 'Completed',
+ },
+ dueNext: {
+ id: 'learning.dates.badge.dueNext',
+ defaultMessage: 'Due Next',
+ },
+ pastDue: {
+ id: 'learning.dates.badge.pastDue',
+ defaultMessage: 'Past Due',
+ },
+ title: {
+ id: 'learning.dates.title',
+ defaultMessage: 'Important Dates',
+ },
+ today: {
+ id: 'learning.dates.badge.today',
+ defaultMessage: 'Today',
+ },
+ unreleased: {
+ id: 'learning.dates.badge.unreleased',
+ defaultMessage: 'Not Yet Released',
+ },
+ verifiedOnly: {
+ id: 'learning.dates.badge.verifiedOnly',
+ defaultMessage: 'Verified Only',
+ },
+});
+
+export default messages;
diff --git a/src/dates-tab/utils.jsx b/src/dates-tab/utils.jsx
new file mode 100644
index 00000000..94ead99b
--- /dev/null
+++ b/src/dates-tab/utils.jsx
@@ -0,0 +1,16 @@
+function daycmp(a, b) {
+ if (a.getFullYear() < b.getFullYear()) { return -1; }
+ if (a.getFullYear() > b.getFullYear()) { return 1; }
+ if (a.getMonth() < b.getMonth()) { return -1; }
+ if (a.getMonth() > b.getMonth()) { return 1; }
+ if (a.getDate() < b.getDate()) { return -1; }
+ if (a.getDate() > b.getDate()) { return 1; }
+ return 0;
+}
+
+// item is a date block returned from the API
+function isLearnerAssignment(item) {
+ return item.learnerHasAccess && item.dateType === 'assignment-due-date';
+}
+
+export { daycmp, isLearnerAssignment };
diff --git a/src/tab-page/LoadedTabPage.jsx b/src/tab-page/LoadedTabPage.jsx
index 6818fbdb..46909457 100644
--- a/src/tab-page/LoadedTabPage.jsx
+++ b/src/tab-page/LoadedTabPage.jsx
@@ -20,7 +20,7 @@ function LoadedTabPage({
org,
tabs,
title,
- } = useModel('pageInfo', courseId);
+ } = useModel('courseInfo', courseId);
return (
<>
diff --git a/src/tab-page/TabPage.jsx b/src/tab-page/TabPage.jsx
index bec6a148..d35fc352 100644
--- a/src/tab-page/TabPage.jsx
+++ b/src/tab-page/TabPage.jsx
@@ -22,7 +22,7 @@ function TabPage({
<>
);
@@ -39,7 +39,7 @@ function TabPage({
<>
- {intl.formatMessage(messages['learn.loading.failure'])}
+ {intl.formatMessage(messages.failure)}
);
diff --git a/src/tab-page/messages.js b/src/tab-page/messages.js
index 03cbd8d9..3e913c0d 100644
--- a/src/tab-page/messages.js
+++ b/src/tab-page/messages.js
@@ -1,15 +1,13 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
- 'learn.loading': {
- id: 'learn.loading',
- defaultMessage: 'Loading course page...',
- description: 'Message when course page is being loaded',
- },
- 'learn.loading.failure': {
- id: 'learn.loading.failure',
+ failure: {
+ id: 'learning.loading.failure',
defaultMessage: 'There was an error loading this course.',
- description: 'Message when a course page fails to load',
+ },
+ loading: {
+ id: 'learning.loading',
+ defaultMessage: 'Loading course page…',
},
});