fix(statistics): fix console error

- fix proptypes shape error - change injectIntl to useIntl - remove obsolete underLinesOnHover props for <Link />
Coursemology · Dec 9, 2022 · 48d429d · 48d429d
1 parent 51e94b3
commit 48d429d
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 42 deletions.
diff --git a/...nt/app/bundles/course/statistics/pages/StatisticsIndex/course/StudentPerformanceTable.jsx b/...nt/app/bundles/course/statistics/pages/StatisticsIndex/course/StudentPerformanceTable.jsx
@@ -251,12 +251,7 @@ const StudentPerformanceTable = ({
         customBodyRenderLite: (dataIndex) => {
           const student = displayedStudents[dataIndex];
           return (
-            <Link
-              key={student.id}
-              href={student.nameLink}
-              opensInNewTab
-              underlinesOnHover
-            >
+            <Link key={student.id} href={student.nameLink} opensInNewTab>
               {student.name}
             </Link>
           );
@@ -314,7 +309,7 @@ const StudentPerformanceTable = ({
             <>
               {groupManagers.map((m, index) => (
                 <span key={m.id}>
-                  <Link href={m.nameLink} opensInNewTab underlinesOnHover>
+                  <Link href={m.nameLink} opensInNewTab>
                     {m.name}
                   </Link>
                   {index < groupManagers.length - 1 && ', '}
@@ -360,7 +355,6 @@ const StudentPerformanceTable = ({
               key={student.id}
               href={student.experiencePointsLink}
               opensInNewTab
-              underlinesOnHover
             >
               {student.experiencePoints}
             </Link>
@@ -437,7 +431,6 @@ const StudentPerformanceTable = ({
               key={student.id}
               href={student.videoSubmissionLink}
               opensInNewTab
-              underlinesOnHover
             >
               {student.videoSubmissionCount}
             </Link>

diff --git a/client/app/bundles/course/statistics/pages/StatisticsIndex/course/index.jsx b/client/app/bundles/course/statistics/pages/StatisticsIndex/course/index.jsx
@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import ErrorCard from 'lib/components/core/ErrorCard';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
@@ -39,8 +39,8 @@ const CourseStatistics = ({
   showVideo,
   courseVideoCount,
   hasGroupManagers,
-  intl,
 }) => {
+  const intl = useIntl();
   if (isFetchingProgression && isFetchingPerformance) {
     return <LoadingIndicator />;
   }
@@ -100,4 +100,4 @@ const CourseStatistics = ({
 
 CourseStatistics.propTypes = courseIndexShape;
 
-export default injectIntl(CourseStatistics);
+export default CourseStatistics;
diff --git a/client/app/bundles/course/statistics/pages/StatisticsIndex/index.jsx b/client/app/bundles/course/statistics/pages/StatisticsIndex/index.jsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 
 import NotificationBar from 'lib/components/core/NotificationBar';
@@ -70,11 +69,7 @@ const TabPanel = (props) => {
       role="tabpanel"
       {...other}
     >
-      {value === index && (
-        <Box sx={{ pt: 3, pb: 3 }}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
+      {value === index && <Box sx={{ pt: 3, pb: 3 }}>{children}</Box>}
     </div>
   );
 };
@@ -95,9 +90,9 @@ const StatisticsIndex = ({
   courseStatistics,
   studentsStatistics,
   staffStatistics,
-  intl,
 }) => {
   const [value, setValue] = useState(0);
+  const intl = useIntl();
 
   useEffect(() => {
     dispatch(
@@ -172,14 +167,13 @@ const StatisticsIndex = ({
 
 StatisticsIndex.propTypes = {
   dispatch: PropTypes.func.isRequired,
-  courseStatistics: courseIndexShape.isRequired,
-  studentsStatistics: studentsIndexShape.isRequired,
-  staffStatistics: staffIndexShape.isRequired,
-  intl: PropTypes.object.isRequired,
+  courseStatistics: PropTypes.shape(courseIndexShape),
+  studentsStatistics: PropTypes.shape(studentsIndexShape),
+  staffStatistics: PropTypes.shape(staffIndexShape),
 };
 
 export default connect((state) => ({
   courseStatistics: state.courseStatistics,
   studentsStatistics: state.studentsStatistics,
   staffStatistics: state.staffStatistics,
-}))(injectIntl(StatisticsIndex));
+}))(StatisticsIndex);
diff --git a/client/app/bundles/course/statistics/pages/StatisticsIndex/staff/index.jsx b/client/app/bundles/course/statistics/pages/StatisticsIndex/staff/index.jsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import ErrorCard from 'lib/components/core/ErrorCard';
 import DataTable from 'lib/components/core/layouts/DataTable';
@@ -54,7 +54,8 @@ const translations = defineMessages({
   },
 });
 
-const StaffStatistics = ({ staff, isFetching, isError, intl }) => {
+const StaffStatistics = ({ staff, isFetching, isError }) => {
+  const intl = useIntl();
   const columns = useMemo(
     () => [
       {
@@ -124,4 +125,4 @@ const StaffStatistics = ({ staff, isFetching, isError, intl }) => {
 
 StaffStatistics.propTypes = staffIndexShape;
 
-export default injectIntl(StaffStatistics);
+export default StaffStatistics;
diff --git a/client/app/bundles/course/statistics/pages/StatisticsIndex/students/index.jsx b/client/app/bundles/course/statistics/pages/StatisticsIndex/students/index.jsx
@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
@@ -94,8 +94,9 @@ const StudentsStatistics = ({
   students,
   isFetching,
   isError,
-  intl,
 }) => {
+  const intl = useIntl();
+
   if (isFetching) {
     return <LoadingIndicator />;
   }
@@ -154,7 +155,6 @@ const StudentsStatistics = ({
               key={student.id}
               href={student.experiencePointsLink}
               opensInNewTab
-              underlinesOnHover
             >
               {student.experiencePoints}
             </Link>
@@ -178,7 +178,6 @@ const StudentsStatistics = ({
               key={student.id}
               href={student.videoSubmissionLink}
               opensInNewTab
-              underlinesOnHover
             >
               {student.videoSubmissionCount}
             </Link>
@@ -216,4 +215,4 @@ const StudentsStatistics = ({
 
 StudentsStatistics.propTypes = studentsIndexShape;
 
-export default injectIntl(StudentsStatistics);
+export default StudentsStatistics;
diff --git a/client/app/bundles/course/statistics/propTypes/course.js b/client/app/bundles/course/statistics/propTypes/course.js
@@ -37,7 +37,7 @@ export const studentShape = PropTypes.shape({
   videoPercentWatched: PropTypes.number,
 });
 
-export const courseIndexShape = PropTypes.shape({
+export const courseIndexShape = {
   assessments: PropTypes.arrayOf(assessmentShape),
   submissions: PropTypes.arrayOf(submissionShape),
   students: PropTypes.arrayOf(studentShape),
@@ -53,5 +53,4 @@ export const courseIndexShape = PropTypes.shape({
   isErrorPerformance: PropTypes.bool.isRequired,
 
   notification: notificationShape, // Centralised across course, students and staff
-  intl: PropTypes.object.isRequired,
-});
+};
diff --git a/client/app/bundles/course/statistics/propTypes/staff.js b/client/app/bundles/course/statistics/propTypes/staff.js
@@ -8,9 +8,8 @@ export const staffShape = PropTypes.shape({
   stddev: PropTypes.string.isRequired,
 });
 
-export const staffIndexShape = PropTypes.shape({
+export const staffIndexShape = {
   staff: PropTypes.arrayOf(staffShape).isRequired,
   isFetching: PropTypes.bool.isRequired,
   isError: PropTypes.bool.isRequired,
-  intl: PropTypes.object.isRequired,
-});
+};
diff --git a/client/app/bundles/course/statistics/propTypes/students.js b/client/app/bundles/course/statistics/propTypes/students.js
@@ -13,13 +13,12 @@ export const studentShape = PropTypes.shape({
   videoPercentWatched: PropTypes.number,
 });
 
-export const studentsIndexShape = PropTypes.shape({
+export const studentsIndexShape = {
   isCourseGamified: PropTypes.bool.isRequired,
   showVideo: PropTypes.bool.isRequired,
   courseVideoCount: PropTypes.number.isRequired,
   hasGroupManagers: PropTypes.bool.isRequired,
   students: PropTypes.arrayOf(studentShape).isRequired,
   isFetching: PropTypes.bool.isRequired,
   isError: PropTypes.bool.isRequired,
-  intl: PropTypes.object.isRequired,
-});
+};