fix: views and wrapper updates

Author: muselesscreator

src/App.jsx

@@ -5,13 +5,14 @@ import { Spinner } from '@edx/paragon';
 
 import { useIsORAConfigLoaded, useIsPageDataLoaded } from 'data/services/lms/hooks/selectors';
 
-import AppContainer from 'views/AppContainer';
-import ModalContainer from 'views/ModalContainer';
 import PeerAssessmentView from 'views/PeerAssessmentView';
 import SelfAssessmentView from 'views/SelfAssessmentView';
 import StudentTrainingView from 'views/StudentTrainingView';
 import SubmissionView from 'views/SubmissionView';
 import XBlockView from 'views/XBlockView';
+
+import AppContainer from 'components/AppContainer';
+import ModalContainer from 'components/ModalContainer';
 import PageDataProvider from 'components/PageDataProvider';
 
 import messages from './messages';

src/views/AppContainer.jsx renamed to src/components/AppContainer.jsx

@@ -1,44 +1,27 @@
 import React from 'react';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
-
 import {
   usePrompts,
-  useSubmissionConfig,
   useSubmissionResponse,
 } from 'data/services/lms/hooks/selectors';
 
 import Prompt from 'components/Prompt';
 import TextResponse from 'components/TextResponse';
 import FileUpload from 'components/FileUpload';
 
-import messages from './messages';
-
 const AssessmentContent = () => {
   const prompts = usePrompts();
   const response = useSubmissionResponse();
-  const submissionConfig = useSubmissionConfig();
-  const { formatMessage } = useIntl();
   return (
     <div>
-      <div className="d-flex justify-content-between">
-        <h2 className="mb-4">{formatMessage(messages.yourResponse)}</h2>
-      </div>
-      <p>
-        <strong>{formatMessage(messages.instructions)}: </strong>
-        {formatMessage(messages.instructionsText)}
-      </p>
-      {prompts.map((prompt, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={index}>
-          <Prompt prompt={prompt} />
-          <TextResponse
-            submissionConfig={submissionConfig}
-            value={response.textResponses[index]}
-            isReadOnly
-          />
-        </div>
-      ))}
+      {React.Children.toArray(
+        prompts.map((prompt, index) => (
+          <div>
+            <Prompt prompt={prompt} />
+            <TextResponse response={response.textResponses[index]} />
+          </div>
+        )),
+      )}
       <FileUpload isReadOnly uploadedFiles={response.uploadedFiles} />
     </div>
   );