🐛 Fix: Disable newly created event from being editing during optimistic render cycle (#206)

* fix: disable newly created event from being editing during optimistic render cycle

Prevents the event from being modified when we initially insert the event as an optimistic event

* refactor: replace disabledColorByPriority map with simple darken()

the previous solution worked fine, but it came with the overhead of
another color map in theme.util. We're going to get
 away from these as we support more priorities,
 so this method lets us scale with more ease

---------

Co-authored-by: Tyler Dane <tyler@switchback.tech>

Author: that-one-arab

packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx

@@ -18,7 +18,10 @@ import {
 import { getPosition } from "@web/views/Calendar/hooks/event/getPosition";
 import { getLineClamp } from "@web/common/utils/grid.util";
 import { getTimesLabel } from "@web/common/utils/web.date.util";
-import { ZIndex } from "@web/common/constants/web.constants";
+import {
+  ID_OPTIMISTIC_PREFIX,
+  ZIndex,
+} from "@web/common/constants/web.constants";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent, StyledEventScaler, StyledEventTitle } from "../../styled";
@@ -56,6 +59,7 @@ const _GridEvent = (
   const { component } = weekProps;
 
   const isInPast = dayjs().isAfter(dayjs(_event.endDate));
+  const isOptimistic = _event._id?.startsWith(ID_OPTIMISTIC_PREFIX);
   const event = _event;
 
   const position = getPosition(
@@ -79,10 +83,13 @@ const _GridEvent = (
       isDragging={isDragging}
       isInPast={isInPast}
       isPlaceholder={isPlaceholder}
+      isOptimistic={isOptimistic}
       isResizing={isResizing}
       left={position.left}
       lineClamp={lineClamp}
       onMouseDown={(e) => {
+        if (isOptimistic) return;
+
         onEventMouseDown(event, e);
       }}
       priority={event.priority}

packages/web/src/views/Calendar/components/Event/styled.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { Priority } from "@core/constants/core.constants";
-import { brighten } from "@core/util/color.utils";
+import { brighten, darken } from "@core/util/color.utils";
 import { Text } from "@web/components/Text";
 import { ZIndex } from "@web/common/constants/web.constants";
 import {
@@ -17,6 +17,7 @@ interface StyledEventProps {
   isInPast: boolean;
   isResizing: boolean;
   isPlaceholder: boolean;
+  isOptimistic: boolean;
   left: number;
   lineClamp: number;
   opacity?: number;
@@ -71,13 +72,21 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
   &:hover {
     transition: background-color 0.35s linear;
 
-    ${({ isPlaceholder, isResizing, hoverColor, theme }) =>
+    ${({
+      backgroundColor,
+      isOptimistic,
+      isPlaceholder,
+      isResizing,
+      hoverColor,
+      theme,
+    }) =>
       !isPlaceholder &&
       !isResizing &&
       `
-      background-color: ${hoverColor};
+      background-color: ${isOptimistic ? darken(backgroundColor) : hoverColor};
+      cursor: ${isOptimistic ? "wait" : "pointer"};
       drop-shadow(2px 4px 4px ${theme.color.shadow.default});
-      `};
+     `};
   }
 
   &.active {