feat: add program dashboard directory (#1)

Author: MaxFrank13

src/App.jsx

@@ -6,7 +6,6 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import { FooterSlot } from '@edx/frontend-component-footer';
 import { Alert } from '@openedx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
@@ -22,9 +21,6 @@ import track from 'tracking';
 
 import fakeData from 'data/services/lms/fakeData/courses';
 
-import AppWrapper from 'containers/AppWrapper';
-import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
-
 import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import './App.scss';
@@ -77,22 +73,16 @@ export const App = () => {
         <title>{formatMessage(messages.pageTitle)}</title>
         <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
       </Helmet>
-      <div>
-        <AppWrapper>
-          <LearnerDashboardHeader />
-          <main id="main">
-            {hasNetworkFailure
-              ? (
-                <Alert variant="danger">
-                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
-                </Alert>
-              ) : (
-                <Dashboard />
-              )}
-          </main>
-        </AppWrapper>
-        <FooterSlot />
-      </div>
+      <main id="main">
+        {hasNetworkFailure
+          ? (
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          ) : (
+            <Dashboard />
+          )}
+      </main>
     </>
   );
 };

src/App.test.jsx

@@ -8,12 +8,7 @@ import { reduxHooks } from 'hooks';
 import { App } from './App';
 import messages from './messages';
 
-jest.mock('@edx/frontend-component-footer', () => ({
-  FooterSlot: jest.fn(() => <div>FooterSlot</div>),
-}));
 jest.mock('containers/Dashboard', () => jest.fn(() => <div>Dashboard</div>));
-jest.mock('containers/LearnerDashboardHeader', () => jest.fn(() => <div>LearnerDashboardHeader</div>));
-jest.mock('containers/AppWrapper', () => jest.fn(({ children }) => <div className="AppWrapper">{children}</div>));
 jest.mock('data/redux', () => ({
   selectors: 'redux.selectors',
   actions: 'redux.actions',
@@ -49,19 +44,6 @@ describe('App router component', () => {
       it('displays title in helmet component', async () => {
         await waitFor(() => expect(document.title).toEqual(messages.pageTitle.defaultMessage));
       });
-      it('displays learner dashboard header', () => {
-        const learnerDashboardHeader = screen.getByText('LearnerDashboardHeader');
-        expect(learnerDashboardHeader).toBeInTheDocument();
-      });
-      it('wraps the header and main components in an AppWrapper widget container', () => {
-        const appWrapper = screen.getByText('LearnerDashboardHeader').parentElement;
-        expect(appWrapper).toHaveClass('AppWrapper');
-        expect(appWrapper.children[1].id).toEqual('main');
-      });
-      it('displays footer slot', () => {
-        const footerSlot = screen.getByText('FooterSlot');
-        expect(footerSlot).toBeInTheDocument();
-      });
     };
     describe('no network failure', () => {
       beforeEach(() => {

src/containers/ProgramDashboard/api.ts

@@ -0,0 +1,8 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+
+export async function getProgramsListData() {
+  const url = `${getConfig().LMS_BASE_URL}/api/dashboard/v0/programs/`;
+  const response = await getAuthenticatedHttpClient().get(url);
+  return response;
+}

src/containers/ProgramDashboard/index.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { logError } from '@edx/frontend-platform/logging';
+import { getProgramsListData } from './api';
+
+interface ProgramsData {
+  uuid: String,
+  title: String,
+  type: String,
+  banner_image: object,
+  authorizing_organizations: object[],
+  progress: object,
+}
+
+const ProgramDashboard = () => {
+  const [programsData, setProgramsData] = useState<ProgramsData[]>([]);
+
+  useEffect(() => {
+    getProgramsListData()
+      .then(responseData => setProgramsData(responseData.data))
+      .catch(err => logError(err));
+  }, []);
+
+  return (
+    <>
+      <Helmet>
+        <title>Program Dashboard</title>
+      </Helmet>
+      <div>
+        {programsData.map(item => (
+          <div>
+            {item.title}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default ProgramDashboard;

src/index.jsx

@@ -19,28 +19,35 @@ import {
   APP_INIT_ERROR,
   initialize,
   subscribe,
+  getConfig,
   mergeConfig,
 } from '@edx/frontend-platform';
+import { FooterSlot } from '@edx/frontend-component-footer';
+
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import ProgramDashboard from './containers/ProgramDashboard';
 
 import { configuration } from './config';
 
 import messages from './i18n';
 
 import App from './App';
-import NoticesWrapper from './components/NoticesWrapper';
 
 subscribe(APP_READY, () => {
   const root = createRoot(document.getElementById('root'));
 
   root.render(
     <StrictMode>
       <AppProvider store={store}>
-        <NoticesWrapper>
-          <Routes>
-            <Route path="/" element={<PageWrap><App /></PageWrap>} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-        </NoticesWrapper>
+        <LearnerDashboardHeader />
+        <Routes>
+          <Route path="/" element={<PageWrap><App /></PageWrap>} />
+          {getConfig().ENABLE_PROGRAM_DASHBOARD && (
+            <Route path="/programs" element={<PageWrap><ProgramDashboard /></PageWrap>} />
+          )}
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+        <FooterSlot />
       </AppProvider>
     </StrictMode>,
   );

src/index.test.jsx

@@ -25,6 +25,9 @@ jest.mock('react-dom/client', () => {
 });
 
 jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    ENABLE_PROGRAM_DASHBOARD: true,
+  })),
   mergeConfig: jest.fn(),
   ensureConfig: jest.fn(),
   APP_READY: 'app-is-ready-key',
@@ -35,7 +38,12 @@ jest.mock('@edx/frontend-platform', () => ({
 
 jest.mock('data/store', () => ({ redux: 'store' }));
 jest.mock('./App', () => 'App');
-jest.mock('components/NoticesWrapper', () => 'NoticesWrapper');
+jest.mock('@edx/frontend-component-footer', () => ({
+  FooterSlot: jest.fn(() => <div>FooterSlot</div>),
+}));
+
+jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
+jest.mock('containers/ProgramDashboard', () => 'ProgramDashboard');
 
 describe('app registry', () => {
   let getElement;