CLEANUP Schedule modal now using redux. Deleted manual schedule modal. To be incorporated into generic.

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -6,28 +6,32 @@ import {
   QUERY_APPOINTMENTS_BY_JOBID
 } from "../../graphql/appointments.queries";
 import moment from "moment";
-import { notification } from "antd";
+import { notification, Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectSchedule } from "../../redux/modals/modals.selectors";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  scheduleModal: selectSchedule
 });
-
-export default connect(
-  mapStateToProps,
-  null
-)(function ScheduleJobModalContainer({
-  scheduleModalState,
-  jobId,
+const mapDispatchToProps = dispatch => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("schedule"))
+});
+export function ScheduleJobModalContainer({
+  scheduleModal,
   bodyshop,
-  refetch
+  toggleModalVisible
 }) {
-  const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
+  const { visible, context, actions } = scheduleModal;
+  const { jobId } = context;
+  const { refetch } = actions;
+
   const [appData, setAppData] = useState({
     jobid: jobId,
     start: null,
@@ -46,48 +50,61 @@ export default connect(
   const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
     variables: { jobid: jobId },
     fetchPolicy: "network-only",
-    skip: !scheduleModalVisible
+    skip: !visible
   });
 
-  return (
-    <ScheduleJobModalComponent
-      existingAppointments={existingAppointments}
-      appData={appData}
-      setAppData={setAppData}
-      formData={formData}
-      setFormData={setFormData}
-      //Spreadable Modal Props
-      visible={scheduleModalVisible}
-      onCancel={() => setscheduleModalVisible(false)}
-      onOk={() => {
-        //TODO Customize the amount of minutes it will add.
-        insertAppointment({
-          variables: {
-            app: { ...appData, end: moment(appData.start).add(60, "minutes") }
-          }
-        })
-          .then(r => {
-            updateJobStatus().then(r => {
-              notification["success"]({
-                message: t("appointments.successes.created")
-              });
-
-              if (formData.notifyCustomer) {
-                //TODO Implement customer reminder on scheduling.
-                alert("Chosed to notify the customer somehow!");
-              }
-              setscheduleModalVisible(false);
-              if (refetch) refetch();
-            });
-          })
-          .catch(error => {
-            notification["error"]({
-              message: t("appointments.errors.saving", {
-                message: error.message
-              })
-            });
+  //TODO Customize the amount of minutes it will add.
+  const handleOk = () => {
+    insertAppointment({
+      variables: {
+        app: { ...appData, end: moment(appData.start).add(60, "minutes") }
+      }
+    })
+      .then(r => {
+        updateJobStatus().then(r => {
+          notification["success"]({
+            message: t("appointments.successes.created")
           });
-      }}
-    />
+
+          if (formData.notifyCustomer) {
+            //TODO Implement customer reminder on scheduling.
+            alert("Chosed to notify the customer somehow!");
+          }
+          toggleModalVisible();
+          if (refetch) refetch();
+        });
+      })
+      .catch(error => {
+        notification["error"]({
+          message: t("appointments.errors.saving", {
+            message: error.message
+          })
+        });
+      });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onCancel={() => toggleModalVisible()}
+      onOk={handleOk}
+      width={"90%"}
+      maskClosable={false}
+      destroyOnClose
+      okButtonProps={{ disabled: appData.start ? false : true }}
+    >
+      <ScheduleJobModalComponent
+        existingAppointments={existingAppointments}
+        appData={appData}
+        setAppData={setAppData}
+        formData={formData}
+        setFormData={setFormData}
+      />
+    </Modal>
   );
-});
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleJobModalContainer);