IO-2932-Scheduling-Lag-on-AIO:

Bump React-Big-Calendar Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-09-17 12:54:19 -04:00
parent cd0a08a7be
commit 8f118937f3
4 changed files with 408 additions and 373 deletions
--- a/client/src/components/job-at-change/schedule-event.color.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.color.component.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { useMutation } from "@apollo/client";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
@@ -11,15 +11,13 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});

 export function ScheduleEventColor({ bodyshop, event }) {
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const { t } = useTranslation();

-  const onClick = async ({ key }) => {
+  const onClick = useCallback(
+    async ({ key }) => {
      const result = await updateAppointment({
        variables: {
          appid: event.id,
@@ -27,23 +25,29 @@ export function ScheduleEventColor({ bodyshop, event }) {
        }
      });

-    if (!!!result.errors) {
-      notification["success"]({ message: t("appointments.successes.saved") });
+      if (!result.errors) {
+        notification.success({ message: t("appointments.successes.saved") });
      } else {
-      notification["error"]({
+        notification.error({
          message: t("appointments.errors.saving", {
            error: JSON.stringify(result.errors)
          })
        });
      }
-  };
+    },
+    [event.id, t, updateAppointment]
+  );

-  const selectedColor =
-    event.color &&
-    bodyshop.appt_colors &&
-    bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]?.label;
+  const selectedColor = useMemo(() => {
+    if (event.color && bodyshop.appt_colors) {
+      const colorObj = bodyshop.appt_colors.find((color) => color.color.hex === event.color);
+      return colorObj?.label;
+    }
+    return null;
+  }, [event.color, bodyshop.appt_colors]);

-  const menu = {
+  const menu = useMemo(
+    () => ({
      defaultSelectedKeys: [event.color],
      onClick: onClick,
      items: [
@@ -55,11 +59,13 @@ export function ScheduleEventColor({ bodyshop, event }) {
        { type: "divider" },
        { key: "null", label: t("general.actions.clear") }
      ]
-  };
+    }),
+    [bodyshop.appt_colors, event.color, onClick, t]
+  );

  return (
    <Dropdown menu={menu}>
-      <a href=" #" onClick={(e) => e.preventDefault()}>
+      <a href="#" onClick={(e) => e.preventDefault()}>
        {selectedColor}
        <DownOutlined />
      </a>
@@ -67,4 +73,4 @@ export function ScheduleEventColor({ bodyshop, event }) {
  );
 }

-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);
+export default connect(mapStateToProps)(React.memo(ScheduleEventColor));
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -3,7 +3,7 @@ import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select,
 import parsePhoneNumber from "libphonenumber-js";
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -27,6 +27,7 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
+
 const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -44,16 +45,13 @@ export function ScheduleEventComponent({
 }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
-  const history = useNavigate();
-  const searchParams = queryString.parse(useLocation().search);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const searchParams = queryString.parse(location.search);
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const [title, setTitle] = useState(event.title);
-  const blockContent = (
-    <Space direction="vertical" wrap>
-      <Input
-        value={title}
-        onChange={(e) => setTitle(e.currentTarget.value)}
-        onBlur={async () => {
+
+  const handleTitleBlur = useCallback(async () => {
    await updateAppointment({
      variables: {
        appid: event.id,
@@ -74,16 +72,123 @@ export function ScheduleEventComponent({
        }
      }
    });
-        }}
-      />
+  }, [updateAppointment, event, title]);

-      <Button onClick={() => handleCancel({ id: event.id })} disabled={event.arrived}>
+  const handleUnblock = useCallback(() => {
+    handleCancel({ id: event.id });
+  }, [handleCancel, event.id]);
+
+  const handlePreviewClick = useCallback(() => {
+    navigate({
+      search: queryString.stringify({
+        ...searchParams,
+        selected: event.job.id
+      })
+    });
+  }, [navigate, searchParams, event.job.id]);
+
+  const handleSendEmailReminder = useCallback(() => {
+    const Template = TemplateList("job").appointment_reminder;
+    GenerateDocument(
+      {
+        name: Template.key,
+        variables: { id: event.job.id }
+      },
+      {
+        to: event.job && event.job.ownr_ea,
+        subject: Template.subject
+      },
+      "e",
+      event.job && event.job.id
+    );
+  }, [event.job]);
+
+  const handleSendSMSReminder = useCallback(() => {
+    const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
+    if (p && p.isValid()) {
+      openChatByPhone({
+        phone_num: p.formatInternational(),
+        jobid: event.job.id
+      });
+      setMessage(
+        t("appointments.labels.reminder", {
+          shopname: bodyshop.shopname,
+          date: dayjs(event.start).format("MM/DD/YYYY"),
+          time: dayjs(event.start).format("HH:mm a")
+        })
+      );
+      setOpen(false);
+    } else {
+      notification.error({
+        message: t("messaging.error.invalidphone")
+      });
+    }
+  }, [event.job, openChatByPhone, setMessage, t, bodyshop.shopname, event.start, setOpen]);
+
+  const reminderMenuItems = useMemo(
+    () => [
+      {
+        key: "email",
+        label: t("general.labels.email"),
+        disabled: event.arrived,
+        onClick: handleSendEmailReminder
+      },
+      {
+        key: "sms",
+        label: t("general.labels.sms"),
+        disabled: event.arrived || !bodyshop.messagingservicesid,
+        onClick: handleSendSMSReminder
+      }
+    ],
+    [t, event.arrived, handleSendEmailReminder, handleSendSMSReminder, bodyshop.messagingservicesid]
+  );
+
+  const reminderMenu = useMemo(() => ({ items: reminderMenuItems }), [reminderMenuItems]);
+
+  const handleCancelFormFinish = useCallback(
+    ({ lost_sale_reason }) => {
+      handleCancel({ id: event.id, lost_sale_reason });
+    },
+    [handleCancel, event.id]
+  );
+
+  const handleRescheduleClick = useCallback(() => {
+    setOpen(false);
+    setScheduleContext({
+      actions: { refetch: refetch },
+      context: {
+        jobId: event.job.id,
+        job: event.job,
+        previousEvent: event.id,
+        color: event.color,
+        alt_transport: event.job && event.job.alt_transport,
+        note: event.note
+      }
+    });
+  }, [setOpen, setScheduleContext, refetch, event]);
+
+  const handleOpenChange = useCallback(
+    (vis) => {
+      if (!event.vacation) setOpen(vis);
+    },
+    [event.vacation]
+  );
+
+  const blockContent = useMemo(
+    () => (
+      <Space direction="vertical" wrap>
+        <Input value={title} onChange={(e) => setTitle(e.currentTarget.value)} onBlur={handleTitleBlur} />
+
+        <Button onClick={handleUnblock} disabled={event.arrived}>
          {t("appointments.actions.unblock")}
        </Button>
      </Space>
+    ),
+    [title, handleTitleBlur, handleUnblock, event.arrived, t]
  );

-  const popoverContent = (
+  const popoverContent = useMemo(
+    () => (
      <div style={{ maxWidth: "40vw" }}>
        {!event.isintake ? (
          <Space>
@@ -139,101 +244,26 @@ export function ScheduleEventComponent({
              <Button>{t("appointments.actions.viewjob")}</Button>
            </Link>
          ) : null}
+          {event.job ? <Button onClick={handlePreviewClick}>{t("appointments.actions.preview")}</Button> : null}
          {event.job ? (
-          <Button
-            onClick={() => {
-              history({
-                search: queryString.stringify({
-                  ...searchParams,
-                  selected: event.job.id
-                })
-              });
-            }}
-          >
-            {t("appointments.actions.preview")}
-          </Button>
-        ) : null}
-        {event.job ? (
-          <Dropdown
-            menu={{
-              items: [
-                {
-                  key: "email",
-                  label: t("general.labels.email"),
-                  disabled: event.arrived,
-                  onClick: () => {
-                    const Template = TemplateList("job").appointment_reminder;
-                    GenerateDocument(
-                      {
-                        name: Template.key,
-                        variables: { id: event.job.id }
-                      },
-                      {
-                        to: event.job && event.job.ownr_ea,
-                        subject: Template.subject
-                      },
-                      "e",
-                      event.job && event.job.id
-                    );
-                  }
-                },
-                {
-                  key: "sms",
-                  label: t("general.labels.sms"),
-                  disabled: event.arrived || !bodyshop.messagingservicesid,
-                  onClick: () => {
-                    const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
-                    if (p && p.isValid()) {
-                      openChatByPhone({
-                        phone_num: p.formatInternational(),
-                        jobid: event.job.id
-                      });
-                      setMessage(
-                        t("appointments.labels.reminder", {
-                          shopname: bodyshop.shopname,
-                          date: dayjs(event.start).format("MM/DD/YYYY"),
-                          time: dayjs(event.start).format("HH:mm a")
-                        })
-                      );
-                      setOpen(false);
-                    } else {
-                      notification["error"]({
-                        message: t("messaging.error.invalidphone")
-                      });
-                    }
-                  }
-                }
-              ]
-            }}
-          >
+            <Dropdown menu={reminderMenu}>
              <Button>{t("appointments.actions.sendreminder")}</Button>
            </Dropdown>
          ) : null}
          {event.arrived ? (
-          <Button
-            // onClick={() => handleCancel(event.id)}
-            disabled={event.arrived}
-          >
-            {t("appointments.actions.cancel")}
-          </Button>
+            <Button disabled={event.arrived}>{t("appointments.actions.cancel")}</Button>
          ) : (
            <Popover
              trigger="click"
              disabled={event.arrived}
              content={
-              <Form
-                layout="vertical"
-                onFinish={({ lost_sale_reason }) => {
-                  handleCancel({ id: event.id, lost_sale_reason });
-                }}
-              >
+                <Form layout="vertical" onFinish={handleCancelFormFinish}>
                  <Form.Item
                    name="lost_sale_reason"
                    label={t("jobs.fields.lost_sale_reason")}
                    rules={[
                      {
                        required: true
-                      //message: t("general.validation.required"),
                      }
                    ]}
                  >
@@ -248,33 +278,12 @@ export function ScheduleEventComponent({
                </Form>
              }
            >
-            <Button
-              // onClick={() => handleCancel(event.id)}
-              disabled={event.arrived}
-            >
-              {t("appointments.actions.cancel")}
-            </Button>
+              <Button disabled={event.arrived}>{t("appointments.actions.cancel")}</Button>
            </Popover>
          )}

          {event.isintake ? (
-          <Button
-            disabled={event.arrived}
-            onClick={() => {
-              setOpen(false);
-              setScheduleContext({
-                actions: { refetch: refetch },
-                context: {
-                  jobId: event.job.id,
-                  job: event.job,
-                  previousEvent: event.id,
-                  color: event.color,
-                  alt_transport: event.job && event.job.alt_transport,
-                  note: event.note
-                }
-              });
-            }}
-          >
+            <Button disabled={event.arrived} onClick={handleRescheduleClick}>
              {t("appointments.actions.reschedule")}
            </Button>
          ) : (
@@ -292,9 +301,21 @@ export function ScheduleEventComponent({
          ) : null}
        </Space>
      </div>
+    ),
+    [
+      event,
+      t,
+      handlePreviewClick,
+      reminderMenu,
+      bodyshop.md_lost_sale_reasons,
+      handleCancelFormFinish,
+      handleRescheduleClick
+    ]
  );

-  const RegularEvent = event.isintake ? (
+  const RegularEvent = useMemo(
+    () =>
+      event.isintake ? (
        <Space
          wrap
          size="small"
@@ -327,18 +348,19 @@ export function ScheduleEventComponent({
        >
          <strong>{`${event.title || ""}`}</strong>
        </div>
+      ),
+    [event, t]
  );

  return (
    <Popover
      open={open}
-      onOpenChange={(vis) => !event.vacation && setOpen(vis)}
+      onOpenChange={handleOpenChange}
      trigger="click"
      content={event.block ? blockContent : popoverContent}
      style={{
        height: "100%",
        width: "100%",
-
        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
      }}
    >
@@ -347,4 +369,4 @@ export function ScheduleEventComponent({
  );
 }

-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(ScheduleEventComponent));
--- a/client/src/components/job-at-change/schedule-event.container.jsx
+++ b/client/src/components/job-at-change/schedule-event.container.jsx
@@ -1,6 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { notification } from "antd";
-import React from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -10,23 +10,26 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ScheduleEventComponent from "./schedule-event.component";

-export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
+function ScheduleEventContainer({ bodyshop, event, refetch }) {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
  const [updateJob] = useMutation(UPDATE_JOB);
-  const handleCancel = async ({ id, lost_sale_reason }) => {
+
+  const handleCancel = useCallback(
+    async ({ id, lost_sale_reason }) => {
      logImEXEvent("schedule_cancel_appt");

      const cancelAppt = await cancelAppointment({
        variables: { appid: event.id }
      });
-    notification["success"]({
+
+      if (!cancelAppt.errors) {
+        notification.success({
          message: t("appointments.successes.canceled")
        });
-
-    if (!!cancelAppt.errors) {
-      notification["error"]({
+      } else {
+        notification.error({
          message: t("appointments.errors.canceling", {
            message: JSON.stringify(cancelAppt.errors)
          })
@@ -56,9 +59,8 @@ export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
              type: "appointmentcancel"
            })
          );
-      }
-      if (!!jobUpdate.errors) {
-        notification["error"]({
+        } else {
+          notification.error({
            message: t("jobs.errors.updating", {
              message: JSON.stringify(jobUpdate.errors)
            })
@@ -67,7 +69,11 @@ export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
        }
      }
      if (refetch) refetch();
-  };
+    },
+    [cancelAppointment, event.id, event.job, updateJob, bodyshop.md_ro_statuses.default_imported, dispatch, t, refetch]
+  );

  return <ScheduleEventComponent event={event} refetch={refetch} handleCancel={handleCancel} />;
 }
+
+export default React.memo(ScheduleEventContainer);
--- a/client/src/components/job-at-change/schedule-event.note.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.note.component.jsx
@@ -1,7 +1,7 @@
 import { EditFilled, SaveFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, Input, notification, Space } from "antd";
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,9 +12,6 @@ import DataLabel from "../data-label/data-label.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});

 export function ScheduleEventNote({ event }) {
  const [editing, setEditing] = useState(false);
@@ -23,9 +20,9 @@ export function ScheduleEventNote({ event }) {
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const { t } = useTranslation();

-  const toggleEdit = async () => {
+  const toggleEdit = useCallback(async () => {
    if (editing) {
-      //Await the update
+      // Await the update
      setLoading(true);
      const result = await updateAppointment({
        variables: {
@@ -34,10 +31,10 @@ export function ScheduleEventNote({ event }) {
        }
      });

-      if (!!!result.errors) {
-        //  notification["success"]({ message: t("appointments.successes.saved") });
+      if (!result.errors) {
+        // notification.success({ message: t("appointments.successes.saved") });
      } else {
-        notification["error"]({
+        notification.error({
          message: t("jobs.errors.saving", {
            error: JSON.stringify(result.errors)
          })
@@ -45,11 +42,15 @@ export function ScheduleEventNote({ event }) {
      }

      setEditing(false);
+      setLoading(false);
    } else {
      setEditing(true);
    }
-    setLoading(false);
-  };
+  }, [editing, note, updateAppointment, event.id, t]);
+
+  const handleNoteChange = useCallback((e) => {
+    setNote(e.target.value);
+  }, []);

  return (
    <DataLabel label={t("appointments.fields.note")}>
@@ -57,7 +58,7 @@ export function ScheduleEventNote({ event }) {
        {!editing ? (
          event.note || ""
        ) : (
-          <Input.TextArea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: "8vw" }} />
+          <Input.TextArea rows={3} value={note} onChange={handleNoteChange} style={{ maxWidth: "8vw" }} />
        )}
        <Button onClick={toggleEdit} loading={loading}>
          {editing ? <SaveFilled /> : <EditFilled />}
@@ -67,4 +68,4 @@ export function ScheduleEventNote({ event }) {
  );
 }

-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventNote);
+export default connect(mapStateToProps)(React.memo(ScheduleEventNote));