refactor: remove discardIfDrafting util and replace Schema_GridEvent with Schema_Event in Sidebar components and hooks

Author: tyler-dane

packages/web/src/views/Calendar/components/Sidebar/Sidebar.tsx

@@ -8,11 +8,11 @@ import {
 import { useAppSelector } from "@web/store/store.hooks";
 import { selectSidebarTab } from "@web/ducks/events/selectors/view.selectors";
 
-import { SidebarContainer, SidebarTabContainer } from "./styled";
+import { useSidebar } from "../../hooks/draft/sidebar/useSidebar";
 import { SomedayTab } from "./SomedayTab/SomedayTab";
 import { SidebarIconRow } from "./SidebarIconRow";
 import { MonthTab } from "./MonthTab/MonthTab";
-import { useSidebar } from "../../hooks/draft/sidebar/useSidebar";
+import { SidebarContainer, SidebarTabContainer } from "./styled";
 
 interface Props {
   dateCalcs: DateCalcs;
@@ -34,11 +34,7 @@ export const Sidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = ({
   const sidebarProps = useSidebar(measurements, dateCalcs);
 
   return (
-    <SidebarContainer
-      id="sidebar"
-      role="complementary"
-      onClick={sidebarProps.util.discardIfDrafting}
-    >
+    <SidebarContainer id="sidebar" role="complementary">
       <SidebarTabContainer>
         {tab === "tasks" && (
           <SomedayTab

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvent.tsx

@@ -12,12 +12,13 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
-import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { SIDEBAR_OPEN_WIDTH } from "@web/views/Calendar/layout.constants";
 import { SomedayEventForm } from "@web/views/Forms/SomedayEventForm";
 import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
 import { useEventForm } from "@web/views/Forms/hooks/useEventForm";
 import { Util_Sidebar } from "@web/views/Calendar/hooks/draft/sidebar/useSidebarUtil";
+import { draftSlice } from "@web/ducks/events/slices/draft.slice";
+import { useAppDispatch } from "@web/store/store.hooks";
 
 import { StyledNewSomedayEvent } from "./styled";
 import { SomedayEventRectangle } from "./SomedayEventRectangle";
@@ -49,17 +50,17 @@ function getStyle(
 
 export interface Props {
   category: Categories_Event;
-  event: Schema_GridEvent; //TODO make this Event (not grid)
+  event: Schema_Event;
   isDrafting: boolean;
   isDragging: boolean;
   isOverGrid: boolean;
   onClose: () => void;
-  onDraft: (event: Schema_GridEvent, category: Categories_Event) => void;
+  onDraft: (event: Schema_Event, category: Categories_Event) => void;
   onMigrate: Util_Sidebar["onMigrate"];
   onSubmit: (event?: Schema_Event) => void;
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
-  setEvent: Dispatch<SetStateAction<Schema_GridEvent>>;
+  setEvent: Dispatch<SetStateAction<Schema_Event>>;
 }
 
 export const SomedayEvent = ({
@@ -76,20 +77,24 @@ export const SomedayEvent = ({
   snapshot,
   setEvent,
 }: Props) => {
-  const formType =
-    category === Categories_Event.SOMEDAY_WEEK ? "sidebarWeek" : "sidebarMonth";
+  const dispatch = useAppDispatch();
 
-  const initialFormOpen = event?.isOpen || (isDrafting && !isDragging);
-  const [isFocused, setIsFocused] = useState(false);
+  const initialFormOpen = isDrafting && !isDragging;
   const [isFormOpen, setIsFormOpen] = useState(initialFormOpen);
+  const [isFocused, setIsFocused] = useState(false);
 
   const onIsFormOpenChange = (isOpen: boolean) => {
     setIsFormOpen(isOpen);
     if (!isOpen) {
       setIsFocused(false);
     }
+
+    dispatch(draftSlice.actions.discard());
   };
 
+  const formType =
+    category === Categories_Event.SOMEDAY_WEEK ? "sidebarWeek" : "sidebarMonth";
+
   const { context, refs, strategy, y } = useEventForm(
     formType,
     isFormOpen,
@@ -100,8 +105,8 @@ export const SomedayEvent = ({
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
 
   useEffect(() => {
-    setIsFormOpen(event?.isOpen || (isDrafting && !isDragging));
-  }, [event?.isOpen, isDrafting, isDragging]);
+    setIsFormOpen(isDrafting && !isDragging);
+  }, [isDrafting, isDragging]);
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     switch (e.key) {

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx

@@ -1,15 +1,14 @@
 import React, { FC, memo } from "react";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
 import { ID_SOMEDAY_DRAFT } from "@web/common/constants/web.constants";
-import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar";
 
 import { DraggableSomedayEvent } from "./DraggableSomedayEvent";
 
 export const DraggableSomedayEvents: FC<{
   category: Categories_Event;
   events: Schema_Event[];
-  draft: Schema_GridEvent;
+  draft: Schema_Event;
   isOverGrid: boolean;
   util: SidebarProps["util"];
 }> = memo(({ category, draft, events, isOverGrid, util }) => {

packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarState.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { Schema_Event } from "@core/types/event.types";
 import { COLUMN_MONTH, COLUMN_WEEK } from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { useAppSelector } from "@web/store/store.hooks";
@@ -18,7 +18,7 @@ export const useSidebarState = (measurements: Measurements_Grid) => {
 
   const { eventType: draftType } = useAppSelector(selectDraftStatus);
 
-  const [draft, setDraft] = useState<Schema_GridEvent | null>(null);
+  const [draft, setDraft] = useState<Schema_Event | null>(null);
   const [isDrafting, setIsDrafting] = useState(false);
   const [isDraftingExisting, setIsDraftingExisting] = useState(false);
 

packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts

@@ -199,18 +199,6 @@ export const useSidebarUtil = (
     );
   };
 
-  const discardIfDrafting = () => {
-    if (state.isDrafting) {
-      console.log("drafting in sidebar, so discarding");
-      dispatch(draftSlice.actions.discard());
-      close();
-      return;
-    }
-    if (isDraftingOnGrid) {
-      dispatch(draftSlice.actions.discard());
-    }
-  };
-
   const onDragEnd = (result: DropResult) => {
     const { destination, draggableId, source } = result;
 
@@ -412,7 +400,6 @@ export const useSidebarUtil = (
   return {
     close,
     createDefaultSomeday,
-    discardIfDrafting,
     onDraft,
     onDragEnd,
     onDragStart,