feat: assessment flow update

Author: muselesscreator

src/components/Assessment/EditableAssessment/hooks.js

@@ -25,6 +25,12 @@ const useEditableAssessmentData = () => {
     submitRubricMutation.mutate(currentValue);
   };
 
+  console.log({
+    criteria,
+    formFields,
+    onSubmit,
+  });
+
   return {
     criteria,
     formFields,

src/components/Assessment/index.jsx

@@ -9,15 +9,14 @@ import './Assessment.scss';
 /**
  * <Assessment />
  */
-export const Assessment = ({ assessment, getValues }) => (assessment
+export const Assessment = ({ assessment }) => (assessment
   ? <ReadonlyAssessment />
-  : <EditableAssessment getValues={getValues} />);
+  : <EditableAssessment />);
 
 Assessment.defaultProps = {
   assessment: null,
 };
 Assessment.propTypes = {
-  getValues: PropTypes.func.isRequired,
   assessment: PropTypes.shape({
     optionsSelected: PropTypes.objectOf(PropTypes.string).isRequired,
     criterionFeedback: PropTypes.objectOf(PropTypes.string).isRequired,

src/components/AssessmentContext/index.jsx

@@ -6,13 +6,13 @@ import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
 import { useEmptyRubric } from 'data/services/lms/hooks/selectors';
 
 export const AssessmentContext = createContext({
-  selectedOptions: {},
+  optionsSelected: {},
   criterionFeedback: {},
   overallFeedback: '',
 });
 
 export const stateKeys = StrictDict({
-  selectedOptions: 'selectedOptions',
+  optionsSelected: 'optionsSelected',
   criterionFeedback: 'criterionFeedback',
   overallFeedback: 'overallFeedback',
 });
@@ -21,9 +21,9 @@ export const AssessmentContextProvider = ({
   children,
 }) => {
   const emptyRubric = useEmptyRubric();
-  const [selectedOptions, setSelectedOptions] = useKeyedState(
-    stateKeys.selectedOptions,
-    emptyRubric.selectedOptions,
+  const [optionsSelected, setSelectedOptions] = useKeyedState(
+    stateKeys.optionsSelected,
+    emptyRubric.optionsSelected,
   );
   const [criterionFeedback, setCriterionFeedback] = useKeyedState(
     stateKeys.criterionFeedback,
@@ -36,11 +36,11 @@ export const AssessmentContextProvider = ({
 
   const genCriterionData = (name) => ({
     options: {
-      value: selectedOptions[name],
+      value: optionsSelected[name],
       onChange: (e) => {
-        setSelectedOptions({ ...selectedOptions, [name]: e.target.value });
+        setSelectedOptions({ ...optionsSelected, [name]: e.target.value });
       },
-      isInvalid: selectedOptions[name] === '',
+      isInvalid: optionsSelected[name] === '',
     },
     feedback: {
       value: criterionFeedback[name],
@@ -52,8 +52,8 @@ export const AssessmentContextProvider = ({
     },
   });
 
-  const criteriaData = Object.keys(selectedOptions).reduce(
-    ({ obj, name }) => ({ ...obj, [name]: genCriterionData(name) }),
+  const criteriaData = Object.keys(optionsSelected).reduce(
+    (obj, name) => ({ ...obj, [name]: genCriterionData(name) }),
     {},
   );
 
@@ -67,10 +67,10 @@ export const AssessmentContextProvider = ({
   }), [overallFeedback, setOverallFeedback]);
 
   const currentValue = useMemo(() => ({
-    selectedOptions,
+    optionsSelected,
     criterionFeedback,
     overallFeedback,
-  }), [selectedOptions, criterionFeedback, overallFeedback]);
+  }), [optionsSelected, criterionFeedback, overallFeedback]);
 
   const value = useMemo(
     () => ({

src/components/BaseAssessmentView/index.jsx

@@ -7,16 +7,19 @@ import {
   Row,
 } from '@edx/paragon';
 
-import AssessmentContextProvider from 'components/AssessmentContext';
+import { AssessmentContextProvider } from 'components/AssessmentContext';
 import ProgressBar from 'components/ProgressBar';
 import Assessment from 'components/Assessment';
 
+import { nullMethod } from 'hooks';
+
 import './BaseAssessmentView.scss';
 
 const BaseAssessmentView = ({
   children,
   submitAssessment,
   actions,
+  getValues,
 }) => (
   <AssessmentContextProvider>
     <ProgressBar />
@@ -26,7 +29,7 @@ const BaseAssessmentView = ({
           <Col className="p-0">
             {children}
           </Col>
-          <Assessment submitAssessment={submitAssessment} />
+          <Assessment {...{ submitAssessment, getValues }} />
         </Row>
       </div>
     </div>
@@ -35,10 +38,14 @@ const BaseAssessmentView = ({
     </ActionRow>
   </AssessmentContextProvider>
 );
+BaseAssessmentView.defaultProps = {
+  getValues: nullMethod,
+};
 BaseAssessmentView.propTypes = {
   children: PropTypes.node.isRequired,
   actions: PropTypes.arrayOf(PropTypes.node).isRequired,
   submitAssessment: PropTypes.func.isRequired,
+  getValues: PropTypes.func,
 };
 
 export default BaseAssessmentView;

src/views/PeerAssessmentView/Content.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  useORAConfigData,
+  usePrompts,
   useSubmissionResponse,
 } from 'data/services/lms/hooks/selectors';
 
@@ -10,7 +10,7 @@ import TextResponse from 'components/TextResponse';
 import FileUpload from 'components/FileUpload';
 
 const AssessmentContent = () => {
-  const { prompts } = useORAConfigData();
+  const prompts = usePrompts();
   const response = useSubmissionResponse();
   return (
     <div>
@@ -22,7 +22,7 @@ const AssessmentContent = () => {
           </div>
         )),
       )}
-      <FileUpload isReadOnly />
+      <FileUpload isReadOnly uploadedFiles={response.uploadedFiles} />
     </div>
   );
 };

src/views/PeerAssessmentView/index.jsx

@@ -8,8 +8,8 @@ import AssessmentContent from './Content';
 export const PeerAssessmentView = () => useIsORAConfigLoaded() && (
   <BaseAssessmentView
     actions={[
-      <Button variant="secondary">Cancel</Button>,
-      <Button>Submit</Button>,
+      <Button variant="secondary" key="cancel">Cancel</Button>,
+      <Button key="submit">Submit</Button>,
     ]}
     submitAssessment={() => {}}
   >