chore: addressing feedback

Author: diana-villalvazo-wgu

shell/header/course-navigation-bar/CourseTabsNavigation.tsx

@@ -1,10 +1,10 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import classNames from 'classnames';
 import { useQuery } from '@tanstack/react-query';
+import { Tab, Tabs } from '@openedx/paragon';
 import { Slot, useIntl } from '../../../runtime';
-import classNames from 'classnames';
 import { getCourseHomeCourseMetadata } from './data/service';
-import { Tab, Tabs } from '@openedx/paragon';
 import messages from './messages';
-import { useNavigate, useLocation } from 'react-router-dom';
 import './course-tabs-navigation.scss';
 
 interface CourseMetaData {
@@ -16,23 +16,24 @@ interface CourseMetaData {
   isMasquerading: boolean,
 }
 
+const extractCourseId = (pathname: string): string => {
+  const courseRegex = /\/courses?\/([^/]+)/;
+  const courseMatch = courseRegex.exec(pathname);
+  return courseMatch ? courseMatch[1] : '';
+};
+
 const CourseTabsNavigation = () => {
   const location = useLocation();
   const intl = useIntl();
   const navigate = useNavigate();
 
-  const extractCourseId = (pathname: string): string => {
-    const courseRegex = /\/courses?\/([^/]+)/;
-    const courseMatch = courseRegex.exec(pathname);
-    return courseMatch ? courseMatch[1] : '';
-  };
-
   const courseId = extractCourseId(location.pathname);
 
   const { data } = useQuery({
     queryKey: ['org.openedx.frontend.app.header.course-meta', courseId],
     queryFn: () => getCourseHomeCourseMetadata(courseId),
     retry: 2,
+    enabled: !!courseId,
   });
 
   if (!courseId) {
@@ -41,7 +42,7 @@ const CourseTabsNavigation = () => {
 
   const { tabs = [] }: CourseMetaData = data ?? {};
 
-  const handleSelectedTab = (eventKey) => {
+  const handleSelectedTab = (eventKey: string | null) => {
     const selectedUrl = tabs.find(tab => tab.slug === eventKey)?.url ?? '/';
 
     try {

shell/header/course-navigation-bar/data/service.ts

@@ -6,7 +6,7 @@ function normalizeCourseHomeCourseMetadata(metadata) {
   const data = camelCaseObject(metadata);
   return {
     ...data,
-    tabs: data.tabs.map(tab => ({
+    tabs: (data.tabs || []).map(tab => ({
       slug: tab.tabId === 'courseware' ? 'outline' : tab.tabId,
       title: tab.title,
       url: tab.url,