From ffe10e56f52954dbc1145e41988b8390ca7f3c00 Mon Sep 17 00:00:00 2001
From: Matthew Piatetsky <mpiatetsky@edx.org>
Date: Wed, 23 Jun 2021 17:19:46 -0400
Subject: [PATCH] feat: add user id parameter to progress page

---
 src/course-home/data/api.js    | 7 +++++--
 src/course-home/data/thunks.js | 8 ++++----
 src/index.jsx                  | 7 ++++++-
 src/tab-page/TabContainer.jsx  | 3 ++-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js
index 73fa35aa..467ee905 100644
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -211,8 +211,11 @@ export async function getDatesTabData(courseId) {
   }
 }
 
-export async function getProgressTabData(courseId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
+export async function getProgressTabData(courseId, userId) {
+  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);
diff --git a/src/course-home/data/thunks.js b/src/course-home/data/thunks.js
index 44cabead..c301e781 100644
--- a/src/course-home/data/thunks.js
+++ b/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) {
-  return fetchTab(courseId, 'progress', getProgressTabData);
+export function fetchProgressTab(courseId, userId) {
+  return fetchTab(courseId, 'progress', getProgressTabData, userId);
 }
 
 export function fetchOutlineTab(courseId) {
diff --git a/src/index.jsx b/src/index.jsx
index dc2809ca..5bdd28a7 100755
--- a/src/index.jsx
+++ b/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>
diff --git a/src/tab-page/TabContainer.jsx b/src/tab-page/TabContainer.jsx
index 7e06569b..d564903a 100644
--- a/src/tab-page/TabContainer.jsx
+++ b/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`}
     >