refactor: replace one injectIntl with useIntl, fix JSX return (#2354)

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

Author: ahtesham-quraish

src/files-and-videos/videos-page/VideosPage.jsx

@@ -169,8 +169,9 @@ const VideosPage = ({
     handleAddThumbnail,
     videoImageSettings,
   });
+
   const infoModalSidebar = (video, activeTab, setActiveTab) => (
-    VideoInfoModalSidebar({ video, activeTab, setActiveTab })
+    <VideoInfoModalSidebar video={video} activeTab={activeTab} setActiveTab={setActiveTab} />
   );
   const maxFileSize = videoUploadMaxFileSize * 1073741824;
   const transcriptColumn = {

src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.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 {
   Tabs,
   Tab,
@@ -14,33 +14,35 @@ const VideoInfoModalSidebar = ({
   video,
   activeTab,
   setActiveTab,
-  // injected
-  intl,
-}) => (
-  <Tabs
-    id="controlled-info-sidebar-tab"
-    activeKey={activeTab}
-    onSelect={(tab) => setActiveTab(tab)}
-  >
-    <Tab eventKey="fileInfo" title={intl.formatMessage(messages.infoTabTitle)}>
-      <InfoTab {...{ video }} />
-    </Tab>
-    <Tab
-      eventKey="fileTranscripts"
-      title={intl.formatMessage(
-        messages.transcriptTabTitle,
-        { transcriptCount: video.transcripts.length },
-      )}
-      notification={TRANSCRIPT_FAILURE_STATUSES.includes(video.transcriptionStatus) && (
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Tabs
+      id="controlled-info-sidebar-tab"
+      activeKey={activeTab}
+      onSelect={(tab) => setActiveTab(tab)}
+    >
+      <Tab eventKey="fileInfo" title={intl.formatMessage(messages.infoTabTitle)}>
+        <InfoTab {...{ video }} />
+      </Tab>
+      <Tab
+        eventKey="fileTranscripts"
+        title={intl.formatMessage(
+          messages.transcriptTabTitle,
+          { transcriptCount: video.transcripts.length },
+        )}
+        notification={TRANSCRIPT_FAILURE_STATUSES.includes(video.transcriptionStatus) && (
         <span>
           <span className="sr-only">{intl.formatMessage(messages.notificationScreenReaderText)}</span>
         </span>
-      )}
-    >
-      <TranscriptTab {...{ video }} />
-    </Tab>
-  </Tabs>
-);
+        )}
+      >
+        <TranscriptTab {...{ video }} />
+      </Tab>
+    </Tabs>
+  );
+};
 
 VideoInfoModalSidebar.propTypes = {
   video: PropTypes.shape({
@@ -54,12 +56,10 @@ VideoInfoModalSidebar.propTypes = {
   }),
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 VideoInfoModalSidebar.defaultProps = {
   video: null,
 };
 
-export default injectIntl(VideoInfoModalSidebar);
+export default VideoInfoModalSidebar;