AA-181: Outline Tab Refactor (#80)

- Updated the Outline Tab to fetch course blocks from the Outline API.
- Changed naming conventions to more accurately portray the tab naming scheme
(ex. Outline Tab, Dates Tab, etc.)
- Removed logic from `fetchCourses` that was specific to the Outline Tab

src/data/api.js

@@ -46,8 +46,8 @@ export async function getCourseMetadata(courseId) {
   return normalizeMetadata(data);
 }
 
-export async function getTabData(courseId, tab, version) {
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/${version}/${tab}/${courseId}`;
+export async function getDatesTabData(courseId, version) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/${version}/dates/${courseId}`;
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
     return camelCaseObject(data);
@@ -63,17 +63,6 @@ export async function getTabData(courseId, tab, version) {
   }
 }
 
-function normalizeOutlineTabData(courseId, courseToolData) {
-  const courseTools = camelCaseObject(courseToolData);
-  return { id: courseId, courseTools };
-}
-
-export async function getOutlineTabData(courseId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
-  const { data } = await getAuthenticatedHttpClient().get(url, {});
-  return normalizeOutlineTabData(courseId, data.course_tools);
-}
-
 function normalizeBlocks(courseId, blocks) {
   const models = {
     courses: {},
@@ -161,6 +150,26 @@ export async function getCourseBlocks(courseId) {
   return normalizeBlocks(courseId, data.blocks);
 }
 
+export async function getOutlineTabData(courseId, version) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/${version}/outline/${courseId}`;
+  let { tabData } = {};
+  try {
+    tabData = await getAuthenticatedHttpClient().get(url);
+  } catch (error) {
+    const { httpErrorStatus } = error && error.customAttributes;
+    if (httpErrorStatus === 404) {
+      return window.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/home`);
+    }
+  }
+
+  const {
+    data,
+  } = tabData;
+  const courseBlocks = normalizeBlocks(courseId, data.course_blocks.blocks);
+  const courseTools = camelCaseObject(data.course_tools);
+
+  return { courseTools, courseBlocks };
+}
 
 function normalizeSequenceMetadata(sequence) {
   return {

src/data/index.js

@@ -1,6 +1,7 @@
 export {
   fetchCourse,
   fetchDatesTab,
+  fetchOutlineTab,
   fetchSequence,
 } from './thunks';
 

src/data/thunks.js

@@ -3,7 +3,7 @@ import {
   getCourseMetadata,
   getCourseBlocks,
   getSequenceMetadata,
-  getTabData,
+  getDatesTabData,
   getOutlineTabData,
 } from './api';
 import {
@@ -28,8 +28,7 @@ export function fetchCourse(courseId) {
     Promise.allSettled([
       getCourseMetadata(courseId),
       getCourseBlocks(courseId),
-      getOutlineTabData(courseId),
-    ]).then(([courseMetadataResult, courseBlocksResult, outlineTabResult]) => {
+    ]).then(([courseMetadataResult, courseBlocksResult]) => {
       if (courseMetadataResult.status === 'fulfilled') {
         dispatch(addModel({
           modelType: 'courses',
@@ -62,16 +61,8 @@ export function fetchCourse(courseId) {
         }));
       }
 
-      if (outlineTabResult.status === 'fulfilled') {
-        dispatch(addModel({
-          modelType: 'outline',
-          model: outlineTabResult.value,
-        }));
-      }
-
       const fetchedMetadata = courseMetadataResult.status === 'fulfilled';
       const fetchedBlocks = courseBlocksResult.status === 'fulfilled';
-      const fetchedOutline = outlineTabResult.status === 'fulfilled';
 
       // Log errors for each request if needed. Course block failures may occur
       // even if the course metadata request is successful
@@ -81,18 +72,15 @@ export function fetchCourse(courseId) {
       if (!fetchedMetadata) {
         logError(courseMetadataResult.reason);
       }
-      if (!fetchedOutline) {
-        logError(outlineTabResult.reason);
-      }
 
       if (fetchedMetadata) {
-        if (courseMetadataResult.value.canLoadCourseware.hasAccess && fetchedBlocks && fetchedOutline) {
+        if (courseMetadataResult.value.canLoadCourseware.hasAccess && fetchedBlocks) {
           // User has access
           dispatch(fetchCourseSuccess({ courseId }));
           return;
         }
         // User either doesn't have access or only has partial access
-        // (can't access course blocks or course outline)
+        // (can't access course blocks)
         dispatch(fetchCourseDenied({ courseId }));
         return;
       }
@@ -103,12 +91,12 @@ export function fetchCourse(courseId) {
   };
 }
 
-export function fetchTab(courseId, tab, version) {
+export function fetchTab(courseId, tab, version, getTabData) {
   return async (dispatch) => {
     dispatch(fetchTabRequest({ courseId }));
     Promise.allSettled([
       getCourseMetadata(courseId),
-      getTabData(courseId, tab, version),
+      getTabData(courseId, version),
     ]).then(([courseMetadataResult, tabDataResult]) => {
       const fetchedMetadata = courseMetadataResult.status === 'fulfilled';
       const fetchedTabData = tabDataResult.status === 'fulfilled';
@@ -149,7 +137,11 @@ export function fetchTab(courseId, tab, version) {
 }
 
 export function fetchDatesTab(courseId) {
-  return fetchTab(courseId, 'dates', 'v1');
+  return fetchTab(courseId, 'dates', 'v1', getDatesTabData);
+}
+
+export function fetchOutlineTab(courseId) {
+  return fetchTab(courseId, 'outline', 'v1', getOutlineTabData);
 }
 
 export function fetchSequence(sequenceId) {