Added error handling for null groups RPS-55

src/components/pages/reporting/reporting.page.jsx

@@ -1,8 +1,13 @@
-import { Card } from "antd";
+import { Card, Typography } from "antd";
 import React from "react";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { selectDates } from "../../../redux/reporting/reporting.selectors";
+import { setSelectedJobId } from "../../../redux/application/application.actions";
+import {
+  selectDates,
+  selectReportingError,
+} from "../../../redux/reporting/reporting.selectors";
 import ReportingTitleAtom from "../../atoms/reporting-title/reporting-title.atom";
 import ReportingDatesMolecule from "../../molecules/reporting-dates/reporting-dates.molecule";
 import ReportingJobsListMolecule from "../../molecules/reporting-jobs-list/reporting-jobs-list.molecule";
@@ -12,19 +17,34 @@ import "./reporting.page.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   dates: selectDates,
+  error: selectReportingError,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
+  setSelectedJobId: (id) => dispatch(setSelectedJobId(id)),
 });
-export default connect(mapStateToProps, mapDispatchToProps)(ReportingPage);
 
-export function ReportingPage({ dates }) {
+export function ReportingPage({ dates, error, setSelectedJobId }) {
   return (
     <div className="reporting-container">
       <Card>
         <ReportingDatesMolecule />
       </Card>
-      {dates && dates.startDate && dates.endDate && (
+      {error && (
+        <div>
+          <Typography.Title level={4}>{error.message}</Typography.Title>
+          <ul>
+            {error.jobs.map((j, idx) => (
+              <li key={idx}>
+                <Link onClick={() => setSelectedJobId(j.id)} to={"/"}>
+                  {`${j.clm_no} - ${j.error}`}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {!error && dates && dates.startDate && dates.endDate && (
         <div className="reporting-cards">
           <Card>
             <ReportingTitleAtom />
@@ -41,3 +61,5 @@ export function ReportingPage({ dates }) {
     </div>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReportingPage);