fix: null renders

src/components/GradesView/BulkManagementControls/hooks.js

@@ -3,7 +3,7 @@ import { actions, selectors } from 'data/redux/hooks';
 export const useBulkManagementControlsData = () => {
   const gradeExportUrl = selectors.root.useGradeExportUrl();
   const showBulkManagement = selectors.root.useShowBulkManagement();
-  const downloadBulkGradesReport = actions.grades.downloadReport.useBulkGrades();
+  const downloadBulkGradesReport = actions.grades.useDownloadBulkGradesReport();
 
   const handleClickExportGrades = () => {
     downloadBulkGradesReport();

src/components/GradesView/BulkManagementControls/hooks.test.js

@@ -5,7 +5,7 @@ import useBulkManagementControlsData from './hooks';
 jest.mock('data/redux/hooks', () => ({
   actions: {
     grades: {
-      downloadReport: { useBulkGrades: jest.fn() },
+      useDownloadBulkGradesReport: jest.fn(),
     },
   },
   selectors: {
@@ -17,7 +17,7 @@ jest.mock('data/redux/hooks', () => ({
 }));
 
 const downloadBulkGrades = jest.fn();
-actions.grades.downloadReport.useBulkGrades.mockReturnValue(downloadBulkGrades);
+actions.grades.useDownloadBulkGradesReport.mockReturnValue(downloadBulkGrades);
 const gradeExportUrl = 'test-grade-export-url';
 selectors.root.useGradeExportUrl.mockReturnValue(gradeExportUrl);
 selectors.root.useShowBulkManagement.mockReturnValue(true);
@@ -47,7 +47,7 @@ describe('useBulkManagementControlsData', () => {
     it('initializes redux hooks', () => {
       expect(selectors.root.useGradeExportUrl).toHaveBeenCalledWith();
       expect(selectors.root.useShowBulkManagement).toHaveBeenCalledWith();
-      expect(actions.grades.downloadReport.useBulkGrades).toHaveBeenCalledWith();
+      expect(actions.grades.useDownloadBulkGradesReport).toHaveBeenCalledWith();
     });
   });
   describe('output', () => {

src/components/GradesView/BulkManagementControls/index.jsx

@@ -18,7 +18,8 @@ export const BulkManagementControls = () => {
     handleClickExportGrades,
   } = useBulkManagementControlsData();
 
-  return show && (
+  if (!show) { return null; }
+  return (
     <div className="d-flex">
       <NetworkButton
         label={messages.downloadGradesBtn}

src/components/GradesView/InterventionsReport/index.jsx

@@ -16,7 +16,11 @@ export const InterventionsReport = () => {
   const { show, handleClick } = useInterventionsReportData();
   const { formatMessage } = useIntl();
 
-  return show && (
+  if (!show) {
+    return null;
+  }
+
+  return (
     <div>
       <h4 className="mt-0">
         {formatMessage(messages.title)}