refactor: Replace of injectIntl with useIntl() part 6 - files-and-videos/generic/EditFileErrors (#2358)

Co-authored-by: Ahtesham Quraish <[email protected]>

Author: ahtesham-quraish

src/files-and-videos/generic/EditFileErrors.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@openedx/paragon';
 import ErrorAlert from '../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { RequestStatus } from '../../data/constants';
@@ -13,71 +13,72 @@ const EditFileErrors = ({
   deleteFileStatus,
   updateFileStatus,
   loadingStatus,
-  // injected
-  intl,
-}) => (
-  <>
-    <ErrorAlert
-      hideHeading={false}
-      dismissError={() => resetErrors({ errorType: 'loading' })}
-      isError={loadingStatus === RequestStatus.FAILED || loadingStatus === RequestStatus.PARTIAL_FAILURE}
-    >
-      {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.loading })}
-    </ErrorAlert>
-    <ErrorAlert
-      hideHeading
-      dismissError={() => resetErrors({ errorType: 'add' })}
-      isError={addFileStatus === RequestStatus.FAILED}
-    >
-      <Alert.Heading>
-        {intl.formatMessage(messages.uploadErrorAlertTitle)}
-      </Alert.Heading>
-      <ul className="p-0">
-        {errorMessages.add.map(message => (
-          <li key={`add-error-${message}`} style={{ listStyle: 'none' }}>
-            {intl.formatMessage(messages.errorAlertMessage, { message })}
-          </li>
-        ))}
-      </ul>
-    </ErrorAlert>
-    <ErrorAlert
-      hideHeading={false}
-      dismissError={() => resetErrors({ errorType: 'delete' })}
-      isError={deleteFileStatus === RequestStatus.FAILED}
-    >
-      <ul className="p-0">
-        {errorMessages.delete.map(message => (
-          <li key={`delete-error-${message}`} style={{ listStyle: 'none' }}>
-            {intl.formatMessage(messages.errorAlertMessage, { message })}
-          </li>
-        ))}
-      </ul>
-    </ErrorAlert>
-    <ErrorAlert
-      hideHeading={false}
-      dismissError={() => resetErrors({ errorType: 'update' })}
-      isError={updateFileStatus === RequestStatus.FAILED}
-    >
-      <ul className="p-0">
-        {errorMessages.lock?.map(message => (
-          <li key={`lock-error-${message}`} style={{ listStyle: 'none' }}>
-            {intl.formatMessage(messages.errorAlertMessage, { message })}
-          </li>
-        ))}
-        {errorMessages.download.map(message => (
-          <li key={`download-error-${message}`} style={{ listStyle: 'none' }}>
-            {intl.formatMessage(messages.errorAlertMessage, { message })}
-          </li>
-        ))}
-        {errorMessages.thumbnail?.map(message => (
-          <li key={`add-thumbnail-error-${message}`} style={{ listStyle: 'none' }}>
-            {intl.formatMessage(messages.errorAlertMessage, { message })}
-          </li>
-        ))}
-      </ul>
-    </ErrorAlert>
-  </>
-);
+}) => {
+  const intl = useIntl();
+  return (
+    <>
+      <ErrorAlert
+        hideHeading={false}
+        dismissError={/* istanbul ignore next */ () => resetErrors({ errorType: 'loading' })}
+        isError={loadingStatus === RequestStatus.FAILED || loadingStatus === RequestStatus.PARTIAL_FAILURE}
+      >
+        {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.loading })}
+      </ErrorAlert>
+      <ErrorAlert
+        hideHeading
+        dismissError={/* istanbul ignore next */ () => resetErrors({ errorType: 'add' })}
+        isError={addFileStatus === RequestStatus.FAILED}
+      >
+        <Alert.Heading>
+          {intl.formatMessage(messages.uploadErrorAlertTitle)}
+        </Alert.Heading>
+        <ul className="p-0">
+          {errorMessages.add.map(message => (
+            <li key={`add-error-${message}`} style={{ listStyle: 'none' }}>
+              {intl.formatMessage(messages.errorAlertMessage, { message })}
+            </li>
+          ))}
+        </ul>
+      </ErrorAlert>
+      <ErrorAlert
+        hideHeading={false}
+        dismissError={/* istanbul ignore next */ () => resetErrors({ errorType: 'delete' })}
+        isError={deleteFileStatus === RequestStatus.FAILED}
+      >
+        <ul className="p-0">
+          {errorMessages.delete.map(message => (
+            <li key={`delete-error-${message}`} style={{ listStyle: 'none' }}>
+              {intl.formatMessage(messages.errorAlertMessage, { message })}
+            </li>
+          ))}
+        </ul>
+      </ErrorAlert>
+      <ErrorAlert
+        hideHeading={false}
+        dismissError={/* istanbul ignore next */ () => resetErrors({ errorType: 'update' })}
+        isError={updateFileStatus === RequestStatus.FAILED}
+      >
+        <ul className="p-0">
+          {errorMessages.lock?.map(message => (
+            <li key={`lock-error-${message}`} style={{ listStyle: 'none' }}>
+              {intl.formatMessage(messages.errorAlertMessage, { message })}
+            </li>
+          ))}
+          {errorMessages.download.map(message => (
+            <li key={`download-error-${message}`} style={{ listStyle: 'none' }}>
+              {intl.formatMessage(messages.errorAlertMessage, { message })}
+            </li>
+          ))}
+          {errorMessages.thumbnail?.map(message => (
+            <li key={`add-thumbnail-error-${message}`} style={{ listStyle: 'none' }}>
+              {intl.formatMessage(messages.errorAlertMessage, { message })}
+            </li>
+          ))}
+        </ul>
+      </ErrorAlert>
+    </>
+  );
+};
 
 EditFileErrors.propTypes = {
   resetErrors: PropTypes.func.isRequired,
@@ -93,8 +94,6 @@ EditFileErrors.propTypes = {
   deleteFileStatus: PropTypes.string.isRequired,
   updateFileStatus: PropTypes.string.isRequired,
   loadingStatus: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EditFileErrors);
+export default EditFileErrors;