From 216a8647dbb1919f8034c86aa923f5d238af14e7 Mon Sep 17 00:00:00 2001
From: ImJustChew <chewtzihwee@gmail.com>
Date: Thu, 3 Oct 2024 23:09:22 +0900
Subject: [PATCH] fix: changing dates will now change end date too. fix: update
 all dates work

---
 src/components/Calendar/AddEventButton.tsx | 63 +++++++++++++++-------
 src/components/Calendar/calendar_hook.tsx  |  9 +---
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/components/Calendar/AddEventButton.tsx b/src/components/Calendar/AddEventButton.tsx
index b10d5ccb..ea8bad6a 100644
--- a/src/components/Calendar/AddEventButton.tsx
+++ b/src/components/Calendar/AddEventButton.tsx
@@ -9,7 +9,13 @@ import {
   startOfDay,
 } from "date-fns";
 import { cn } from "@/lib/utils";
-import { PropsWithChildren, useEffect, useMemo, useState } from "react";
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { UseFormReturn, useForm, useWatch } from "react-hook-form";
@@ -70,6 +76,23 @@ export const AddEventButton = ({
   const { currentColors } = useUserTimetable();
   const { labels } = useCalendar();
 
+  const generateEmptyEvent = useCallback(
+    () => ({
+      id: uuidv4(),
+      title: undefined,
+      details: undefined,
+      allDay: true,
+      start: startOfDay(new Date()),
+      end: endOfDay(new Date()),
+      repeat: {
+        type: null,
+      },
+      color: currentColors[0],
+      tag: labels[0],
+    }),
+    [currentColors, labels],
+  );
+
   const minuteStep = 15;
   const form = useForm<z.infer<typeof eventFormSchema>>({
     resolver: zodResolver(eventFormSchema),
@@ -80,27 +103,22 @@ export const AddEventButton = ({
               ...defaultEvent,
               repeat: defaultEvent.repeat ?? { type: null },
             }
-          : {
-              id: uuidv4(),
-              title: undefined,
-              details: undefined,
-              allDay: true,
-              start: startOfDay(new Date()),
-              end: endOfDay(new Date()),
-              repeat: {
-                type: null,
-              },
-              color: currentColors[0],
-              tag: labels[0],
-            },
-      [defaultEvent, currentColors, labels],
+          : generateEmptyEvent(),
+      [defaultEvent, generateEmptyEvent],
     ),
     mode: "onChange",
   });
 
   useEffect(() => {
     form.trigger();
-  }, [defaultEvent, form.trigger]);
+  }, [defaultEvent, form, open]);
+
+  // if form is opened, and defaultEvent is not provided, reset form to default values
+  useEffect(() => {
+    if (open && !defaultEvent) {
+      form.reset(generateEmptyEvent());
+    }
+  }, [defaultEvent, form, open, generateEmptyEvent]);
 
   const onSubmit = (data: z.infer<typeof eventFormSchema>) => {
     const eventDef: CalendarEvent = {
@@ -155,7 +173,7 @@ export const AddEventButton = ({
       form.trigger(["start", "end"]);
       setDelayed(false);
     }
-  }, [delayed, defaultEvent]);
+  }, [delayed, defaultEvent, form]);
 
   //if from normal to all day, set start and end to 00:00 and 23:59
   useEffect(() => {
@@ -166,7 +184,7 @@ export const AddEventButton = ({
     } else {
       setDelayed(true);
     }
-  }, [allDay]);
+  }, [allDay, form]);
 
   const renderNormalDatePicker = () => {
     return (
@@ -210,6 +228,15 @@ export const AddEventButton = ({
                             minutes: originalDate.getMinutes(),
                           });
                           field.onChange(newDate);
+                          // update end date as well
+                          const diff =
+                            form.getValues("end").getTime() -
+                            originalDate.getTime();
+                          form.setValue(
+                            "end",
+                            new Date(newDate.getTime() + diff),
+                          );
+                          form.trigger(["end"]);
                         }}
                         initialFocus
                       />
diff --git a/src/components/Calendar/calendar_hook.tsx b/src/components/Calendar/calendar_hook.tsx
index 64f94b2c..53e46cac 100644
--- a/src/components/Calendar/calendar_hook.tsx
+++ b/src/components/Calendar/calendar_hook.tsx
@@ -269,15 +269,10 @@ export const useCalendarProvider = () => {
           break;
         case UpdateType.ALL:
           //just update the event
-          const newEvent4 = {
-            ...newEvent,
-            start: oldEvent.start,
-            end: oldEvent.end,
-          };
           await eventsCol!.findOne(newEvent.id).update({
             $set: {
-              ...serializeEvent(newEvent4),
-              actualEnd: getActualEndDate(newEvent4),
+              ...serializeEvent(newEvent),
+              actualEnd: getActualEndDate(newEvent),
             },
           });
           break;