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

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

@@ -1,74 +1,63 @@
-import { Checkbox, Col, DatePicker, Modal, Row, Tabs, TimePicker } from "antd";
+import { Checkbox, Col, DatePicker, Row, Tabs, TimePicker } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 
-
-
 export default function ScheduleJobModalComponent({
   existingAppointments,
   appData,
   setAppData,
   formData,
-  setFormData,
-  ...props
+  setFormData
 }) {
   const { t } = useTranslation();
   //TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
   return (
-    <Modal
-      {...props}
-      width={"80%"}
-      maskClosable={false}
-      destroyOnClose={true}
-      okButtonProps={{ disabled: appData.start ? false : true }}
-    >
-      <Row>
-        <Col span={14}>
-          <Tabs defaultActiveKey="1">
-            <Tabs.TabPane tab="SMART Scheduling" key="auto">
-              Automatic Job Selection.
-            </Tabs.TabPane>
-            <Tabs.TabPane tab="Manual Scheduling" key="manual">
-              <Row>
-                Manual Job Selection Scheduled Time
-                <DatePicker
-                  value={appData.start}
-                  onChange={e => {
-                    setAppData({ ...appData, start: e });
-                  }}
-                />
-                <TimePicker
-                  value={appData.start}
-                  format={"HH:mm"}
-                  minuteStep={15}
-                  onChange={e => {
-                    setAppData({ ...appData, start: e });
-                  }}
-                />
-              </Row>
-            </Tabs.TabPane>
-          </Tabs>
-          <ScheduleExistingAppointmentsList
-            existingAppointments={existingAppointments}
-          />
-          {
-            //TODO Build out notifications.
+    <Row>
+      <Col span={14}>
+        <Tabs defaultActiveKey="1">
+          <Tabs.TabPane tab="SMART Scheduling" key="auto">
+            Automatic Job Selection.
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="Manual Scheduling" key="manual">
+            <Row>
+              Manual Job Selection Scheduled Time
+              <DatePicker
+                value={appData.start}
+                onChange={e => {
+                  setAppData({ ...appData, start: e });
+                }}
+              />
+              <TimePicker
+                value={appData.start}
+                format={"HH:mm"}
+                minuteStep={15}
+                onChange={e => {
+                  setAppData({ ...appData, start: e });
+                }}
+              />
+            </Row>
+          </Tabs.TabPane>
+        </Tabs>
+        <ScheduleExistingAppointmentsList
+          existingAppointments={existingAppointments}
+        />
+        {
+          //TODO Build out notifications.
+        }
+        <Checkbox
+          defaultChecked={formData.notifyCustomer}
+          onChange={e =>
+            setFormData({ ...formData, notifyCustomer: e.target.checked })
           }
-          <Checkbox
-            defaultChecked={formData.notifyCustomer}
-            onChange={e =>
-              setFormData({ ...formData, notifyCustomer: e.target.checked })
-            }
-          >
-            {t("jobs.labels.appointmentconfirmation")}
-          </Checkbox>
-        </Col>
-        <Col span={10}>
-          <ScheduleDayViewContainer day={appData.start} />
-        </Col>
-      </Row>
-    </Modal>
+        >
+          {t("jobs.labels.appointmentconfirmation")}
+        </Checkbox>
+      </Col>
+      <Col span={10}>
+        <ScheduleDayViewContainer day={appData.start} />
+      </Col>
+    </Row>
   );
 }

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