From fad65913dcd353a7531bc44b9f722b26caea1084 Mon Sep 17 00:00:00 2001 From: BK2004 Date: Sun, 8 Sep 2024 12:43:08 -0500 Subject: [PATCH 1/6] event picture select grayed out; select start and end time by date only --- .../[clubId]/create/CreateEventForm.tsx | 4 +- src/app/manage/[clubId]/create/TimeSelect.tsx | 55 +++---------------- 2 files changed, 12 insertions(+), 47 deletions(-) diff --git a/src/app/manage/[clubId]/create/CreateEventForm.tsx b/src/app/manage/[clubId]/create/CreateEventForm.tsx index 70168b22..28542274 100644 --- a/src/app/manage/[clubId]/create/CreateEventForm.tsx +++ b/src/app/manage/[clubId]/create/CreateEventForm.tsx @@ -24,6 +24,8 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub resolver: zodResolver(createEventSchema), defaultValues: { clubId: clubId, + startTime: new Date(Date.now()), + endTime: new Date(Date.now()), }, mode: "onSubmit", }); @@ -89,7 +91,7 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub

Event Picture

Drag or choose file to upload

-
+

JPEG, PNG, or SVG

diff --git a/src/app/manage/[clubId]/create/TimeSelect.tsx b/src/app/manage/[clubId]/create/TimeSelect.tsx index 05ea7d24..820a6770 100644 --- a/src/app/manage/[clubId]/create/TimeSelect.tsx +++ b/src/app/manage/[clubId]/create/TimeSelect.tsx @@ -16,69 +16,32 @@ interface Props { } const TimeSelect = ({ register, setValue, getValues, watchStartTime }: Props) => { - const [multiDay, setMultiDay] = useState(false); - const [numHours, setNumHours] = useState(2); - useEffect(() => { - // If not multi-day, set end time to start time + numHours - if (!multiDay && watchStartTime !== undefined) { - const date = new Date(watchStartTime); - date.setHours(date.getHours() + numHours); - setValue("endTime", date); - } - // If start time is after end time, set end time to start time - if (new Date(watchStartTime) > new Date(getValues('endTime'))) { + if ((new Date(watchStartTime) > new Date(getValues('endTime')))) { setValue('endTime', watchStartTime); } - }, [setValue, getValues, watchStartTime, multiDay, numHours]) + }, [setValue, getValues, watchStartTime]) return (<> -
-
-

Multi-Day Event

-

Does the event last longer than one day?

-
-
-
-
{ - // If switching to multiDay, clear endTime - if (!multiDay) { - setValue('endTime', new Date(NaN)); - } - setMultiDay(!multiDay); - }} >
-

{multiDay ? "Yes" : "No"}

-
-
-

Duration

- +
- { multiDay ?
- { if (new Date(e.currentTarget.value) < new Date(watchStartTime)) setValue('endTime', watchStartTime); }} - min={watchStartTime?.toString()} + min={watchStartTime?.toString()} className="outline-none w-full block p-2 text-xs rounded-md text-[#7D8FB3]" />
- : -
- - -
- }
); } From 57d094569769c56b0008b0f323f0ee8d12d4a209 Mon Sep 17 00:00:00 2001 From: BK2004 Date: Sun, 8 Sep 2024 12:52:00 -0500 Subject: [PATCH 2/6] end time defaults to start time when empty in TimeSelect --- src/app/manage/[clubId]/create/CreateEventForm.tsx | 2 -- src/app/manage/[clubId]/create/TimeSelect.tsx | 4 +++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/manage/[clubId]/create/CreateEventForm.tsx b/src/app/manage/[clubId]/create/CreateEventForm.tsx index 28542274..d2117976 100644 --- a/src/app/manage/[clubId]/create/CreateEventForm.tsx +++ b/src/app/manage/[clubId]/create/CreateEventForm.tsx @@ -24,8 +24,6 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub resolver: zodResolver(createEventSchema), defaultValues: { clubId: clubId, - startTime: new Date(Date.now()), - endTime: new Date(Date.now()), }, mode: "onSubmit", }); diff --git a/src/app/manage/[clubId]/create/TimeSelect.tsx b/src/app/manage/[clubId]/create/TimeSelect.tsx index 820a6770..af30988a 100644 --- a/src/app/manage/[clubId]/create/TimeSelect.tsx +++ b/src/app/manage/[clubId]/create/TimeSelect.tsx @@ -18,7 +18,9 @@ interface Props { const TimeSelect = ({ register, setValue, getValues, watchStartTime }: Props) => { useEffect(() => { // If start time is after end time, set end time to start time - if ((new Date(watchStartTime) > new Date(getValues('endTime')))) { + console.log(getValues("endTime")); + if ((new Date(watchStartTime) > new Date(getValues('endTime'))) + || (watchStartTime !== undefined && getValues('endTime').toString() === "")) { setValue('endTime', watchStartTime); } }, [setValue, getValues, watchStartTime]) From 5962921bd7c674c52c91e092fe0299161a51ea18 Mon Sep 17 00:00:00 2001 From: BK2004 Date: Sun, 8 Sep 2024 13:10:48 -0500 Subject: [PATCH 3/6] Create API route returns event id; successful event creation redirects to event page; added protection against create event spam while redirecting --- src/app/manage/[clubId]/create/CreateEventForm.tsx | 8 ++++++-- src/server/api/routers/event.ts | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/manage/[clubId]/create/CreateEventForm.tsx b/src/app/manage/[clubId]/create/CreateEventForm.tsx index d2117976..95da69d6 100644 --- a/src/app/manage/[clubId]/create/CreateEventForm.tsx +++ b/src/app/manage/[clubId]/create/CreateEventForm.tsx @@ -29,6 +29,7 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub }); const router = useRouter(); const [watchDescription, watchStartTime] = watch(['description', 'startTime']); + const [redirecting, setRedirecting] = useState(false); const [eventPreview, setEventPreview] = useState({ name: "", clubId, @@ -65,11 +66,14 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub }, [router, watch, officerClubs]); const createMutation = api.event.create.useMutation({ - onSuccess: () => { location.reload(); } + onSuccess: (data) => { if (data) { + setRedirecting(true); + router.push(`/event/${data}`); + } } }) const onSubmit = handleSubmit((data: z.infer) => { - if (!createMutation.isPending) { + if (!createMutation.isPending && !redirecting) { createMutation.mutate(data); } }); diff --git a/src/server/api/routers/event.ts b/src/server/api/routers/event.ts index e883f40e..454af6e4 100644 --- a/src/server/api/routers/event.ts +++ b/src/server/api/routers/event.ts @@ -262,7 +262,9 @@ export const eventRouter = createTRPCRouter({ throw new TRPCError({ code: 'UNAUTHORIZED' }); } - await ctx.db.insert(events).values({ ...input }); + const res = await ctx.db.insert(events).values({ ...input }).returning({ id: events.id }); + if (res.length == 0) throw "Failed to add event"; + return res[0]?.id; }), byName: publicProcedure.input(byNameSchema).query(async ({ input, ctx }) => { const { name, sortByDate } = input; From 518ef41b8079430b9d6b55c20d12024112dfc3e6 Mon Sep 17 00:00:00 2001 From: BK2004 Date: Sun, 8 Sep 2024 13:12:24 -0500 Subject: [PATCH 4/6] remove unused dependency --- src/app/manage/[clubId]/create/TimeSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/manage/[clubId]/create/TimeSelect.tsx b/src/app/manage/[clubId]/create/TimeSelect.tsx index af30988a..b446831a 100644 --- a/src/app/manage/[clubId]/create/TimeSelect.tsx +++ b/src/app/manage/[clubId]/create/TimeSelect.tsx @@ -1,5 +1,5 @@ 'use client' -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import type { UseFormRegister, UseFormSetValue, From d91f446a4d783c196d5207b0880fab8567f7cfe6 Mon Sep 17 00:00:00 2001 From: BK2004 Date: Thu, 19 Sep 2024 20:12:34 -0500 Subject: [PATCH 5/6] start time updates end time to start time + one hour if needed; grayed out create event button while processing --- .../[clubId]/create/CreateEventForm.tsx | 24 ++++--- src/app/manage/[clubId]/create/TimeSelect.tsx | 63 ++++++++++++------- 2 files changed, 57 insertions(+), 30 deletions(-) diff --git a/src/app/manage/[clubId]/create/CreateEventForm.tsx b/src/app/manage/[clubId]/create/CreateEventForm.tsx index 95da69d6..b257eedb 100644 --- a/src/app/manage/[clubId]/create/CreateEventForm.tsx +++ b/src/app/manage/[clubId]/create/CreateEventForm.tsx @@ -20,6 +20,7 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub watch, setValue, getValues, + control, } = useForm>({ resolver: zodResolver(createEventSchema), defaultValues: { @@ -29,7 +30,7 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub }); const router = useRouter(); const [watchDescription, watchStartTime] = watch(['description', 'startTime']); - const [redirecting, setRedirecting] = useState(false); + const [loading, setLoading] = useState(false); const [eventPreview, setEventPreview] = useState({ name: "", clubId, @@ -53,8 +54,8 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub location: location || "", liked: false, id: "", - startTime: startTime?.toString() === "" || startTime == undefined ? new Date(Date.now()) : new Date(startTime), - endTime: endTime?.toString() === "" || endTime?.toString() == "Invalid Date" || !endTime ? new Date(Date.now()) : new Date(endTime), + startTime: startTime?.toString() === "" || startTime === undefined ? new Date(Date.now()) : new Date(startTime), + endTime: endTime?.toString() === "" || endTime?.toString() === "Invalid Date" || !endTime ? new Date(Date.now()) : new Date(endTime), club, }); } @@ -67,13 +68,16 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub const createMutation = api.event.create.useMutation({ onSuccess: (data) => { if (data) { - setRedirecting(true); router.push(`/event/${data}`); - } } + } }, + onError: (e) => { + setLoading(false); + } }) const onSubmit = handleSubmit((data: z.infer) => { - if (!createMutation.isPending && !redirecting) { + if (!createMutation.isPending && !loading) { + setLoading(true); createMutation.mutate(data); } }); @@ -122,8 +126,12 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub placeholder="Event description" />
- - + +

Preview

diff --git a/src/app/manage/[clubId]/create/TimeSelect.tsx b/src/app/manage/[clubId]/create/TimeSelect.tsx index b446831a..9674b2aa 100644 --- a/src/app/manage/[clubId]/create/TimeSelect.tsx +++ b/src/app/manage/[clubId]/create/TimeSelect.tsx @@ -1,48 +1,67 @@ 'use client' -import { useEffect } from "react"; import type { UseFormRegister, UseFormSetValue, UseFormGetValues, + Control +} from "react-hook-form"; +import { + Controller } from "react-hook-form"; import type { createEventSchema } from "@src/utils/formSchemas"; import type { z } from "zod"; interface Props { - register: UseFormRegister>, setValue: UseFormSetValue>, getValues: UseFormGetValues>, watchStartTime: Date, + control: Control>, } -const TimeSelect = ({ register, setValue, getValues, watchStartTime }: Props) => { - useEffect(() => { - // If start time is after end time, set end time to start time - console.log(getValues("endTime")); - if ((new Date(watchStartTime) > new Date(getValues('endTime'))) - || (watchStartTime !== undefined && getValues('endTime').toString() === "")) { - setValue('endTime', watchStartTime); - } - }, [setValue, getValues, watchStartTime]) - +const TimeSelect = ({ setValue, getValues, watchStartTime, control }: Props) => { return (<>

Duration

- + ( + { + if (!getValues("endTime") || new Date(e.currentTarget.value) > getValues("endTime")) { + // Add 1 hr to new start time + setValue("endTime", new Date(new Date(e.currentTarget.value).getTime() + 60 * 60 * 1000)); + } + onChange(new Date(e.currentTarget.value)); + }} + className="outline-none w-full block p-2 text-xs rounded-md text-[#7D8FB3]" /> + )} + rules={{ + required: true, + }} />
- { if (new Date(e.currentTarget.value) < new Date(watchStartTime)) setValue('endTime', watchStartTime); }} - min={watchStartTime?.toString()} - className="outline-none w-full block p-2 text-xs rounded-md text-[#7D8FB3]" - /> + ( + onChange(new Date(e.currentTarget.value))} + className="outline-none w-full block p-2 text-xs rounded-md text-[#7D8FB3]" /> + )} + rules={{ + required: true, + }} />
); From 8c41e9a3085bb13e63761f5dc7acde1c62dd8d9c Mon Sep 17 00:00:00 2001 From: BK2004 Date: Thu, 19 Sep 2024 20:14:38 -0500 Subject: [PATCH 6/6] fixed build errors --- src/app/manage/[clubId]/create/CreateEventForm.tsx | 2 +- src/app/manage/[clubId]/create/TimeSelect.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/manage/[clubId]/create/CreateEventForm.tsx b/src/app/manage/[clubId]/create/CreateEventForm.tsx index b257eedb..fb3fbf0e 100644 --- a/src/app/manage/[clubId]/create/CreateEventForm.tsx +++ b/src/app/manage/[clubId]/create/CreateEventForm.tsx @@ -70,7 +70,7 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub onSuccess: (data) => { if (data) { router.push(`/event/${data}`); } }, - onError: (e) => { + onError: () => { setLoading(false); } }) diff --git a/src/app/manage/[clubId]/create/TimeSelect.tsx b/src/app/manage/[clubId]/create/TimeSelect.tsx index 9674b2aa..4e9f942a 100644 --- a/src/app/manage/[clubId]/create/TimeSelect.tsx +++ b/src/app/manage/[clubId]/create/TimeSelect.tsx @@ -1,6 +1,5 @@ 'use client' import type { - UseFormRegister, UseFormSetValue, UseFormGetValues, Control