fix: use camel case response

Author: diana-villalvazo-wgu

package.json

@@ -18,7 +18,7 @@
     "*.scss"
   ],
   "scripts": {
-    "dev": "PORT=8081 PUBLIC_PATH=/instructor openedx dev",
+    "dev": "PORT=8080 PUBLIC_PATH=/instructor openedx dev",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",

src/data/api.test.ts

@@ -1,21 +1,24 @@
 import { getCourseInfo } from './api';
-import { getAppConfig, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { getAppConfig, getAuthenticatedHttpClient, camelCaseObject } from '@openedx/frontend-base';
 
 jest.mock('@openedx/frontend-base');
 
 const mockGetAppConfig = getAppConfig as jest.MockedFunction<typeof getAppConfig>;
+const mockCamelCaseObject = camelCaseObject as jest.MockedFunction<typeof camelCaseObject>;
 const mockGetAuthenticatedHttpClient = getAuthenticatedHttpClient as jest.MockedFunction<typeof getAuthenticatedHttpClient>;
 
 describe('getCourseInfo', () => {
   const mockHttpClient = {
     get: jest.fn(),
   };
   const mockCourseData = { course_name: 'Test Course', tabs: [{ tab_id: 'course_info', title: 'Course Information', url: 'https://test-lms.com/courses/test-course-123/info' }] };
+  const mockCamelCasedCourseData = { courseName: 'Test Course', tabs: [{ tabId: 'course_info', title: 'Course Information', url: 'https://test-lms.com/courses/test-course-123/info' }] };
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockGetAppConfig.mockReturnValue({ LMS_BASE_URL: 'https://test-lms.com' });
     mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
+    mockCamelCaseObject.mockReturnValue(mockCamelCasedCourseData);
     mockHttpClient.get.mockResolvedValue({ data: mockCourseData });
   });
 
@@ -25,7 +28,7 @@ describe('getCourseInfo', () => {
     expect(mockGetAppConfig).toHaveBeenCalledWith('org.openedx.frontend.app.instructor');
     expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
     expect(mockHttpClient.get).toHaveBeenCalledWith('https://test-lms.com/api/instructor/v2/courses/test-course-123');
-    expect(result).toBe(mockCourseData);
+    expect(result).toBe(mockCamelCasedCourseData);
   });
 
   it('throws error when API call fails', async () => {

src/data/api.ts

@@ -1,4 +1,4 @@
-import { getAppConfig, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { getAppConfig, getAuthenticatedHttpClient, camelCaseObject } from '@openedx/frontend-base';
 import { appId } from '../constants';
 
 const getApiBaseUrl = () => getAppConfig(appId).LMS_BASE_URL;
@@ -11,5 +11,5 @@ const getApiBaseUrl = () => getAppConfig(appId).LMS_BASE_URL;
 export const getCourseInfo = async (courseId) => {
   const { data } = await getAuthenticatedHttpClient()
     .get(`${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}`);
-  return data;
+  return camelCaseObject(data);
 };

src/instructorTabs/InstructorTabs.tsx

@@ -5,15 +5,15 @@ import { SlotContext, useWidgetsForId } from '@openedx/frontend-base';
 import { useCourseInfo } from '../data/apiHook';
 
 export interface TabProps {
-  tab_id: string,
+  tabId: string,
   url: string,
   title: string,
 }
 
 const extractWidgetProps = (widget: React.ReactNode): TabProps | null => {
   if (widget && typeof widget === 'object' && 'props' in widget) {
     const props = widget.props.children.props as TabProps;
-    if (props?.tab_id && props?.url && props?.title) {
+    if (props?.tabId && props?.url && props?.title) {
       return props;
     }
   }
@@ -36,10 +36,10 @@ const InstructorTabs = () => {
   const allTabs = [...apiTabs];
 
   widgetPropsArray.forEach(slotTab => {
-    if (!apiTabs.find(apiTab => apiTab.tab_id === slotTab.tab_id)) {
+    if (!apiTabs.find(apiTab => apiTab.tabId === slotTab.tabId)) {
       allTabs.push(slotTab);
     } else {
-      const indexToRemove = allTabs.findIndex(({ tab_id }) => tab_id === slotTab.tab_id);
+      const indexToRemove = allTabs.findIndex(({ tabId }) => tabId === slotTab.tabId);
       if (indexToRemove !== -1) {
         allTabs.splice(indexToRemove, 1);
       }
@@ -50,7 +50,7 @@ const InstructorTabs = () => {
   const activeKey = tabId ?? 'course_info';
   const handleSelect = (eventKey: string | null) => {
     if (eventKey && courseId) {
-      const selectedTab = allTabs.find(({ tab_id }) => tab_id === eventKey);
+      const selectedTab = allTabs.find(({ tabId }) => tabId === eventKey);
       if (selectedTab) {
         navigate(`/${courseId}/${eventKey}`);
       }
@@ -65,8 +65,8 @@ const InstructorTabs = () => {
 
   return (
     <Tabs id="instructor-tabs" activeKey={activeKey} onSelect={handleSelect}>
-      {allTabs.map(({ tab_id, title }) => (
-        <Tab key={tab_id} eventKey={tab_id} title={title} />
+      {allTabs.map(({ tabId, title }) => (
+        <Tab key={tabId} eventKey={tabId} title={title} />
       ))}
     </Tabs>
   );

src/slots/README.md

@@ -21,14 +21,14 @@ import { SlotOperation, WidgetOperationTypes } from '@openedx/frontend-base';
 import { InstructorTab } from 'src/slots/instructorTabsSlot/InstructorTabsSlot';
 
 // Tab configuration data
-const tabData = { tab_id: 'course_info', url: 'course_info', title: 'Course Info' };
+const tabData = { tabId: 'course_info', url: 'course_info', title: 'Course Info' };
 
 // Create slot operations
 export const tabSlots: SlotOperation[] = [{
   slotId: `org.openedx.frontend.slot.instructor.tabs.v1`,
-  id: `org.openedx.frontend.widget.instructor.tab.${tab_id}`,
+  id: `org.openedx.frontend.widget.instructor.tab.${tabId}`,
   op: WidgetOperationTypes.APPEND,
-  element: <InstructorTab tab_id={tabData.tab_id} title={tabData.title} url={tabData.url} />,
+  element: <InstructorTab tabId={tabData.tabId} title={tabData.title} url={tabData.url} />,
 }];
 ```
 
@@ -60,8 +60,8 @@ const InstructorTabs = () => {
   return (
     <Tabs>
       {widgets.map((widget, index) => {
-        const { tab_id, title } = widget.element.props;
-        return <Tab key={tab_id} eventKey={tab_id} title={title} />;
+        const { tabId, title } = widget.element.props;
+        return <Tab key={tabId} eventKey={tabId} title={title} />;
       })}
     </Tabs>
   );