feat: route time

Author: muselesscreator

src/App.jsx

@@ -5,15 +5,41 @@ import { Spinner } from '@edx/paragon';
 
 import { useIsORAConfigLoaded, useIsPageDataLoaded } from 'data/services/lms/hooks/selectors';
 
+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)} />} />,
+  ];
 
   const isConfigLoaded = useIsORAConfigLoaded();
   const isPageLoaded = useIsPageDataLoaded();
@@ -33,11 +59,8 @@ const RouterRoot = () => {
 
   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

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { FullscreenModal } from '@edx/paragon';
-
 import SubmissionContentLayout from './SubmissionContentLayout';
 import SubmissionActions from './SubmissionActions';
 import useSubmissionViewHooks from './hooks';
@@ -18,30 +16,22 @@ export const SubmissionView = () => {
     saveResponseStatus,
     draftSaved,
   } = useSubmissionViewHooks();
-
   return (
-    <FullscreenModal
-      isOpen
-      onClose={() => ({})}
-      title="ORA Submission"
-      modalBodyClassName="content-body"
-      footerNode={(
-        <SubmissionActions
-          submitResponseHandler={submitResponseHandler}
-          submitResponseStatus={submitResponseStatus}
-          saveResponseHandler={saveResponseHandler}
-          saveResponseStatus={saveResponseStatus}
-        />
-      )}
-    >
+    <>
       <SubmissionContentLayout
         submission={submission}
         oraConfigData={oraConfigData}
         onTextResponseChange={onTextResponseChange}
         onFileUploaded={onFileUploaded}
         draftSaved={draftSaved}
       />
-    </FullscreenModal>
+      <SubmissionActions
+        submitResponseHandler={submitResponseHandler}
+        submitResponseStatus={submitResponseStatus}
+        saveResponseHandler={saveResponseHandler}
+        saveResponseStatus={saveResponseStatus}
+      />
+    </>
   );
 };
 

src/views/XBlockView/index.jsx

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