feat: add user id parameter to progress page

src/course-home/data/api.js

@@ -211,8 +211,11 @@ export async function getDatesTabData(courseId) {
   }
 }
 
-export async function getProgressTabData(courseId) {
+export async function getProgressTabData(courseId, userId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
+  let url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
+  if (userId) {
+    url += `/${userId}/`;
+  }
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
     const camelCasedData = camelCaseObject(data);

src/course-home/data/thunks.js

@@ -27,12 +27,12 @@ const eventTypes = {
   POST_EVENT: 'post_event',
 };
 
-export function fetchTab(courseId, tab, getTabData) {
+export function fetchTab(courseId, tab, getTabData, userId) {
   return async (dispatch) => {
     dispatch(fetchTabRequest({ courseId }));
     Promise.allSettled([
       getCourseHomeCourseMetadata(courseId),
-      getTabData(courseId),
+      getTabData(courseId, userId),
     ]).then(([courseHomeCourseMetadataResult, tabDataResult]) => {
       const fetchedCourseHomeCourseMetadata = courseHomeCourseMetadataResult.status === 'fulfilled';
       const fetchedTabData = tabDataResult.status === 'fulfilled';
@@ -74,8 +74,8 @@ export function fetchDatesTab(courseId) {
   return fetchTab(courseId, 'dates', getDatesTabData);
 }
 
-export function fetchProgressTab(courseId) {
+export function fetchProgressTab(courseId, userId) {
-  return fetchTab(courseId, 'progress', getProgressTabData);
+  return fetchTab(courseId, 'progress', getProgressTabData, userId);
 }
 
 export function fetchOutlineTab(courseId) {

src/course-home/outline-tab/OutlineTab.jsx

@@ -124,7 +124,7 @@ function OutlineTab({ intl }) {
         </div>
         {resumeCourseUrl && (
           <div className="col-12 col-sm-auto p-0">
-            <Button block href={resumeCourseUrl} onClick={() => logResumeCourseClick()}>
+            <Button variant="brand" block href={resumeCourseUrl} onClick={() => logResumeCourseClick()}>
               {hasVisitedCourse ? intl.formatMessage(messages.resume) : intl.formatMessage(messages.start)}
             </Button>
           </div>

src/index.jsx

@@ -44,7 +44,12 @@ subscribe(APP_READY, () => {
               <DatesTab />
             </TabContainer>
           </PageRoute>
-          <PageRoute path="/course/:courseId/progress">
+          <PageRoute
+            path={[
+              '/course/:courseId/progress/:userId/',
+              '/course/:courseId/progress',
+            ]}
+          >
             <TabContainer tab="progress" fetch={fetchProgressTab} slice="courseHome">
               <ProgressTab />
             </TabContainer>

src/tab-page/TabContainer.jsx

@@ -13,7 +13,7 @@ export default function TabContainer(props) {
     tab,
   } = props;
 
-  const { courseId: courseIdFromUrl } = useParams();
+  const { courseId: courseIdFromUrl, userId } = useParams();
   const dispatch = useDispatch();
   useEffect(() => {
     // The courseId from the URL is the course we WANT to load.
@@ -31,6 +31,7 @@ export default function TabContainer(props) {
     <TabPage
       activeTabSlug={tab}
       courseId={courseId}
+      userId={userId}
       courseStatus={courseStatus}
       metadataModel={`${slice}Meta`}
     >