feat: modal actions

src/components/ModalActions/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, StatefulButton } from '@edx/paragon';
+
+import { MutationStatus } from 'data/services/lms/constants';
+import { useCloseModal } from 'hooks';
+
+const ModalActions = (props) => {
+  // const { secondary } = props;
+  const closeModal = useCloseModal();
+  const { primary } = props;
+  const secondary = props.secondary && {
+    ...props.secondary,
+    onClick: closeModal,
+  };
+  const className = 'w-100';
+  const disabledStates = [MutationStatus.loading];
+  console.log(props);
+  const genButton = (variant, btnProps) => (btnProps.state
+    ? <StatefulButton {...btnProps} {...{ className, disabledStates, variant }} />
+    : <Button {...btnProps} {...{ className, variant }} />);
+
+  return (
+    <div>
+      {secondary && genButton('outline-primary', secondary)}
+      {primary && genButton('primary', primary)}
+    </div>
+  );
+};
+const actionProps = PropTypes.shape({
+  onClick: PropTypes.func,
+  state: PropTypes.string,
+  disabledStates: PropTypes.arrayOf(PropTypes.string),
+  labels: PropTypes.objectOf(PropTypes.node),
+});
+ModalActions.defaultProps = {
+  secondary: null,
+  primary: null,
+};
+ModalActions.propTypes = {
+  secondary: actionProps,
+  primary: actionProps,
+};
+export default ModalActions;

src/hooks.js

@@ -6,6 +6,11 @@ export const nullMethod = () => ({});
 export const useActiveView = () => useLocation().pathname.split('/')[1];
 export const useIsEmbedded = () => useLocation().pathname.split('/')[2] === 'embedded';
 
+export const useCloseModal = () => {
+  const postMessage = (data) => window.parent.postMessage(data, document.referrer);
+  return () => postMessage({ type: 'plugin.modal-close' });
+};
+
 export const useOpenModal = () => {
   const postMessage = (data) => window.parent.postMessage(data, document.referrer);
   const viewUrl = useViewUrl();

src/views/SubmissionView/hooks.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
 import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   usePageData,
   usePrompts,
@@ -12,6 +13,7 @@ import {
   useSubmitResponse, useSaveResponse, useUploadFiles, useDeleteFile,
 } from 'data/services/lms/hooks/actions';
 import { MutationStatus } from 'data/services/lms/constants';
+import messages from './messages';
 
 export const stateKeys = StrictDict({
   textResponses: 'textResponses',
@@ -87,6 +89,7 @@ const useSubmissionViewData = () => {
   const textResponses = useTextResponses();
   const uploadedFiles = useUploadedFiles();
   const { showDuringResponse } = useRubricConfig();
+  const { formatMessage } = useIntl();
 
   const submitResponseHandler = useCallback(() => {
     submitResponseMutation.mutate({
@@ -97,11 +100,25 @@ const useSubmissionViewData = () => {
 
   return {
     actionsProps: {
-      submitResponse: {
-        handler: submitResponseHandler,
-        status: submitResponseMutation.status,
+      primary: {
+        onClick: submitResponseHandler,
+        state: submitResponseMutation.status,
+        disabledStates: [MutationStatus.loading],
+        labels: {
+          [MutationStatus.idle]: formatMessage(messages.submissionActionSubmit),
+          [MutationStatus.loading]: formatMessage(messages.submissionActionSubmitting),
+          [MutationStatus.success]: formatMessage(messages.submissionActionSubmitted),
+        },
+      },
+      secondary: {
+        onClick: textResponses.saveResponse.handler,
+        state: textResponses.saveResponse.status,
+        disabledStates: [MutationStatus.loading],
+        labels: {
+          [MutationStatus.idle]: formatMessage(messages.saveActionSave),
+          [MutationStatus.loading]: formatMessage(messages.saveActionSaving),
+        },
       },
-      saveResponse: textResponses.saveResponse,
     },
     formProps: {
       textResponses: textResponses.formProps,

src/views/SubmissionView/index.jsx

@@ -1,34 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Col, Row } from '@edx/paragon';
 
 import Rubric from 'components/Rubric';
-import ProgressBar from 'components/ProgressBar';
-import { useIsPageDataLoaded } from 'data/services/lms/hooks/selectors';
+import Actions from 'components/ModalActions';
 
 import Content from './Content';
-import Actions from './Actions';
 import useSubmissionViewData from './hooks';
 
 import './index.scss';
 
 export const SubmissionView = () => {
   const { actionsProps, formProps, showRubric } = useSubmissionViewData();
   return (
-    <>
-      <div className="assessment-content-layout mr-auto ml-auto">
-        <div className="content-wrapper">
-          <Row className="flex-nowrap m-0">
-            <Col className="p-0">
-              <Content {...formProps} />
-            </Col>
-            {showRubric && <Rubric />}
-          </Row>
-        </div>
+    <div className="assessment-content-layout mr-auto ml-auto">
+      <div className="content-wrapper">
+        <Row className="flex-nowrap m-0">
+          <Col className="p-0">
+            <Content {...formProps} />
+            <Actions {...actionsProps} />
+          </Col>
+          {showRubric && <Rubric />}
+        </Row>
       </div>
-      <Actions {...actionsProps} />
-    </>
+    </div>
   );
 };