feat: BFF integration

Feat/bff integration 2

src/App.jsx

@@ -1,26 +1,55 @@
+import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import {
   AuthenticatedPageRoute,
   ErrorPage,
 } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import PeerAssessmentView from 'views/AssessmentView/PeerAssessmentView';
-import SelfAssessmentView from 'views/AssessmentView/SelfAssessmentView';
-import StudentTrainingView from 'views/AssessmentView/StudentTrainingView';
+import AssessmentView from 'views/AssessmentView';
 import SubmissionView from 'views/SubmissionView';
 import XBlockView from 'views/XBlockView';
 import GradeView from 'views/GradeView';
 
 import AppContainer from 'components/AppContainer';
 import ModalContainer from 'components/ModalContainer';
 
+import { useRefreshPageData } from 'hooks/app';
+import { useRefreshUpstream } from 'hooks/modal';
 import { useUpdateTestProgressKey } from 'hooks/test';
 
 import messages from './messages';
 import routes from './routes';
 
-const RouterRoot = () => {
+const App = () => {
+  /*
+  const { body } = document;
+  const refreshPageData = useRefreshPageData();
+  const refreshUpstream = useRefreshUpstream();
+  React.useEffect(() => {
+    const resizeEvent = () => {
+      // const { clientHeight, scrollHeight, offsetHeight } = body;
+      const height = body.scrollHeight;
+      if (document.referrer !== '' && height !== 0) {
+        window.parent.postMessage(
+          { type: 'ora-resize', payload: { height } },
+          document.referrer,
+        );
+      }
+    };
+    resizeEvent();
+    window.addEventListener('resize', resizeEvent);
+  }, [body.scrollHeight]);
+
+  React.useEffect(() => {
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'plugin.modal-close') {
+        refreshPageData();
+      }
+    });
+  }, []);
+  */
+
   const { formatMessage } = useIntl();
 
   // test
@@ -69,9 +98,9 @@ const RouterRoot = () => {
   */
   const baseRoutes = [
     appRoute(routes.xblock, XBlockView),
-    modalRoute(routes.peerAssessment, PeerAssessmentView, 'Assess your peers'),
-    modalRoute(routes.selfAssessment, SelfAssessmentView, 'Assess yourself'),
-    modalRoute(routes.studentTraining, StudentTrainingView, 'Practice grading'),
+    modalRoute(routes.peerAssessment, AssessmentView, 'Assess your peers'),
+    modalRoute(routes.selfAssessment, AssessmentView, 'Assess yourself'),
+    modalRoute(routes.studentTraining, AssessmentView, 'Practice grading'),
     modalRoute(routes.submission, SubmissionView, 'Your response'),
     modalRoute(routes.graded, GradeView, 'My Grade'),
     <Route key="error" path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
@@ -85,4 +114,4 @@ const RouterRoot = () => {
   );
 };
 
-export default RouterRoot;
+export default App;

src/components/FileUpload/hooks.js

@@ -15,16 +15,14 @@ export const useUploadConfirmModalHooks = ({
   closeHandler,
   uploadHandler,
 }) => {
-  const [description, setDescription] = useKeyedState(
-    stateKeys.description,
-    ''
-  );
+  const [description, setDescription] = useKeyedState(stateKeys.description, '');
   const [shouldShowError, setShouldShowError] = useKeyedState(
     stateKeys.shouldShowError,
-    false
+    false,
   );
 
   const confirmUploadClickHandler = () => {
+    console.log({ confirmUploadClick: { description } });
     if (description !== '') {
       uploadHandler(file, description);
     } else {
@@ -54,13 +52,15 @@ export const useFileUploadHooks = ({ onFileUploaded }) => {
   const [uploadArgs, setUploadArgs] = useKeyedState(stateKeys.uploadArgs, {});
   const [isModalOpen, setIsModalOpen] = useKeyedState(
     stateKeys.isModalOpen,
-    false
+    false,
   );
 
-  const confirmUpload = useCallback(async () => {
+  const confirmUpload = useCallback(async (file, description) => {
+    console.log({ confirmUpload: { file, description } });
     setIsModalOpen(false);
     if (onFileUploaded) {
-      await onFileUploaded(uploadArgs);
+      console.log({ uploadArgs });
+      await onFileUploaded({ ...uploadArgs, description });
     }
     setUploadArgs({});
   }, [uploadArgs, onFileUploaded, setIsModalOpen, setUploadArgs]);
@@ -75,7 +75,7 @@ export const useFileUploadHooks = ({ onFileUploaded }) => {
       setIsModalOpen(true);
       setUploadArgs({ fileData, handleError, requestConfig });
     },
-    [setIsModalOpen, setUploadArgs]
+    [setIsModalOpen, setUploadArgs],
   );
 
   return {

src/components/FileUpload/index.jsx

@@ -7,7 +7,9 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'utils';
 import { useFileUploadEnabled } from 'hooks/app';
+import { useViewStep } from 'hooks/routing';
 import FilePreview from 'components/FilePreview';
+import { stepNames } from 'constants';
 
 import UploadConfirmModal from './UploadConfirmModal';
 import ActionCell from './ActionCell';
@@ -35,11 +37,10 @@ const FileUpload = ({
     isModalOpen,
     onProcessUpload,
     uploadArgs,
-  } = useFileUploadHooks({
-    onFileUploaded,
-  });
+  } = useFileUploadHooks({ onFileUploaded });
+  const viewStep = useViewStep();
 
-  if ( !useFileUploadEnabled() ) {
+  if (!useFileUploadEnabled() || viewStep === stepNames.studentTraining) {
     return null;
   }
 

src/components/ModalActions/hooks/useActiveSubmissionConfig.js

@@ -9,13 +9,13 @@ const useActiveSubmissionConfig = ({
   formatMessage,
 }) => {
   const saveAndClose = React.useCallback(
-    () => (options.saveResponse ? options.saveResponse().then(closeModal) : null),
+    () => (options.finishLater ? options.finishLater().then(closeModal) : null),
     [options, closeModal],
   );
 
   if (!options) { return null; }
 
-  const { submit, submitStatus, saveResponseStatus } = options;
+  const { submit, submitStatus, finishLaterStatus } = options;
 
   return {
     primary: {
@@ -28,9 +28,9 @@ const useActiveSubmissionConfig = ({
     },
     secondary: {
       onClick: saveAndClose,
-      state: saveResponseStatus,
+      state: finishLaterStatus,
       labels: {
-        [MutationStatus.idle]: formatMessage(messages.finishLater),
+        default: formatMessage(messages.finishLater),
         [MutationStatus.loading]: formatMessage(messages.savingResponse),
       },
     },

src/components/ModalActions/hooks/useFinishedStateActions.js

@@ -66,6 +66,7 @@ const useFinishedStateActions = () => {
   }
   console.log("?");
   // submission finished state
+  console.log({ startStepAction });
   return { primary: startStepAction, secondary: finishLaterAction };
 };
 

src/components/ModalActions/hooks/useModalActionConfig.js

@@ -19,9 +19,11 @@ const useModalActionConfig = ({ options }) => {
 
   const exitAction = useExitAction();
 
-  // console.log({ useModalActionConfig: { step, globalState, hasSubmitted } });
   // finished state
   if (hasSubmitted) {
+    if (globalState.activeStepState !== stepStates.inProgress) {
+      return { primary: exitAction };
+    }
     return finishedStateActions;
   }
 

src/components/ProgressBar/ProgressStep.jsx

@@ -46,7 +46,7 @@ const ProgressStep = ({
   } else if (isComplete) {
     iconSrc = CheckCircle;
     if (step === stepNames.done && myGrade) {
-      subLabel = `${myGrade.earned} / ${myGrade.possible}`;
+      subLabel = `${myGrade.stepScore.earned} / ${myGrade.stepScore.possible}`;
     }
   }
   return (

src/components/ProgressBar/index.jsx

@@ -50,20 +50,20 @@ export const ProgressBar = ({ className }) => {
     return null;
   }
 
-  const stepEl = (curStep) =>
-    stepLabels[curStep] ? (
+  const stepEl = (curStep) => stepLabels[curStep]
+    ? (
       <ProgressStep
         step={curStep}
         key={curStep}
         label={formatMessage(stepLabels[curStep])}
-        canRevisit={(curStep === 'done' && hasReceivedFinalGrade) || !!stepInfo[curStep]}
+        canRevisit={(curStep === 'done' && hasReceivedFinalGrade) || stepCanRevisit[curStep]}
       />
     ) : null;
 
   return (
     <Navbar className={classNames('px-0', className)}>
-      <Navbar.Collapse className='ora-progress-nav-group bg-white'>
-        <hr className='ora-progress-divider' />
+      <Navbar.Collapse className="ora-progress-nav-group bg-white">
+        <hr className="ora-progress-divider" />
         {stepOrders.map(stepEl)}
       </Navbar.Collapse>
     </Navbar>

src/components/Rubric/Rubric.scss

@@ -61,7 +61,8 @@
   }
 
   .rubric-body {
-    overflow-y: scroll;
+    overflow-y: hide;
+    padding: map-get($spacers, 3);
   }
 
   .rubric-footer {

src/components/Rubric/index.jsx

@@ -23,13 +23,14 @@ export const Rubric = ({ isCollapsible }) => {
   return (
     <Layout
       title={<h3>{formatMessage(messages.rubric)}</h3>}
-      className='rubric-card'
+      className="rubric-card"
+      defaultOpen
     >
-      <Card.Section className='rubric-body'>
+      <Card.Section className="rubric-body">
         {!isCollapsible && (
           <>
             <h3>{formatMessage(messages.rubric)}</h3>
-            <hr className='m-2.5' />
+            <hr className="m-2.5" />
           </>
         )}
         {criteria.map((criterion) => (

src/components/StatusAlert/messages.js

@@ -272,4 +272,3 @@ export default {
   },
   ...messages,
 };
-

src/components/StatusAlert/useStatusAlertData.jsx

@@ -52,6 +52,7 @@ const useStatusAlertData = ({
   const { formatMessage } = useIntl();
   const {
     activeStepName,
+    activeStepState,
     cancellationInfo,
     stepState,
   } = useGlobalState({ step });
@@ -102,6 +103,15 @@ const useStatusAlertData = ({
         heading: messages.headings[viewStep].submitted,
         ...alertTypes.success,
       }));
+      if (activeStepState !== stepStates.inProgress) {
+        out.push(alertConfig({
+          message: messages.alerts[activeStepName][activeStepState],
+          heading: messages.headings[activeStepName][activeStepState],
+          actions: [
+            <Button onClick={closeModal}>{formatMessage(messages.exit)}</Button>,
+          ],
+        }));
+      }
       if (activeStepName === stepNames.staff) {
         out.push(alertConfig({
           message: messages.alerts[activeStepName].staffAssessment,
@@ -141,6 +151,12 @@ const useStatusAlertData = ({
       heading: messages.headings.peer.finished,
     })];
   }
+  if (stepName === stepNames.staff) {
+    return [alertConfig({
+      message: messages.alerts[activeStepName].staffAssessment,
+      heading: messages.headings[activeStepName].staffAssessment,
+    })];
+  }
   return [alertConfig({
     message: messages.alerts[stepName][stepState],
     heading: messages.headings[stepName][stepState],

src/components/StepProgressIndicator/index.jsx

@@ -20,14 +20,12 @@ import messages from './messages';
 import './index.scss';
 
 const StepProgressIndicator = ({ step }) => {
-  console.log("Step Progress Indicator");
   const { formatMessage } = useIntl();
   const configInfo = useAssessmentStepConfig();
   const stepInfo = useStepInfo();
   const globalState = useGlobalState();
   const hasSubmitted = useHasSubmitted();
   const { activeStepName } = globalState;
-  console.log({ globalState, stepInfo });
   const loadNextAction = useLoadNextAction();
   if (![stepNames.peer, stepNames.studentTraining].includes(step)) {
     return null;

src/data/redux/app/reducer.js

@@ -7,6 +7,7 @@ const initialState = {
     submittedAssessment: null,
     showTrainingError: false,
   },
+  response: null,
   formFields: {
     criteria: [],
     overallFeedback: '',
@@ -26,8 +27,9 @@ const app = createSlice({
   reducers: {
     loadAssessment: (state, { payload }) => ({
       ...state,
-      assessment: { ...initialState.assessment, submittedAssessment: payload },
+      assessment: { ...initialState.assessment, submittedAssessment: payload.data },
     }),
+    loadResponse: (state, { payload }) => ({ ...state, response: payload }),
     setHasSubmitted: (state, { payload }) => ({
       ...state,
       hasSubmitted: payload,

src/data/redux/app/selectors/index.js

@@ -12,6 +12,8 @@ const selectors = {
     formFieldsData(state).criteria[criterionIndex]?.selectedOption
   ),
 
+  response: createSelector(rootSelector, ({ response }) => response),
+
   hasSubmitted: createSelector(rootSelector, ({ hasSubmitted }) => hasSubmitted),
 
   overallFeedback: (state) => formFieldsData(state).overallFeedback,

src/data/redux/hooks/app.js

@@ -12,6 +12,7 @@ export const useHasSubmitted = () => useSelector(selectors.hasSubmitted);
 export const useShowValidation = () => useSelector(selectors.showValidation);
 export const useShowTrainingError = () => useSelector(selectors.showTrainingError);
 export const useOverallFeedbackValue = () => useSelector(selectors.overallFeedback);
+export const useResponse = () => useSelector(selectors.response);
 
 /* special selectors */
 export const useCriterionOption = criterionIndex => (
@@ -31,6 +32,7 @@ export const useSetShowTrainingError = () => useActionHook(actions.setShowTraini
 export const useSetFormFields = () => useActionHook(actions.setFormFields);
 export const useResetAssessment = () => useActionHook(actions.resetAssessment);
 export const useSetOverallFeedback = () => useActionHook(actions.setOverallFeedback);
+export const useSetResponse = () => useActionHook(actions.loadResponse);
 
 export const useSetCriterionFeedback = (criterionIndex) => {
   const dispatch = useDispatch();