-
-
+
+
+
{formatMessage(messages.yourResponse)}
+ {draftIndicator}
+
+
+
+
+
+
+
diff --git a/src/views/SubmissionView/messages.js b/src/views/SubmissionView/messages.js
index 23762b09..b28d4cef 100644
--- a/src/views/SubmissionView/messages.js
+++ b/src/views/SubmissionView/messages.js
@@ -1,4 +1,5 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
+import { MutationStatus } from 'data/services/lms/constants';
const messages = defineMessages({
yourResponse: {
@@ -24,31 +25,47 @@ const messages = defineMessages({
it.`,
description: 'Description for the instructions textarea',
},
- submissionActionSubmit: {
+ startTraining: {
+ id: 'ora-grading.SubmissionView.startTraining',
+ defaultMessage: 'Start practice grading',
+ description: 'Action button text for start action to Student Training step',
+ },
+});
+
+export const submitActionMessages = defineMessages({
+ [MutationStatus.idle]: {
id: 'ora-grading.SubmissionAction.submit',
defaultMessage: 'Submit response',
description: 'Submit button text',
},
- submissionActionSubmitting: {
+ [MutationStatus.loading]: {
id: 'ora-grading.SubmissionAction.submitting',
defaultMessage: 'Submitting response',
description: 'Submit button text while submitting',
},
- submissionActionSubmitted: {
+ [MutationStatus.success]: {
id: 'ora-grading.SubmissionAction.submitted',
defaultMessage: 'Response submitted',
description: 'Submit button text after successful submission',
},
- saveActionSave: {
+
+});
+
+export const saveActionMessages = defineMessages({
+ [MutationStatus.idle]: {
id: 'ora-grading.SaveAction.save',
defaultMessage: 'Finish later',
description: 'Save for later button text',
},
- saveActionSaving: {
+ [MutationStatus.loading]: {
id: 'ora-grading.SaveAction.saving',
defaultMessage: 'Saving response',
description: 'Save for later button text while saving',
},
});
-export default messages;
+export default {
+ ...messages,
+ ...submitActionMessages,
+ ...saveActionMessages,
+};
diff --git a/src/views/SubmissionView/useSubmissionViewData.js b/src/views/SubmissionView/useSubmissionViewData.js
new file mode 100644
index 00000000..cfcaf4e0
--- /dev/null
+++ b/src/views/SubmissionView/useSubmissionViewData.js
@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+
+import { useStepState, useRubricConfig } from 'data/services/lms/hooks/selectors';
+import { useSubmitResponse } from 'data/services/lms/hooks/actions';
+import { stepNames } from 'data/services/lms/constants';
+
+import useTextResponsesData from './useTextResponsesData';
+import useUploadedFilesData from './useUploadedFilesData';
+
+const useSubmissionViewData = () => {
+ const submitResponseMutation = useSubmitResponse();
+ const rubricConfig = useRubricConfig();
+
+ const {
+ textResponses,
+ onUpdateTextResponse,
+ isDraftSaved,
+ saveResponse,
+ saveResponseStatus,
+ } = useTextResponsesData();
+ const {
+ uploadedFiles,
+ onFileUploaded,
+ onDeletedFile,
+ } = useUploadedFilesData();
+
+ const submitResponseHandler = useCallback(() => {
+ submitResponseMutation.mutate({ textResponses, uploadedFiles });
+ }, [submitResponseMutation, textResponses, uploadedFiles]);
+
+ return {
+ actionOptions: {
+ saveResponse,
+ saveResponseStatus,
+ submit: submitResponseHandler,
+ submitStatus: submitResponseMutation.status,
+ },
+ textResponses,
+ onUpdateTextResponse,
+ isDraftSaved,
+ uploadedFiles,
+ onDeletedFile,
+ onFileUploaded,
+ showRubric: rubricConfig.showDuringResponse,
+ };
+};
+
+export default useSubmissionViewData;
diff --git a/src/views/SubmissionView/useTextResponsesData.js b/src/views/SubmissionView/useTextResponsesData.js
new file mode 100644
index 00000000..ba5b3d36
--- /dev/null
+++ b/src/views/SubmissionView/useTextResponsesData.js
@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import { useTextResponses } from 'data/services/lms/hooks/selectors';
+
+import { useSaveResponse } from 'data/services/lms/hooks/actions';
+import { MutationStatus } from 'data/services/lms/constants';
+
+export const stateKeys = StrictDict({
+ textResponses: 'textResponses',
+ isDirty: 'isDirty',
+});
+
+const useTextResponsesData = () => {
+ const textResponses = useTextResponses();
+
+ const [isDirty, setIsDirty] = useKeyedState(stateKeys.isDirty, false);
+ const [value, setValue] = useKeyedState(stateKeys.textResponses, textResponses);
+
+ const saveResponseMutation = useSaveResponse();
+
+ const saveResponse = useCallback(() => {
+ setIsDirty(false);
+ return saveResponseMutation.mutateAsync({ textResponses: value });
+ }, [setIsDirty, saveResponseMutation, value]);
+
+ const onChange = useCallback((index) => (textResponse) => {
+ setValue(oldResponses => {
+ const out = [...oldResponses];
+ out[index] = textResponse;
+ return out;
+ });
+ setIsDirty(true);
+ }, [setValue, setIsDirty]);
+
+ return {
+ textResponses: value,
+ onUpdateTextResponse: onChange,
+ isDraftSaved: saveResponseMutation.status === MutationStatus.success && !isDirty,
+ saveResponse,
+ saveResponseStatus: saveResponseMutation.status,
+ };
+};
+
+export default useTextResponsesData;
diff --git a/src/views/SubmissionView/useUploadedFilesData.js b/src/views/SubmissionView/useUploadedFilesData.js
new file mode 100644
index 00000000..4aaf4484
--- /dev/null
+++ b/src/views/SubmissionView/useUploadedFilesData.js
@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import { useResponseData } from 'data/services/lms/hooks/selectors';
+
+import {
+ useUploadFiles, useDeleteFile,
+} from 'data/services/lms/hooks/actions';
+
+export const stateKeys = StrictDict({ uploadedFiles: 'uploadedFiles' });
+
+const useUploadedFilesData = () => {
+ const deleteFileMutation = useDeleteFile();
+ const uploadFilesMutation = useUploadFiles();
+
+ const response = useResponseData();
+
+ const [value, setValue] = useKeyedState(
+ stateKeys.uploadedFiles,
+ response ? response.uploadedFiles : [],
+ );
+
+ const onFileUploaded = useCallback(async (data) => {
+ // const { fileData, queryClient } = data;
+ const uploadResponse = await uploadFilesMutation.mutateAsync(data);
+ if (uploadResponse) {
+ setValue((oldFiles) => [...oldFiles, uploadResponse.uploadedFiles[0]]);
+ }
+ }, [uploadFilesMutation, setValue]);
+
+ const onDeletedFile = deleteFileMutation.mutateAsync;
+
+ return {
+ uploadedFiles: value,
+ onFileUploaded,
+ onDeletedFile,
+ };
+};
+
+export default useUploadedFilesData;