feat(web): Implement migrate forward/backward for someday events form

functionality already existed in `SomedayEventRectangle`, similar implementation now exists inside `SomedayEventForm`

Author: that-one-arab

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

@@ -82,6 +82,7 @@ export const SomedayEventContainer = ({
             >
               <SomedayEventForm
                 event={event}
+                category={category}
                 onClose={() => {
                   actions.closeForm();
                   actions.close();

packages/web/src/views/Forms/EventForm/MigrateBackwardButton.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+import TooltipIconButton from "@web/components/TooltipIconButton/TooltipIconButton";
+
+const StyledMigrateBackwardButton = styled.div`
+  font-size: 25px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const MigrateBackwardButton = ({
+  onClick,
+  tooltipText = "Migrate Backward",
+}: {
+  onClick: () => void;
+  tooltipText: string;
+}) => {
+  return (
+    <TooltipIconButton
+      component={
+        <StyledMigrateBackwardButton role="button">
+          {"<"}
+        </StyledMigrateBackwardButton>
+      }
+      buttonProps={{ "aria-label": tooltipText }}
+      tooltipProps={{
+        description: tooltipText,
+        onClick,
+      }}
+    />
+  );
+};

packages/web/src/views/Forms/EventForm/MigrateForwardButton.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+import TooltipIconButton from "@web/components/TooltipIconButton/TooltipIconButton";
+
+const StyledMigrateForwardButton = styled.div`
+  font-size: 25px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const MigrateForwardButton = ({
+  onClick,
+  tooltipText = "Migrate Forward",
+}: {
+  onClick: () => void;
+  tooltipText: string;
+}) => {
+  return (
+    <TooltipIconButton
+      component={
+        <StyledMigrateForwardButton role="button">
+          {">"}
+        </StyledMigrateForwardButton>
+      }
+      buttonProps={{ "aria-label": tooltipText }}
+      tooltipProps={{
+        description: tooltipText,
+        onClick,
+      }}
+    />
+  );
+};

packages/web/src/views/Forms/EventForm/types.ts

@@ -1,9 +1,10 @@
 import { SetStateAction } from "react";
 import { Priority } from "@core/constants/core.constants";
-import { Schema_Event } from "@core/types/event.types";
+import { Categories_Event, Schema_Event } from "@core/types/event.types";
 
 export interface FormProps {
   event: Schema_Event;
+  category: Categories_Event;
   isOpen?: boolean;
   onClose: () => void;
   onCloseEventForm?: () => void;

packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx

@@ -4,6 +4,7 @@ import { OptionsOrDependencyArray } from "react-hotkeys-hook/dist/types";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { Key } from "ts-key-enum";
+import { Categories_Event } from "@core/types/event.types";
 import { ID_SOMEDAY_EVENT_FORM } from "@web/common/constants/web.constants";
 import { colorByPriority } from "@web/common/styles/theme.util";
 import {
@@ -13,6 +14,7 @@ import {
 import { getSomedayEventsSlice } from "@web/ducks/events/slices/someday.slice";
 import { useAppDispatch } from "@web/store/store.hooks";
 import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
+import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
 import { DeleteButton } from "@web/views/Forms/EventForm/DeleteButton";
 import { DuplicateButton } from "@web/views/Forms/EventForm/DuplicateButton";
 import { PrioritySection } from "@web/views/Forms/EventForm/PrioritySection";
@@ -24,6 +26,8 @@ import {
   StyledTitle,
 } from "@web/views/Forms/EventForm/styled";
 import { FormProps, SetEventFormField } from "@web/views/Forms/EventForm/types";
+import { MigrateBackwardButton } from "../EventForm/MigrateBackwardButton";
+import { MigrateForwardButton } from "../EventForm/MigrateForwardButton";
 import { RepeatSection } from "../EventForm/RepeatSection";
 
 const hotkeysOptions: OptionsOrDependencyArray = {
@@ -32,13 +36,19 @@ const hotkeysOptions: OptionsOrDependencyArray = {
 
 export const SomedayEventForm: React.FC<FormProps> = ({
   event,
+  category,
   onClose,
   onSubmit,
   setEvent,
   ...props
 }) => {
   const dispatch = useAppDispatch();
   const { actions } = useDraftContext();
+  const {
+    actions: { onMigrate },
+  } = useSidebarContext();
+
+  const target = category === Categories_Event.SOMEDAY_WEEK ? "week" : "month";
 
   const { priority, title } = event || {};
   const bgColor = colorByPriority[priority];
@@ -185,6 +195,18 @@ export const SomedayEventForm: React.FC<FormProps> = ({
       role="form"
     >
       <StyledIconRow>
+        <MigrateBackwardButton
+          tooltipText={`Migrate to previous ${target}`}
+          onClick={() => {
+            onMigrate(event, category, "back");
+          }}
+        />
+        <MigrateForwardButton
+          tooltipText={`Migrate to next ${target}`}
+          onClick={() => {
+            onMigrate(event, category, "forward");
+          }}
+        />
         <DeleteButton onClick={onDelete} />
         <DuplicateButton onClick={onDuplicateEvent} />
       </StyledIconRow>