feat: embedded views

Author: muselesscreator

package-lock.json

@@ -34,7 +34,7 @@
     "url": "https://github.com/edx/frontend-app-ora/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.1.2",
     "@edx/frontend-component-footer": "12.4.0",
     "@edx/frontend-component-header": "4.7.1",
     "@edx/frontend-platform": "5.6.1",

package.json

@@ -24,17 +24,21 @@ const RouterRoot = () => {
     <Route
       path={route}
       element={(
-        <AppContainer Component={Component} />
+        <AppContainer>
+          <Component />
+        </AppContainer>
       )}
     />
   );
   const modalRoute = (route, Component, title) => (
     <Route
       path={route}
       element={(
-        <ModalContainer title={title}>
-          <AppContainer Component={Component} />
-        </ModalContainer>
+        <AppContainer>
+          <ModalContainer title={title}>
+            <Component />
+          </ModalContainer>
+        </AppContainer>
       )}
     />
   );

src/App.jsx

@@ -1,22 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import ProgressBar from 'components/ProgressBar';
+
 import { useIsPageDataLoaded, useIsORAConfigLoaded } from 'data/services/lms/hooks/selectors';
 
 /* 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 }) => {
+const AppContainer = ({ children }) => {
   const isConfigLoaded = useIsORAConfigLoaded();
   const isPageDataLoaded = useIsPageDataLoaded();
   if (!isConfigLoaded || !isPageDataLoaded) {
     return null;
   }
-  return <Component />;
+  return (
+    <div style={{ width: '100%' }}>
+      {children}
+    </div>
+  );
 };
 AppContainer.propTypes = {
-  Component: PropTypes.elementType.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default AppContainer;

src/components/AppContainer.jsx

@@ -22,7 +22,6 @@ const BaseAssessmentView = ({
   getValues,
 }) => (
   <AssessmentContextProvider>
-    <ProgressBar />
     <div className="assessment-content-layout mr-auto ml-auto">
       <div className="content-wrapper">
         <Row className="flex-nowrap m-0">

src/components/BaseAssessmentView/index.jsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { stepStates } from 'data/services/lms/constants';
+import { useStepState } from 'data/services/lms/hooks/selectors';
+
 import useInstructionsMessage from './useInstructionsMessage';
 
 const Instructions = ({ step }) => {
   const message = useInstructionsMessage(step);
+  const stepState = useStepState({ step });
+  if (stepState !== stepStates.inProgress) {
+    return null;
+  }
   return (
     <div>
       <h2>Instructions</h2>

src/components/Instructions/index.jsx

@@ -4,22 +4,22 @@ import { stepNames } from 'data/services/lms/constants';
 
 const messages = defineMessages({
   [stepNames.submission]: {
-    defaultMessage: '<Submittion Instructions: TODO>',
+    defaultMessage: 'Submittion Instructions: TODO',
     description: 'Submission step instructions',
     id: 'frontend-app-ora.instructions.submisison',
   },
   [stepNames.studentTraining]: {
-    defaultMessage: '<Student Training Instructions: TODO>',
+    defaultMessage: 'Student Training Instructions: TODO',
     description: 'StudentTraining step instructions',
     id: 'frontend-app-ora.instructions.studentTraining',
   },
   [stepNames.self]: {
-    defaultMessage: '<Self Assessment Instructions: TODO>',
+    defaultMessage: 'Self Assessment Instructions: TODO',
     description: 'Self Assessment step instructions',
     id: 'frontend-app-ora.instructions.selfAssessment',
   },
   [stepNames.peer]: {
-    defaultMessage: '<Peer Assessment Instructions: TODO>',
+    defaultMessage: 'Peer Assessment Instructions: TODO',
     description: 'Peer Assessment step instructions',
     id: 'frontend-app-ora.instructions.peerAssessment',
   },

src/components/Instructions/messages.js

@@ -1,28 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FullscreenModal } from '@edx/paragon';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import AppContainer from 'components/AppContainer';
+import ProgressBar from 'components/ProgressBar';
 
 /* The purpose of this component is to wrap views with a header/footer for situations
  * where we need to run non-embedded
  */
 
-const ModalContainer = ({ title, children }) => {
-  console.log({ children, title });
-  return (
-    <FullscreenModal
-      isOpen
-      onClose={null}
-      hasCloseButton={false}
-      title={title}
-      modalBodyClassName="content-body bg-light-300"
-    >
-      {children}
-    </FullscreenModal>
-  );
-};
+const ModalContainer = ({ title, children }) => (
+  <FullscreenModal
+    isOpen
+    onClose={null}
+    hasCloseButton={false}
+    title={title}
+    modalBodyClassName="content-body bg-light-300"
+    beforeBodyNode={<ProgressBar className="px-2" />}
+  >
+    {children}
+  </FullscreenModal>
+);
 ModalContainer.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string.isRequired,

src/components/ModalContainer.jsx

@@ -55,15 +55,19 @@ const ProgressStep = ({
       disabled={!isEnabled}
       className={classNames(
         'ora-progress-nav',
-        'px-4',
+        'px-0',
         { 'is-active': isActive },
       )}
     >
-      <Icon className={classNames('nav-icon', colorClass)} src={iconSrc} />
+      <Icon
+        className={classNames('nav-icon', 'my-auto', colorClass)}
+        src={iconSrc}
+        {...subLabel && { style: { position: 'relative', bottom: '0.7rem' } }}
+      />
       <div className="d-inline-block">
         {label}
         {subLabel && (
-          <p className={classNames('x-small', colorClass)}>{subLabel}</p>
+          <p className={classNames('x-small', 'm-0', colorClass)}>{subLabel}</p>
         )}
       </div>
     </Nav.Link>

src/components/ProgressBar/ProgressStep.jsx

@@ -1,6 +1,10 @@
 import { useParams } from 'react-router-dom';
 import { useActiveView, useIsEmbedded } from 'hooks';
-import { useStepState, useEffectiveGrade } from 'data/services/lms/hooks/selectors';
+import {
+  useStepState,
+  useEffectiveGrade,
+  useGlobalState,
+} from 'data/services/lms/hooks/selectors';
 import {
   routeSteps,
   stepRoutes,
@@ -12,7 +16,7 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
   const isEmbedded = useIsEmbedded();
   const activeView = useActiveView();
   const viewStep = routeSteps[activeView];
-  const stepState = useStepState({ step });
+  const { activeStepName, stepState } = useGlobalState({ step });
 
   const href = `/${stepRoutes[step]}${isEmbedded ? '/embedded' : ''}/${xblockId}`;
   const isActive = viewStep === step;
@@ -22,7 +26,6 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     || (canRevisit && stepState === stepStates.completed)
   );
   const myGrade = useEffectiveGrade()?.stepScore;
-
   return {
     href,
     isEnabled,
@@ -33,7 +36,6 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     myGrade,
     // myGrade: { earned: 8, possible: 10 },
     // isPastDue: step === 'self',
-    
   };
 };