fix: add backend call and support static and dynamic tabs

Author: diana-villalvazo-wgu

src/data/apiHook.ts

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { getCourseInfo } from './api';
 
-const COURSE_INFO_QUERY_KEY = ['courseInfo'];
-
 export const useCourseInfo = (courseId: string) => (
   useQuery({
-    queryKey: COURSE_INFO_QUERY_KEY,
+    queryKey: ['courseInfo', courseId],
     queryFn: () => getCourseInfo(courseId),
+    enabled: !!courseId,
   })
 );

src/instructorTabs/InstructorTabs.tsx

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Tab, Tabs } from '@openedx/paragon';
 import { SlotContext, useWidgetsForId } from '@openedx/frontend-base';
+import { useCourseInfo } from '../data/apiHook';
 
 export interface TabProps {
   tab_id: string,
@@ -28,23 +29,37 @@ const InstructorTabs = () => {
   const navigate = useNavigate();
   const { courseId, tabId } = useParams<{ courseId: string, tabId?: string }>();
   const { id: slotId } = useContext(SlotContext);
+  const { data: courseInfo, isLoading } = useCourseInfo(courseId ?? '');
   const widgetPropsArray = useWidgetProps(slotId);
 
+  const apiTabs: TabProps[] = courseInfo?.tabs ?? [];
+  const allTabs = [...apiTabs];
+
+  widgetPropsArray.forEach(slotTab => {
+    if (!apiTabs.find(apiTab => apiTab.tab_id === slotTab.tab_id)) {
+      allTabs.push(slotTab);
+    }
+  });
+
   const activeKey = tabId ?? 'course_info';
   const handleSelect = (eventKey: string | null) => {
     if (eventKey && courseId) {
-      const selectedTab = widgetPropsArray.find(({ tab_id }) => tab_id === eventKey);
+      const selectedTab = allTabs.find(({ tab_id }) => tab_id === eventKey);
       if (selectedTab) {
         navigate(`/${courseId}/${eventKey}`);
       }
     }
   };
 
-  if (widgetPropsArray.length === 0) return null;
+  if (isLoading) {
+    return <div>Loading tabs...</div>;
+  }
+
+  if (allTabs.length === 0) return null;
 
   return (
     <Tabs id="instructor-tabs" activeKey={activeKey} onSelect={handleSelect}>
-      {widgetPropsArray.map(({ tab_id, title }) => (
+      {allTabs.map(({ tab_id, title }) => (
         <Tab key={tab_id} eventKey={tab_id} title={title} />
       ))}
     </Tabs>

src/instructorTabs/app.tsx

@@ -1,8 +1,5 @@
 import { SlotOperation } from '@openedx/frontend-base';
-import { tabSlots } from './instructorTabs/app';
 
-const slots: SlotOperation[] = [
-  ...tabSlots ?? [],
-];
+const slots: SlotOperation[] = [];
 
 export default slots;