fix: updating modules to match the new format from frontend-base

package.json

@@ -10,21 +10,21 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "/dist",
-    "/scss/**/*.scss"
+    "/dist"
   ],
   "config": {
     "name": "baseTest",
     "exposes": {
-      "./ModuleOne": "./src/ModuleOne",
-      "./ModuleTwo": "./src/ModuleTwo",
-      "./ModuleThree": "./src/ModuleThree"
+      "./ModuleOne": "./src/module-one",
+      "./ModuleTwo": "./src/module-two",
+      "./ModuleThree": "./src/module-three"
     }
   },
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
   "scripts": {
+    "temp:pack-it": "npm run pack frontend-project-test && npm run pack frontend-project-module-test",
     "build:module": "PORT=8082 openedx build:module",
     "dev": "PORT=8082 openedx dev",
     "dev:module": "PORT=8082 openedx dev:module",

src/index.ts

@@ -0,0 +1,3 @@
+export { default as moduleOneConfig } from './module-one';
+export { default as moduleThreeConfig } from './module-three';
+export { default as moduleTwoConfig } from './module-two';

src/ModuleOne.tsx → src/module-one/ModuleOne.tsx

@@ -1,30 +1,24 @@
 import { getConfig } from '@openedx/frontend-base';
 import { Container } from '@openedx/paragon';
-import { Link, Route, Routes } from 'react-router-dom';
+import { Link, Outlet } from 'react-router-dom';
+
+import './moduleOne.css';
 
 const ModuleOne = () => (
   <main>
     <Container className="py-5">
-        <h1>Module One</h1>
+        <h1 className="one">Module One</h1>
         <p>This module is acting as a homepage because it was mounted at the root.</p>
         <p>The site's name is {getConfig().SITE_NAME}!</p>
         <ul>
           <li><Link to="child">View the child page content</Link></li>
           <li><Link to="/two">View Module Two</Link></li>
-          <li><Link to="/three">View Module THree</Link></li>
+          <li><Link to="/three">View Module Three</Link></li>
         </ul>
-        <Routes>
-          <Route path="child" element={
-            <div>You're viewing the content of the child page at /child</div>
-          }/>
-        </Routes>
+        <Outlet />
+        <p>Module one content after the outlet.</p>
     </Container>
   </main>
 );
 
 export default ModuleOne;
-
-export const config = {
-  path: 'one',
-  component: ModuleOne,
-};

src/module-one/ModuleOneChild.tsx

@@ -0,0 +1,5 @@
+export default function ModuleOneChild() {
+  return (
+    <div>You're viewing the content of the child page at /child</div>
+  )
+}

src/module-one/index.tsx

@@ -0,0 +1,31 @@
+import { ApplicationModuleConfig, HeaderTypes } from "@openedx/frontend-base";
+
+const config: ApplicationModuleConfig = {
+  routes: [
+    {
+      path: '/',
+      lazy: async () => {
+        const { default: Component } = await import('./ModuleOne');
+        return {
+          Component,
+          handle: {
+            headerId: HeaderTypes.DEFAULT,
+          }
+        }
+      },
+      children: [
+        {
+          path: 'child',
+          lazy: async () => {
+            const { default: Component } = await import('./ModuleOneChild');
+            return {
+              Component,
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+export default config;

src/module-one/moduleOne.css

@@ -0,0 +1,4 @@
+h1.one {
+  color: red;
+  text-decoration: underline wavy;
+}

src/module-three/ModuleThree.tsx

@@ -0,0 +1,21 @@
+import { Container } from '@openedx/paragon';
+import { Link, Outlet } from 'react-router-dom';
+
+import './moduleThree.scss';
+
+export default function ModuleThree() {
+  return (
+    <main>
+      <Container className="py-5">
+          <h1 className="three">Module Three</h1>
+          <ul>
+            <li><Link to="child">View the Module Three child page content</Link></li>
+            <li><Link to="/">View Module One</Link></li>
+            <li><Link to="/two">View Module Two</Link></li>
+          </ul>
+          <Outlet />
+          <p>Module three content after the outlet.</p>
+      </Container>
+    </main>
+  )
+}

src/module-three/ModuleThreeChild.tsx

@@ -0,0 +1,5 @@
+export default function ModuleThreeChild() {
+  return (
+    <div>You're viewing the content of the module three child page at /child</div>
+  )
+}

src/module-three/index.tsx

@@ -0,0 +1,31 @@
+import { ApplicationModuleConfig, HeaderTypes } from "@openedx/frontend-base";
+
+const config: ApplicationModuleConfig = {
+  routes: [
+    {
+      path: 'three',
+      lazy: async () => {
+        const { default: Component } = await import('./ModuleThree');
+        return {
+          Component,
+          handle: {
+            headerId: HeaderTypes.STUDIO,
+          }
+        }
+      },
+      children: [
+        {
+          path: 'child',
+          lazy: async () => {
+            const { default: Component } = await import('./ModuleThreeChild');
+            return {
+              Component,
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+export default config;

src/module-three/moduleThree.scss

@@ -0,0 +1,4 @@
+h1.three {
+  color: green;
+  text-decoration: underline double;
+}

src/ModuleTwo.tsx → src/module-two/ModuleTwo.tsx

@@ -1,27 +1,21 @@
 import { Container } from '@openedx/paragon';
-import { Link, Route, Routes } from 'react-router-dom';
+import { Link, Outlet } from 'react-router-dom';
+
+import './moduleTwo.scss';
 
 const ModuleTwo = () => (
   <main>
     <Container className="py-5">
-        <h1>Module Two</h1>
+        <h1 className="two">Module Two</h1>
         <ul>
           <li><Link to="child">View the Module Two child page content</Link></li>
           <li><Link to="/">View Module One</Link></li>
           <li><Link to="/three">View Module Three</Link></li>
         </ul>
-        <Routes>
-          <Route path="child" element={
-            <div>You're viewing the child page of Module Two.</div>
-          } />
-        </Routes>
+        <Outlet />
+        <p>Module two content after the outlet.</p>
     </Container>
   </main>
 );
 
 export default ModuleTwo;
-
-export const config = {
-  path: 'two',
-  component: ModuleTwo,
-};

src/module-two/ModuleTwoChild.tsx

@@ -0,0 +1,5 @@
+export default function ModuleTwoChild() {
+  return (
+    <div>You're viewing the content of the module two child page at /child</div>
+  )
+}

src/module-two/index.tsx

@@ -0,0 +1,34 @@
+import { ApplicationModuleConfig, HeaderTypes } from "@openedx/frontend-base";
+
+const config: ApplicationModuleConfig = {
+  routes: [
+    {
+      path: 'two',
+      lazy: async () => {
+        const { default: Component } = await import('./ModuleTwo');
+        return {
+          Component,
+          handle: {
+            headerId: HeaderTypes.LEARNING,
+          }
+        }
+      },
+      children: [
+        {
+          path: 'child',
+          lazy: async () => {
+            const { default: Component } = await import('./ModuleTwoChild');
+            return {
+              Component,
+              handle: {
+                headerId: HeaderTypes.DEFAULT
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+};
+
+export default config;

src/module-two/moduleTwo.scss

@@ -0,0 +1,4 @@
+h1.two {
+  color: blue;
+  text-decoration: underline dashed;
+}

test.site.config.tsx

@@ -1,6 +1,7 @@
-import { SiteConfig } from '@openedx/frontend-base';
+import { EnvironmentTypes, ProjectSiteConfig } from '@openedx/frontend-base';
 
-const config: SiteConfig = {
+const config: ProjectSiteConfig = {
+  apps: [],
   ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
   BASE_URL: 'http://localhost:8080',
   ACCOUNT_PROFILE_URL: 'http://localhost:1995',
@@ -17,12 +18,12 @@ const config: SiteConfig = {
   FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
   MARKETING_SITE_BASE_URL: 'http://localhost:18000',
   ORDER_HISTORY_URL: 'http://localhost:1996/orders',
-  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
+  REFRESH_ACCESS_TOKEN_API_PATH: '/login_refresh',
   SEGMENT_KEY: '',
   SITE_NAME: 'localhost',
   USER_INFO_COOKIE_NAME: 'edx-user-info',
   APP_ID: 'base-test',
-  ENVIRONMENT: 'dev',
+  ENVIRONMENT: EnvironmentTypes.TEST,
   ACCOUNT_SETTINGS_URL: 'http://localhost:1997',
   DISCOVERY_API_BASE_URL: 'http://localhost:18381',
   IGNORED_ERROR_REGEX: null,