* Normalizing “courseInfo” back into “course”
Splitting it out denormalizes the data and introduces potential data inconsistencies.
* Name component JSX files with the name of the component.
* Normalizing some module exports/naming.
* Moving alerts into a sub-directory.
* DRYing up alert hook creation into reusable useAlert hook.
* Adding some comments about ‘courses’ hydration.
Specifically, make sure that the header, footer, and tabs are all
shared code so that they look the same and don't need to be
redefined as we add more tab pages.
TNL-7191 - We didn’t fully protect against sequences with no units. The next/previous buttons now check whether there is a unit ID and construct a URL without if one doesn’t exist. When we load a sequence without units, we now show a message to the user so the page doesn’t look broken.
Fixes TNL-7187 - Adds a no-op useLayoutEffect hook to Unit.jsx to prevent the unit iframe from pausing React’s rendering lifecycle. Very strange bug - see comments in that file for more detail.
* Adding an index.js file for user-messages.
Importing from the module, not its contents.
* Allowing customProps to be passed though AlertList to Alerts.
* UserMessagesProvider can create flash messages.
A flash message is one that will be displayed on the next reload of the page. UserMessagesProvider now provides a “addFlash” function. These messages are stored in localStorage and displayed the next time UserMessagesProvider is mounted, which is generally going to be on the next page refresh.
Once displayed, flash messages are cleared out of localStorage.
* Hooking up Enroll Now button and adding “success” alert.
Success alert is shown as a flash message on next page reload.
* Using ALERT_TYPES constants.
TNL-7170
lms_base_url becomes lmsBaseUrl in the app and is then used by the InstructorToolbar to link the user back to the LMS. If it isn’t present, the toolbar hides itself. This puts it back.
Fixes TNL-7175: Redirect to course home if a user is not unenrolled and the course is private.
- Require authentication to use the app while course blocks api requires it
- Gracefully handle course blocks api request failures allowing app to proceed to it redirection logic
Notable changes:
- selectors related to sequences are more resilient to missing models. In the case the course blocks api returns successfully but empty (in this case of enrolled but course not yet started).
- `fetchCourse` thunk handles failures for fetchCourseMeta and fetchCourseBlocks separately using `Promise.allSettled` instead of `Promise.all`
- `denied` is a new `courseStatus`
- Access denied redirect is done using a component at a new route `redirect/course-home/:courseId`
Now handles cases
- User is unauthenticated > redirect to login
- User is authenticated but not enrolled > redirects to lms course home
- When an enrolled user attempts to access courseware before the course start date they will load the sequence (but unable to load the vertical block). This behavior should be fixed in an update to edx-platform
This is a separate component because we have no mechanism for passing context/state into these alerts right now, and I’m not sure it’s worth building. Easier to just use different codes for different situations.
* Extensive refactor of application data management.
- “course-blocks” and “course-meta” are replaced with “courseware” module. This obscures the difference between the two from the application itself.
- a generic “model-store” module is used to store all course, section, sequence, and unit data in a normalized way, agnostic to the metadata vs. blocks APIs.
- SequenceContainer has been removed, and it’s work is just done in CourseContainer instead.
- UI components are - in general - more responsible for deciding their own behavior during data loading. If they want to show a spinner or nothing, it’s up to their discretion.
- The API layer is responsible for normalizing data into a form the app will want to use, prior to putting it into the model store.
* Organizing into some more sub-modules.
- Bookmarks becomes it’s own module.
- SequenceNavigation becomes another one.
* More modularization of data directories.
- Moving model-store up to the top.
- Moving fetchCourse and fetchSequence up to the top-level data directory, since they’re used by both courseware and outline.
- Moving getBlockCompletion and updateSequencePosition into the courseware/data directory, since they pertain to that page.
* Normalizing on using the word “title”
* Using history.replace instead of history.push
This fixes TNL-7125
* Allowing sub-components to use hooks and redux
This reduces the amount of data we need to pass around, and lets us move some complexity to more natural modules.
* Fixing bug where enrollment alert is shown for undefined isEnrolled
The enrollment alert would inadvertently be shown if a user navigated from the outline to the course. This was because it interpreted an undefined “isEnrolled” flag as false. Instead, we should wait for the isEnrolled flag to be explicitly true or false.
* Organizing modules.
- Renaming “outline” to “course-home”.
- Moving sequence and sequence-navigation modules under the course module.
* Some final application organization and ADR write-ups.
* Final refactoring
- Favoring passing data by ID and looking it up in the store with useModel.
- Moving headers into course-header directory.
* Updating ADRs. Splitting model-store information out into its own ADR.
TNL-7072.
- Refactors some of the css container/content class naming
- Moved UnitNavigation out of the Sequence and into its own component.
- Fixes an issue with course tabs where multi-word titles would wrap text.
TNL-7072 mobile layout updates. Breadcrumbs truncate section and subsection titles with ellipsis. Tabs that would overflow are tucked under a "more" dropdown.
At the end, the “next” button at the bottom of the page is replaced with a friendly message.
This PR also alphabetizes some props for SequenceNavigation and Sequence, as I was adding two new ones - isFirst and isLast.
* refactor: Moving PageLoading up to the top
This way it can be used on both the courseware and outline pages.
* Adding index.js files to data directories, and PropTypes data shapes
- The course-blocks and course-meta data directories now have index files so their exports can be imported from that, rather than reaching into specific files in the directories.
- Also added “shapes” for use in React Components that use PropTypes for the course blocks data structure, and the course metadata data structure.
* Simplifying/refactoring CourseContainer rendering a bit.
* Adding course outline page.
This page is not complete.
- It contains the ‘outline’ itself with links to the Sequences in the course.
- It contains a very basic stab at displaying dates - they’re not even formatted.
- It shows logistration and enrollment alerts for anonymous and unenrolled users.
It does not include any other content in the right-hand sidebar. It also doesn’t include a welcome message, or perhaps any number of other features on the page. This is effectively an initial implementation for discovering how much data we’re missing from our APIs. It should not be used as-is by any means.
* build: bumping version of frontend-platform
We’re going to need to use the new getLoginRedirectUrl helper.
* Adding custom alerts for anonymous and unenrolled users.
- Anonymous users are prompted to sign in or register.
- Unenrolled users are prompted to enroll.
The alerts themselves are lazy-loaded as necessary, like the ContentLock component.
This PR also adds `customAlerts` to the AlertList, allowing an application to specify custom components to be shown as Alerts for a given alert code.
* refactor: Renaming enrollmentIsActive to isEnrolled
As per review feedback that the former wasn’t clear.
