feat: route time

src/App.jsx

@@ -2,23 +2,46 @@ import { Routes, Route } from 'react-router-dom';
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import AppContainer from 'views/AppContainer';
+import ModalContainer from 'views/ModalContainer';
 import PeerAssessmentView from 'views/PeerAssessmentView';
 import SelfAssessmentView from 'views/SelfAssessmentView';
 import StudentTrainingView from 'views/StudentTrainingView';
 import SubmissionView from 'views/SubmissionView';
+import XBlockView from 'views/XBlockView';
 import messages from './messages';
 import routes from './routes';
 
 const RouterRoot = () => {
   const { formatMessage } = useIntl();
+  const appRoute = (route, Component) => (
+    <Route path={route} element={<AppContainer Component={Component} />} />
+  );
+  const modalRoute = (route, Component, title) => (
+    <Route path={route} element={<ModalContainer {...{ title, Component }} />} />
+  );
+
+  const embeddedRoutes = [
+    <Route path={routes.embedded.xblock} element={<XBlockView />} />,
+    modalRoute(routes.embedded.peerAssessment, PeerAssessmentView, 'ORA Peer Assessment'),
+    modalRoute(routes.embedded.selfAssessment, SelfAssessmentView, 'ORA Self Assessment'),
+    modalRoute(routes.embedded.studentTraining, StudentTrainingView, 'ORA Student Training'),
+    modalRoute(routes.embedded.submission, SubmissionView, 'ORA Submission'),
+    <Route path={routes.embedded.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
+  ];
+  const baseRoutes = [
+    appRoute(routes.xblock, PeerAssessmentView),
+    appRoute(routes.peerAssessment, PeerAssessmentView),
+    appRoute(routes.selfAssessment, SelfAssessmentView),
+    appRoute(routes.studentTraining, StudentTrainingView),
+    appRoute(routes.submission, SubmissionView),
+    <Route path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
+  ];
 
   return (
     <Routes>
-      <Route path={routes.peerAssessment} element={<PeerAssessmentView />} />
-      <Route path={routes.selfAssessment} element={<SelfAssessmentView />} />
-      <Route path={routes.studentTraining} element={<StudentTrainingView />} />
-      <Route path={routes.submission} element={<SubmissionView />} />
-      <Route path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />
+      {embeddedRoutes}
+      {baseRoutes}
     </Routes>
   );
 };

src/routes.ts

@@ -1,4 +1,13 @@
 export default {
+  embedded: {
+    xblock: '/embedded/xblock/:id',
+    peerAssessment: '/embedded/peer_assessment/:id',
+    selfAssessment: '/embedded/self_assessment/:id',
+    studentTraining: '/embedded/student_training/:id',
+    submission: '/embedded/submission/:id',
+    root: '/embedded/*',
+  },
+  xblock: '/xblock/:id',
   peerAssessment: '/peer_assessment/:id',
   selfAssessment: '/self_assessment/:id',
   studentTraining: '/student_training/:id',

src/views/AppContainer.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/* The purpose of this component is to wrap views with a header/footer for situations
+ * where we need to run non-embedded
+ */
+
+const AppContainer = ({ Component }) => (
+  <div>
+    <Component />
+  </div>
+);
+AppContainer.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+};
+
+export default AppContainer;

src/views/ModalContainer.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FullscreenModal } from '@edx/paragon';
+
+/* The purpose of this component is to wrap views with a header/footer for situations
+ * where we need to run non-embedded
+ */
+
+const ModalContainer = ({ Component, title }) => (
+  <FullscreenModal
+    isOpen
+    onClose={null}
+    hasCloseButton={false}
+    title={title}
+    modalBodyClassName="content-body"
+  >
+    <Component />
+  </FullscreenModal>
+);
+ModalContainer.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export default ModalContainer;

src/views/PeerAssessmentView/index.jsx

@@ -1,27 +1,17 @@
 import React from 'react';
 
-import { FullscreenModal } from '@edx/paragon';
-
-import { useIsORAConfigLoaded, usePageData } from 'data/services/lms/hooks/selectors';
+import { useIsORAConfigLoaded } from 'data/services/lms/hooks/selectors';
 
 import AssessmentContentLayout from './AssessmentContentLayout';
 import AssessmentActions from './AssessmentActions';
 
 export const PeerAssessmentView = () => {
   const isORAConfigLoaded = useIsORAConfigLoaded();
-  const pageData = usePageData();
-  console.log({ pageData });
-  // const submissionData = useSubmissionData();
   return (
-    <FullscreenModal
-      isOpen
-      onClose={() => ({})}
-      title="ORA Assessment"
-      modalBodyClassName="content-body"
-    >
+    <>
       {isORAConfigLoaded && (<AssessmentContentLayout />)}
       <AssessmentActions />
-    </FullscreenModal>
+    </>
   );
 };
 

src/views/SelfAssessmentView/index.jsx

@@ -1,27 +1,17 @@
 import React from 'react';
 
-import { FullscreenModal } from '@edx/paragon';
-
 import { useIsORAConfigLoaded, usePageData } from 'data/services/lms/hooks/selectors';
 
 import AssessmentContentLayout from './AssessmentContentLayout';
 import AssessmentActions from './AssessmentActions';
 
 export const SelfAssessmentView = () => {
   const isORAConfigLoaded = useIsORAConfigLoaded();
-  const pageData = usePageData();
-  console.log({ pageData });
-  // const submissionData = useSubmissionData();
   return (
-    <FullscreenModal
-      isOpen
-      onClose={() => ({})}
-      title="ORA Assessment"
-      modalBodyClassName="content-body"
-    >
+    <>
       {isORAConfigLoaded && (<AssessmentContentLayout />)}
       <AssessmentActions />
-    </FullscreenModal>
+    </>
   );
 };
 

src/views/StudentTrainingView/index.jsx

@@ -9,19 +9,11 @@ import AssessmentActions from './AssessmentActions';
 
 export const StudentTrainingView = () => {
   const isORAConfigLoaded = useIsORAConfigLoaded();
-  const pageData = usePageData();
-  console.log({ pageData });
-  // const submissionData = useSubmissionData();
   return (
-    <FullscreenModal
-      isOpen
-      onClose={() => ({})}
-      title="ORA Assessment"
-      modalBodyClassName="content-body"
-    >
+    <>
       {isORAConfigLoaded && (<AssessmentContentLayout />)}
       <AssessmentActions />
-    </FullscreenModal>
+    </>
   );
 };
 

src/views/SubmissionView/index.jsx

@@ -30,15 +30,10 @@ export const SubmissionView = () => {
   }
 
   return (
-    <FullscreenModal
-      isOpen
-      onClose={() => ({})}
-      title="ORA Submission"
-      modalBodyClassName="content-body"
-    >
+    <>
       <SubmissionContentLayout />
       <SubmissionActions />
-    </FullscreenModal>
+    </>
   );
 };
 

src/views/XBlockView/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const XBlockView = () => {
+  return (
+    <div>XBlock View</div>
+  )
+};
+
+export default XBlockView