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

Bump React-Big-Calendar

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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) {
+      if (!result.errors) {
-      notification["success"]({ message: t("appointments.successes.saved") });
+        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 =
+  const selectedColor = useMemo(() => {
-    event.color &&
+    if (event.color && bodyshop.appt_colors) {
-    bodyshop.appt_colors &&
+      const colorObj = bodyshop.appt_colors.find((color) => color.color.hex === event.color);
-    bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]?.label;
+      return colorObj?.label;
+    }
+    return null;
+  }, [event.color, bodyshop.appt_colors]);
 
-  const menu = {
+  const menu = useMemo(
+    () => ({
       defaultSelectedKeys: [event.color],
       onClick: onClick,
       items: [
@@ -55,7 +59,9 @@ 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}>
@@ -67,4 +73,4 @@ export function ScheduleEventColor({ bodyshop, event }) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);
+export default connect(mapStateToProps)(React.memo(ScheduleEventColor));

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 navigate = useNavigate();
-  const searchParams = queryString.parse(useLocation().search);
+  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>
+  const handleTitleBlur = useCallback(async () => {
-      <Input
-        value={title}
-        onChange={(e) => setTitle(e.currentTarget.value)}
-        onBlur={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
+            <Dropdown menu={reminderMenu}>
-            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")
-                      });
-                    }
-                  }
-                }
-              ]
-            }}
-          >
               <Button>{t("appointments.actions.sendreminder")}</Button>
             </Dropdown>
           ) : null}
           {event.arrived ? (
-          <Button
+            <Button disabled={event.arrived}>{t("appointments.actions.cancel")}</Button>
-            // onClick={() => handleCancel(event.id)}
-            disabled={event.arrived}
-          >
-            {t("appointments.actions.cancel")}
-          </Button>
           ) : (
             <Popover
               trigger="click"
               disabled={event.arrived}
               content={
-              <Form
+                <Form layout="vertical" onFinish={handleCancelFormFinish}>
-                layout="vertical"
-                onFinish={({ lost_sale_reason }) => {
-                  handleCancel({ id: event.id, lost_sale_reason });
-                }}
-              >
                   <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
+              <Button disabled={event.arrived}>{t("appointments.actions.cancel")}</Button>
-              // onClick={() => handleCancel(event.id)}
-              disabled={event.arrived}
-            >
-              {t("appointments.actions.cancel")}
-            </Button>
             </Popover>
           )}
 
           {event.isintake ? (
-          <Button
+            <Button disabled={event.arrived} onClick={handleRescheduleClick}>
-            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
-                }
-              });
-            }}
-          >
               {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));

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")
         });
-
+      } else {
-    if (!!cancelAppt.errors) {
+        notification.error({
-      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"
             })
           );
-      }
+        } else {
-      if (!!jobUpdate.errors) {
+          notification.error({
-        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);

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,7 +20,7 @@ export function ScheduleEventNote({ event }) {
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const { t } = useTranslation();
 
-  const toggleEdit = async () => {
+  const toggleEdit = useCallback(async () => {
     if (editing) {
       // Await the update
       setLoading(true);
@@ -34,10 +31,10 @@ export function ScheduleEventNote({ event }) {
         }
       });
 
-      if (!!!result.errors) {
+      if (!result.errors) {
-        //  notification["success"]({ message: t("appointments.successes.saved") });
+        // 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));