Added jobs in production to schedule and error handling. BOD-371

client/src/components/schedule-calendar/schedule-calendar.component.jsx

@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
+import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
@@ -21,26 +22,31 @@ export function ScheduleCalendarComponent({
 
   return (
     <div>
-      <Button
-        onClick={() => {
-          refetch();
-        }}
-      >
-        <SyncOutlined />
-      </Button>
+      <div className="imex-flex-row">
+        <Button
+          className="imex-flex-row__margin"
+          onClick={() => {
+            refetch();
+          }}
+        >
+          <SyncOutlined />
+        </Button>
 
-      <Button
-        onClick={() => {
-          setScheduleContext({
-            actions: { refetch: refetch },
-            context: {
-              jobId: null,
-            },
-          });
-        }}
-      >
-        {t("appointments.actions.new")}
-      </Button>
+        <Button
+          className="imex-flex-row__margin"
+          onClick={() => {
+            setScheduleContext({
+              actions: { refetch: refetch },
+              context: {
+                jobId: null,
+              },
+            });
+          }}
+        >
+          {t("appointments.actions.new")}
+        </Button>
+        <ScheduleProductionList />
+      </div>
 
       <ScheduleModal />
 

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/react-hooks";
 import queryString from "query-string";
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
 import AlertComponent from "../alert/alert.component";
@@ -22,6 +22,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
 
   const { date, view } = search;
   const range = useMemo(() => getRange(date, view), [date, view]);
+
   const { loading, error, data, refetch } = useQuery(
     QUERY_ALL_ACTIVE_APPOINTMENTS,
     {
@@ -30,6 +31,10 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
     }
   );
 
+  useEffect(() => {
+    if (data && range.end) calculateScheduleLoad(range.end);
+  }, [data, range, calculateScheduleLoad]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
   let normalizedData = data.appointments.map((e) => {
@@ -42,8 +47,6 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
     );
   });
 
-  calculateScheduleLoad(range.end);
-
   return (
     <ScheduleCalendarComponent
       refetch={refetch}