chore: add Submission view

Author: muselesscreator

src/views/SubmissionView/SubmissionActions.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { ActionRow, Button } from '@edx/paragon';
+
+const SubmissionActions = () => {
+  return (
+    <ActionRow className="border mt-3">
+      <Button variant="secondary">Secondary Action</Button>
+      <Button>Primary Action</Button>
+    </ActionRow>
+  );
+};
+
+export default SubmissionActions;

src/views/SubmissionView/SubmissionContent.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useORAConfigData } from 'data/services/lms/hooks/selectors';
+
+import Prompt from 'components/Prompt';
+import TextResponse from 'components/TextResponse/Editor';
+import FileUpload from 'components/FileUpload';
+
+const SubmissionContent = () => {
+  const { prompts } = useORAConfigData();
+  return (
+    <div>
+      {prompts.map((prompt, index) => (
+        <div key={index}>
+          <Prompt promptIndex={index} />
+          <TextResponse promptIndex={index} />
+        </div>
+      ))}
+      <FileUpload />
+    </div>
+  );
+};
+
+export default SubmissionContent;

src/views/SubmissionView/SubmissionContentLayout.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Col, Row } from '@edx/paragon';
+
+import { useRubricConfig } from 'data/services/lms/hooks/selectors';
+import Rubric from 'components/Rubric';
+import SubmissionContent from './SubmissionContent';
+
+import './SubmissionContentLayout.scss';
+
+const SubmissionContentLayout = () => {
+  const showRubric = useRubricConfig().showDuringResponse;
+  return (
+    <div className="assessment-content-layout mr-auto ml-auto">
+      <div className="content-wrapper">
+        <Row className="flex-nowrap m-0">
+          <Col className="p-0">
+            <SubmissionContent />
+          </Col>
+          {showRubric && (<Rubric isGrading={false} />)}
+        </Row>
+      </div>
+    </div>
+  );
+};
+
+export default SubmissionContentLayout;

src/views/SubmissionView/SubmissionContentLayout.scss

@@ -0,0 +1,26 @@
+@import "@edx/paragon/scss/core/core";
+
+.assessment-content-layout {
+  & > div.content-body {
+    height: 100%;
+    .row {
+      height: 100%;
+    }
+  }
+  width: fit-content;
+  margin: auto;
+  height: 100%;
+
+  .content-wrapper {
+    min-width: min-content;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .assessment-content-layout {
+    .content-wrapper {
+      width: 100%;
+    }
+  }
+}
+

src/views/SubmissionView/index.jsx

@@ -1,16 +1,26 @@
 import React from 'react';
+
+import { FullscreenModal } from '@edx/paragon';
+
 import { useORAConfigData, useSubmissionData } from 'data/services/lms/hooks/selectors';
 
-export const AssessmentView = () => {
+import SubmissionContentLayout from './SubmissionContentLayout';
+import SubmissionActions from './SubmissionActions';
+
+export const SubmissionView = () => {
   const configData = useORAConfigData();
   const submissionData = useSubmissionData();
-  console.log({
-    configData,
-    submissionData,
-  });
   return (
-    <h1>Submission</h1>
+    <FullscreenModal
+      isOpen
+      onClose={() => ({})}
+      title="ORA Submission"
+      modalBodyClassName="content-body"
+    >
+      {configData && (<SubmissionContentLayout />)}
+      <SubmissionActions />
+    </FullscreenModal>
   );
 };
 
-export default AssessmentView;
+export default SubmissionView;