Added error handling for null groups RPS-55

src/components/molecules/job-group/job-group.molecule.jsx

@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB } from "../../../graphql/jobs.queries";
 import ipcTypes from "../../../ipc.types";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
+import { AlertFilled } from "@ant-design/icons";
 const { ipcRenderer } = window;
 
 const mapStateToProps = createStructuredSelector({
@@ -51,12 +52,20 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
   );
 
   return (
-    <Dropdown overlay={menu} trigger={["click"]}>
-      <a href=" #" onClick={(e) => e.preventDefault()}>
-        {group}
-        <DownOutlined style={{ marginLeft: ".2rem" }} />
-        {loading && <LoadingOutlined />}
-      </a>
-    </Dropdown>
+    <>
+      <Dropdown overlay={menu} trigger={["click"]}>
+        <a href=" #" onClick={(e) => e.preventDefault()}>
+          {group}
+          <DownOutlined style={{ marginLeft: ".2rem" }} />
+          {loading && <LoadingOutlined />}
+        </a>
+      </Dropdown>
+      {!group && (
+        <div style={{ marginLeft: ".2rem" }}>
+          <AlertFilled style={{ color: "tomato" }} className="blink_me" />
+          <span style={{ color: "tomato" }}>No group set.</span>
+        </div>
+      )}
+    </>
   );
 }

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);