chore: progress bar and data updates

Author: muselesscreator

src/components/ProgressBar/index.jsx

@@ -1,7 +1,138 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { useLocation } from 'react-router-dom';
+import classNames from 'classnames';
 
-export const ProgressBar = () => (
-  <div><h2>Progress Bar</h2></div>
-);
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Navbar, Nav, Icon } from '@edx/paragon';
+import { Locked, CheckCircle, Error } from '@edx/paragon/icons';
+
+import {
+  useAssessmentStepConfig,
+  useProgressData,
+  useIsPageDataLoaded,
+} from 'data/services/lms/hooks/selectors';
+
+import messages from './messages';
+import './index.scss';
+
+export const ProgressStep = ({
+  children,
+  href,
+  isActive,
+  isEnabled,
+  isComplete,
+  isError,
+  number,
+}) => {
+  let icon = <Icon className="nav-icon" src={Locked} />;
+  if (isComplete) {
+    icon = <Icon className="nav-icon" src={CheckCircle} />;
+  } else if (isError) {
+    icon = <Icon className="nav-icon text-danger-300" src={Error} />;
+  } else if (number) {
+    icon = <span className="nav-icon number-icon">{number}</span>;
+  }
+  return (
+    <Nav.Link
+      href={href}
+      disabled={!isEnabled}
+      className={classNames(
+        'ora-progress-nav',
+        'px-4',
+        { 'is-active': isActive },
+      )}
+    >
+      {icon}
+      {children}
+    </Nav.Link>
+  );
+};
+ProgressStep.defaultProps = {
+  href: '#',
+  isActive: false,
+  isEnabled: false,
+  isComplete: false,
+  isError: false,
+  number: null,
+};
+ProgressStep.propTypes = {
+  children: PropTypes.node.isRequired,
+  href: PropTypes.string,
+  isActive: PropTypes.bool,
+  isEnabled: PropTypes.bool,
+  isError: PropTypes.bool,
+  isComplete: PropTypes.bool,
+  number: PropTypes.number,
+};
+
+export const SubmissionStep = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <ProgressStep>{formatMessage(messages.createSubmission)}</ProgressStep>
+  );
+};
+
+export const TrainingStep = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <ProgressStep>{formatMessage(messages.practice)}</ProgressStep>
+  );
+};
+
+export const SelfAssessStep = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <ProgressStep>{formatMessage(messages.selfAssess)}</ProgressStep>
+  );
+};
+
+export const PeerAssessStep = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <ProgressStep>{formatMessage(messages.peerAssess)}</ProgressStep>
+  );
+};
+
+export const MyGradeStep = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <ProgressStep>{formatMessage(messages.myGrade)}</ProgressStep>
+  );
+};
+
+export const ProgressBar = () => {
+  const stepConfig = useAssessmentStepConfig();
+  const progress = useProgressData();
+  const isLoaded = useIsPageDataLoaded();
+  const location = useLocation();
+  if (!isLoaded) {
+    return null;
+  }
+  console.log({
+    stepConfig, progress, location,
+  });
+  return (
+    <Navbar>
+      <Navbar.Collapse className="ora-progress-nav-group">
+        <hr className="ora-progress-divider" />
+        <SubmissionStep />
+        {stepConfig.order.map(step => {
+          if (step === 'peer') {
+            return <PeerAssessStep />;
+          }
+          if (step === 'training') {
+            return <TrainingStep />;
+          }
+          if (step === 'self') {
+            return <SelfAssessStep />;
+          }
+          return null;
+        })}
+        <MyGradeStep />
+      </Navbar.Collapse>
+    </Navbar>
+  );
+};
 
 export default ProgressBar;

src/components/ProgressBar/index.scss

@@ -0,0 +1,26 @@
+.ora-progress-nav-group {
+  display: flex;
+  justify-content: space-between;
+  .ora-progress-divider {
+    position: absolute;
+    width: 95%;
+  }
+  .ora-progress-nav {
+    background-color: white;
+    z-index: 5;
+    font-size: 1.125rem;
+    &.is-active {
+      border-bottom: 2px solid black;
+    }
+  }
+  .nav-icon {
+    display: inline-block;
+    margin-inline-end: 0.5rem;
+    margin-left: -0.25rem;
+  }
+  .number-icon {
+    background-color: black;
+    color: white;
+    border-radius: 100%;
+  }
+}

src/components/ProgressBar/messages.js

@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  createSubmission: {
+    id: 'ora-grading.ProgressBar.createSubmission',
+    defaultMessage: 'Create your response',
+    description: 'Create response progress indicator',
+  },
+  practice: {
+    id: 'ora-grading.ProgressBar.practice',
+    defaultMessage: 'Practice grading',
+    description: 'Student training step progress indicator',
+  },
+  selfAssess: {
+    id: 'ora-grading.ProgressBar.selfAssess',
+    defaultMessage: 'Grade yourself',
+    description: 'Self assessment step progress indicator',
+  },
+  peerAssess: {
+    id: 'ora-grading.ProgressBar.peerAssess',
+    defaultMessage: 'Grade peers',
+    description: 'Peer assessment step progress indicator',
+  },
+  myGrade: {
+    id: 'ora-grading.ProgressBar.myGrade',
+    defaultMessage: 'My grade',
+    description: 'My Grade step progress indicator',
+  },
+});
+
+export default messages;

src/data/services/lms/fakeData/oraConfig.js

@@ -135,15 +135,17 @@ export const createORAConfig = ({
   leaderboard_config,
 });
 
+export const tinyMCEConfig = {
+  submission_config: {
+    ...submissionConfig,
+    text_response_config: {
+      ...submissionConfig.text_response_config,
+      editor_type: 'tinymce',
+    },
+  },
+};
+
 export default {
   assessmentText: createORAConfig(),
-  assessmentTinyMCE: createORAConfig({
-    submission_config: {
-      ...submissionConfig,
-      text_response_config: {
-        ...submissionConfig.text_response_config,
-        editor_type: 'tinymce',
-      },
-    },
-  }),
+  assessmentTinyMCE: createORAConfig(tinyMCEConfig),
 };

src/data/services/lms/fakeData/pageData/submission.js

@@ -62,7 +62,7 @@ export default {
       has_received_grade: false,
     }),
     response: createSubmissionResponse({
-      text_responses: ['', ''],
+      text_responses: ['response 1', 'response 2'],
       uploaded_files: [],
     }),
   }),

src/data/services/lms/hooks/data.ts

@@ -40,12 +40,11 @@ export const usePageData = (): types.QueryData<types.PageData> => {
       const returnData = assessmentData ? {
         ...camelCaseObject(assessmentData),
         rubric: {
-          optionsSelected: {...assessmentData.rubric.options_selected},
-          criterionFeedback: {...assessmentData.rubric.criterion_feedback},
+          optionsSelected: { ...assessmentData.rubric.options_selected },
+          criterionFeedback: { ...assessmentData.rubric.criterion_feedback },
           overallFeedback: assessmentData.rubric.overall_feedback,
         },
-      }: {};
-
+      } : {};
       return Promise.resolve(returnData as any);
     },
   });

src/data/services/lms/hooks/selectors.ts

@@ -47,9 +47,11 @@ export const useIsPageDataLoaded = (): boolean => (
   data.usePageData().status === 'success'
 );
 
-export const usePageData = (): types.PageData => data.usePageData().data;
+export const usePageData = (): types.PageData => data.usePageData()?.data;
 
-export const useSubmissionTeamInfo = (): types.SubmissionTeamData => usePageData().submission.teamInfo;
+export const useProgressData = (): types.ProgressData => usePageData()?.progress;
+
+export const useSubmissionTeamInfo = (): types.SubmissionTeamData => usePageData()?.submission.teamInfo;
 
 export const useSubmissionStatus = (): types.SubmissionStatusData => {
   const {