refactor: replacement of injectIntl with useIntl part 1

src/components/Admin/Admin.test.jsx

@@ -163,7 +163,7 @@ describe('<Admin />', () => {
           />
         ))
         .toJSON();
-      expect(mockFetchDashboardAnalytics).toHaveBeenCalled();
+      waitFor(() => expect(mockFetchDashboardAnalytics).toHaveBeenCalled());
       expect(tree).toMatchSnapshot();
     });
 

src/components/Admin/AdminCards.jsx

@@ -1,106 +1,108 @@
 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 {
   Award, Check, Groups, RemoveRedEye,
 } from '@openedx/paragon/icons';
 
 import NumberCard from '../NumberCard';
 
-class AdminCards extends React.Component {
-  constructor(props) {
-    super(props);
-    const { intl } = this.props;
+const AdminCards = ({
+  activeLearners,
+  numberOfUsers,
+  courseCompletions,
+  enrolledLearners,
+}) => {
+  const intl = useIntl();
 
-    this.cards = {
-      numberOfUsers: {
-        ref: React.createRef(),
-        description: intl.formatMessage({
-          id: 'adminPortal.cards.registeredLearners',
-          defaultMessage: 'total number of learners registered',
+  const cards = {
+    numberOfUsers: {
+      ref: React.createRef(),
+      description: intl.formatMessage({
+        id: 'adminPortal.cards.registeredLearners',
+        defaultMessage: 'total number of learners registered',
+      }),
+      icon: Groups,
+      actions: [{
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.registeredUnenrolledLearners',
+          defaultMessage: 'Which learners are registered but not yet enrolled in any courses?',
         }),
-        icon: Groups,
-        actions: [{
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.registeredUnenrolledLearners',
-            defaultMessage: 'Which learners are registered but not yet enrolled in any courses?',
-          }),
-          slug: 'registered-unenrolled-learners',
-        }],
-      },
-      enrolledLearners: {
-        id: 'enrolled-learners',
-        ref: React.createRef(),
-        description: intl.formatMessage({
-          id: 'adminPortal.cards.enrolledOneCourse',
-          defaultMessage: 'learners enrolled in at least one course',
+        slug: 'registered-unenrolled-learners',
+      }],
+    },
+    enrolledLearners: {
+      id: 'enrolled-learners',
+      ref: React.createRef(),
+      description: intl.formatMessage({
+        id: 'adminPortal.cards.enrolledOneCourse',
+        defaultMessage: 'learners enrolled in at least one course',
+      }),
+      icon: Check,
+      actions: [{
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.enrolledLearners',
+          defaultMessage: 'How many courses are learners enrolled in?',
         }),
-        icon: Check,
-        actions: [{
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.enrolledLearners',
-            defaultMessage: 'How many courses are learners enrolled in?',
-          }),
-          slug: 'enrolled-learners',
-        }, {
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.enrolledLearnersInactiveCourses',
-            defaultMessage: 'Who is no longer enrolled in a current course?',
-          }),
-          slug: 'enrolled-learners-inactive-courses',
-        }],
-      },
-      activeLearners: {
-        ref: React.createRef(),
-        description: intl.formatMessage({
-          id: 'adminPortal.cards.activeLearnersPastWeek',
-          defaultMessage: 'active learners in the past week',
+        slug: 'enrolled-learners',
+      }, {
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.enrolledLearnersInactiveCourses',
+          defaultMessage: 'Who is no longer enrolled in a current course?',
         }),
-        icon: RemoveRedEye,
-        actions: [{
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.learnersActiveWeek',
-            defaultMessage: 'Who are my top active learners?',
-          }),
-          slug: 'learners-active-week',
-        }, {
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.learnersInactiveWeek',
-            defaultMessage: 'Who has not been active for over a week?',
-          }),
-          slug: 'learners-inactive-week',
-        }, {
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.learnersInactiveMonth',
-            defaultMessage: 'Who has not been active for over a month?',
-          }),
-          slug: 'learners-inactive-month',
-        }],
-      },
-      courseCompletions: {
-        ref: React.createRef(),
-        description: 'course completions',
-        icon: Award,
-        actions: [{
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.completedLearners',
-            defaultMessage: 'How many courses have been completed by learners?',
-          }),
-          slug: 'completed-learners',
-        }, {
-          label: intl.formatMessage({
-            id: 'adminPortal.cards.completedLearnersWeek',
-            defaultMessage: 'Who completed a course in the past week?',
-          }),
-          slug: 'completed-learners-week',
-        }],
-      },
-    };
-  }
+        slug: 'enrolled-learners-inactive-courses',
+      }],
+    },
+    activeLearners: {
+      ref: React.createRef(),
+      description: intl.formatMessage({
+        id: 'adminPortal.cards.activeLearnersPastWeek',
+        defaultMessage: 'active learners in the past week',
+      }),
+      icon: RemoveRedEye,
+      actions: [{
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.learnersActiveWeek',
+          defaultMessage: 'Who are my top active learners?',
+        }),
+        slug: 'learners-active-week',
+      }, {
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.learnersInactiveWeek',
+          defaultMessage: 'Who has not been active for over a week?',
+        }),
+        slug: 'learners-inactive-week',
+      }, {
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.learnersInactiveMonth',
+          defaultMessage: 'Who has not been active for over a month?',
+        }),
+        slug: 'learners-inactive-month',
+      }],
+    },
+    courseCompletions: {
+      ref: React.createRef(),
+      description: 'course completions',
+      icon: Award,
+      actions: [{
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.completedLearners',
+          defaultMessage: 'How many courses have been completed by learners?',
+        }),
+        slug: 'completed-learners',
+      }, {
+        label: intl.formatMessage({
+          id: 'adminPortal.cards.completedLearnersWeek',
+          defaultMessage: 'Who completed a course in the past week?',
+        }),
+        slug: 'completed-learners-week',
+      }],
+    },
+  };
 
-  renderCard({ title, cardKey }) {
-    const card = this.cards[cardKey];
+  const renderCard = ({ title, cardKey }) => {
+    const card = cards[cardKey];
 
     return (
       <div
@@ -117,31 +119,22 @@ class AdminCards extends React.Component {
         />
       </div>
     );
-  }
-
-  render() {
-    const {
-      activeLearners,
-      numberOfUsers,
-      courseCompletions,
-      enrolledLearners,
-    } = this.props;
+  };
 
-    const data = {
-      activeLearners: activeLearners.past_week,
-      numberOfUsers,
-      courseCompletions,
-      enrolledLearners,
-    };
+  const data = {
+    activeLearners: activeLearners.past_week,
+    numberOfUsers,
+    courseCompletions,
+    enrolledLearners,
+  };
 
-    return Object.keys(this.cards).map(cardKey => (
-      this.renderCard({
-        title: data[cardKey],
-        cardKey,
-      })
-    ));
-  }
-}
+  return Object.keys(cards).map(cardKey => (
+    renderCard({
+      title: data[cardKey],
+      cardKey,
+    })
+  ));
+};
 
 AdminCards.propTypes = {
   activeLearners: PropTypes.shape({
@@ -151,8 +144,6 @@ AdminCards.propTypes = {
   numberOfUsers: PropTypes.number.isRequired,
   courseCompletions: PropTypes.number.isRequired,
   enrolledLearners: PropTypes.number.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(AdminCards);
+export default AdminCards;