From a6cb22eb8e6e9f66130858ef9a77b559786ca0fb Mon Sep 17 00:00:00 2001
From: Muhammed Al-Dulaimi <muhammed.aldulaimi98@gmail.com>
Date: Mon, 30 Dec 2024 02:45:39 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20Disable=20newly=20created?=
 =?UTF-8?q?=20event=20from=20being=20editing=20during=20optimistic=20rende?=
 =?UTF-8?q?r=20cycle=20(#206)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../Event/Grid/GridEvent/GridEvent.tsx          |  9 ++++++++-
 .../views/Calendar/components/Event/styled.ts   | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
index 9ac67d1a..c892b6dd 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
+++ b/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}
diff --git a/packages/web/src/views/Calendar/components/Event/styled.ts b/packages/web/src/views/Calendar/components/Event/styled.ts
index cd13042b..ce70f9d3 100644
--- a/packages/web/src/views/Calendar/components/Event/styled.ts
+++ b/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 {