fix/calendar-bug-1 (#547)

nthumodifications · Sep 28, 2024 · 0df213a · 0df213a
2 parents ab34f82 + 1a83f62
commit 0df213a
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 81 deletions.
diff --git a/src/components/Calendar/AddEventButton.tsx b/src/components/Calendar/AddEventButton.tsx
@@ -216,9 +216,14 @@ export const AddEventButton = ({
                     </PopoverContent>
                   </PopoverPortal>
                 </Popover>
-                <TimeSelect
-                  minuteStep={minuteStep}
-                  onDateChange={(d) => {
+                <Input
+                  type="time"
+                  onChange={(e) => {
+                    const timesplits = e.target.value.split(":");
+                    const d = set(field.value, {
+                      hours: parseInt(timesplits[0]),
+                      minutes: parseInt(timesplits[1]),
+                    });
                     const diff =
                       form.getValues("end").getTime() -
                       form.getValues("start").getTime();
@@ -231,7 +236,7 @@ export const AddEventButton = ({
                       form.trigger(["end"]);
                     }
                   }}
-                  date={field.value}
+                  value={format(field.value, "HH:mm")}
                 />
               </FormItem>
             )}
@@ -241,10 +246,10 @@ export const AddEventButton = ({
             name="end"
             render={({ field }) => (
               <FormItem>
-                <TimeSelect
-                  minuteStep={minuteStep}
-                  onDateChange={field.onChange}
-                  date={field.value}
+                <Input
+                  type="time"
+                  onChange={field.onChange}
+                  value={format(field.value, "HH:mm")}
                 />
                 <FormMessage />
               </FormItem>

diff --git a/src/components/Calendar/EventPopover.tsx b/src/components/Calendar/EventPopover.tsx
@@ -34,9 +34,7 @@ const ConfirmDeleteEvent: FC<{ event: DisplayCalendarEvent }> = ({ event }) => {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>確認刪除</DialogTitle>
-          <DialogDescription>
-            <p>確定要刪除這個事件嗎？</p>
-          </DialogDescription>
+          <DialogDescription>確定要刪除這個事件嗎?</DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <DialogClose asChild>
@@ -67,7 +65,7 @@ const UpdateRepeatedEventDialog: FC<{
         <DialogHeader>
           <DialogTitle>更新重複事件</DialogTitle>
           <DialogDescription>
-            <p>您要更新所有重複事件還是只更新這個事件？</p>
+            您要更新所有重複事件還是只更新這個事件？
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
@@ -103,7 +101,7 @@ const DeleteRepeatedEventDialog: FC<{
         <DialogHeader>
           <DialogTitle>刪除重複事件</DialogTitle>
           <DialogDescription>
-            <p>您要刪除所有重複事件還是只刪除這個事件？</p>
+            您要刪除所有重複事件還是只刪除這個事件
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>

diff --git a/src/components/Calendar/UpcomingEvents.tsx b/src/components/Calendar/UpcomingEvents.tsx
@@ -59,7 +59,7 @@ const UpcomingEvents = () => {
         brightness > 186 ? 0.2 : 0.95,
       );
       return (
-        <EventPopover event={event} key={event.id}>
+        <EventPopover event={event} key={event.id + index}>
           <div
             className="self-stretch px-2 pt-2 pb-6 rounded-md flex-col justify-start items-start gap-2 flex"
             style={{ background: event.color, color: textColor }}

diff --git a/src/components/Calendar/calendar_hook.tsx b/src/components/Calendar/calendar_hook.tsx
@@ -18,7 +18,10 @@ import useUserTimetable from "@/hooks/contexts/useUserTimetable";
 import { useRxCollection, useRxDB, useRxQuery } from "rxdb-hooks";
 import { getDiffFunction, getActualEndDate } from "./calendar_utils";
 import { subDays } from "date-fns";
-import { serializeEvent } from "@/components/Calendar/calendar_utils";
+import {
+  serializeEvent,
+  getDisplayEndDate,
+} from "@/components/Calendar/calendar_utils";
 import { EventDocType } from "@/config/rxdb";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth, firebaseConfig, db as firebaseDb } from "@/config/firebase";
@@ -137,23 +140,23 @@ export const useCalendarProvider = () => {
         case UpdateType.THIS:
           // add this date to excluded dates
           await eventsCol!.findOne(event.id).update({
-            $set: {
-              actualEnd: getActualEndDate(event),
+            $set: serializeEvent({
+              actualEnd: getDisplayEndDate(event),
               excludedDates: [
                 ...(event.excludedDates || []),
                 event.displayStart,
               ],
-            },
+            }),
           });
           break;
         case UpdateType.FOLLOWING:
           //set the repeat end date to the new event start date
-          const newEvent = {
-            ...event,
+          const { displayStart, displayEnd, ...originalEvent } = event;
+          const newEvent: CalendarEvent = {
+            ...originalEvent,
             repeat: {
               ...event.repeat!,
-              count: undefined,
-              date: subDays(event.displayStart, 1),
+              value: subDays(displayStart, 1).getTime(),
             },
           };
           await eventsCol!.findOne(event.id).update({

diff --git a/src/components/Calendar/eventFormSchema.tsx b/src/components/Calendar/eventFormSchema.tsx
@@ -15,14 +15,27 @@ const schemaDetails = z.object({
   details: z.string().optional(),
   location: z.string().optional(),
   allDay: z.boolean(),
-  repeat: z.union([
+  repeat: z.discriminatedUnion("type", [
     z.object({
-      type: z.union([
-        z.literal("daily"),
-        z.literal("weekly"),
-        z.literal("monthly"),
-        z.literal("yearly"),
-      ]),
+      type: z.literal("daily"),
+      interval: z.number(),
+      mode: z.union([z.literal("count"), z.literal("date")]),
+      value: z.number(),
+    }),
+    z.object({
+      type: z.literal("weekly"),
+      interval: z.number(),
+      mode: z.union([z.literal("count"), z.literal("date")]),
+      value: z.number(),
+    }),
+    z.object({
+      type: z.literal("monthly"),
+      interval: z.number(),
+      mode: z.union([z.literal("count"), z.literal("date")]),
+      value: z.number(),
+    }),
+    z.object({
+      type: z.literal("yearly"),
       interval: z.number(),
       mode: z.union([z.literal("count"), z.literal("date")]),
       value: z.number(),

diff --git a/src/components/ui/custom_timeselect.tsx b/src/components/ui/custom_timeselect.tsx
@@ -7,6 +7,7 @@ import { Command, CommandGroup, CommandItem } from "@/components/ui/command";
 import { set } from "date-fns";
 import { Popover, PopoverContent } from "./popover";
 import { PopoverAnchor, PopoverPortal } from "@radix-ui/react-popover";
+import { Input } from "./input";
 
 export const getNearestTime = (date: Date, minuteStep: number) => {
   const minutes = date.getMinutes();
@@ -136,60 +137,53 @@ export function TimeSelect({
       className={clsx(label && "gap-1.5", parentClassName, "grid items-center")}
     >
       <Popover open={open} modal={true}>
-        <Command className="overflow-visible bg-transparent w-28">
-          <div className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
-            <div className="gap-1 flex-wrap">
-              {/* Avoid having the "Search" Icon */}
-              <CommandPrimitive.Input
-                ref={inputRef}
-                value={inputValue}
-                onValueChange={setInputValue}
-                onKeyDown={handleKeyDown}
-                onBlur={handleInputBlur}
-                onFocus={() => setOpen(true)}
-                placeholder={placeholder}
-                className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1 overflow-hidden w-full"
-              />
-            </div>
+        <div className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
+          <div className="gap-1 flex-wrap">
+            <Input
+              ref={inputRef}
+              value={inputValue}
+              onChange={(v) => setInputValue(v.target.value)}
+              onKeyDown={handleKeyDown}
+              onBlur={handleInputBlur}
+              onFocus={() => setOpen(true)}
+              placeholder={placeholder}
+              className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1 overflow-hidden w-full"
+            />
           </div>
-          <PopoverAnchor />
-          <CommandList>
-            <PopoverPortal>
-              <PopoverContent
-                onOpenAutoFocus={(e) => e.preventDefault()}
-                className="p-0 w-28 h-0 border-none"
-              >
-                <div className="relative mt-2">
-                  {open && selectables.length > 0 ? (
-                    <div className="absolute w-full top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in z-40">
-                      <CommandGroup className="h-full overflow-auto">
-                        {selectables.map((framework) => {
-                          return (
-                            <CommandItem
-                              autoFocus={false}
-                              key={framework.label}
-                              onMouseDown={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                              }}
-                              onSelect={(value) => {
-                                setInputValue(framework.label);
-                                setSelected(framework.value);
-                                setOpen(false);
-                              }}
-                            >
-                              {framework.label}
-                            </CommandItem>
-                          );
-                        })}
-                      </CommandGroup>
-                    </div>
-                  ) : null}
+        </div>
+        <PopoverAnchor />
+        <PopoverPortal>
+          <PopoverContent
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            className="p-0 w-28 h-0 border-none"
+          >
+            <div className="relative mt-2">
+              {open && selectables.length > 0 ? (
+                <div className="absolute w-full top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in z-40">
+                  {selectables.map((framework) => {
+                    return (
+                      <div
+                        autoFocus={false}
+                        key={framework.label}
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }}
+                        onSelect={(value) => {
+                          setInputValue(framework.label);
+                          setSelected(framework.value);
+                          setOpen(false);
+                        }}
+                      >
+                        {framework.label}
+                      </div>
+                    );
+                  })}
                 </div>
-              </PopoverContent>
-            </PopoverPortal>
-          </CommandList>
-        </Command>
+              ) : null}
+            </div>
+          </PopoverContent>
+        </PopoverPortal>
       </Popover>
     </div>
   );