fix: Blank state wouldn't set 'schedule'; resulting toggle had no effect (#11335)

pull/11552/head
Alex van Andel 2023-09-27 10:26:55 +01:00 committed by GitHub
parent 8a413a97b4
commit ec4e2f5996
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 14 deletions

View File

@ -1,5 +1,5 @@
import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
import { useState, memo } from "react";
import { useState, memo, useEffect } from "react";
import { Controller, useFormContext } from "react-hook-form";
import type { OptionProps, SingleValueProps } from "react-select";
import { components } from "react-select";
@ -164,9 +164,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
t("locked_fields_admin_description"),
t("locked_fields_member_description")
);
const { watch } = useFormContext<FormValues>();
const { watch, setValue, getValues } = useFormContext<FormValues>();
const watchSchedule = watch("schedule");
const formMethods = useFormContext<FormValues>();
const [options, setOptions] = useState<AvailabilityOption[]>([]);
const { isLoading } = trpc.viewer.availability.list.useQuery(undefined, {
@ -214,7 +213,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
setOptions(options);
const scheduleId = formMethods.getValues("schedule");
const scheduleId = getValues("schedule");
const value = options.find((option) =>
scheduleId
? option.value === scheduleId
@ -223,11 +222,16 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
: option.value === schedules.find((schedule) => schedule.isDefault)?.id
);
formMethods.setValue("availability", value);
setValue("availability", value);
},
});
const availabilityValue = formMethods.watch("availability");
const availabilityValue = watch("availability");
useEffect(() => {
if (!availabilityValue?.value) return;
setValue("schedule", availabilityValue.value);
}, [availabilityValue, setValue]);
return (
<div className="space-y-4">
@ -248,7 +252,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
isSearchable={false}
onChange={(selected) => {
field.onChange(selected?.value || null);
if (selected?.value) formMethods.setValue("availability", selected);
if (selected?.value) setValue("availability", selected);
}}
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
value={availabilityValue}
@ -276,7 +280,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSetup }) => {
const { t } = useLocale();
const { resetField, setValue } = useFormContext<FormValues>();
const { setValue } = useFormContext<FormValues>();
return (
<Controller
name="metadata.config.useHostSchedulesForTeamEvent"
@ -285,9 +289,7 @@ const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSe
checked={!value}
onCheckedChange={(checked) => {
onChange(!checked);
if (checked) {
resetField("schedule");
} else {
if (!checked) {
setValue("schedule", null);
}
}}

View File

@ -52,7 +52,14 @@ const getEventType = async (id: number) => {
metadata: true,
schedule: {
select: {
availability: true,
availability: {
select: {
days: true,
date: true,
startTime: true,
endTime: true,
},
},
timeZone: true,
},
},

View File

@ -13,7 +13,14 @@ export const availabilityUserSelect = Prisma.validator<Prisma.UserSelect>()({
// Relationships
schedules: {
select: {
availability: true,
availability: {
select: {
date: true,
startTime: true,
endTime: true,
days: true,
},
},
timeZone: true,
id: true,
},

View File

@ -161,7 +161,14 @@ export async function getEventType(
metadata: true,
schedule: {
select: {
availability: true,
availability: {
select: {
date: true,
startTime: true,
endTime: true,
days: true,
},
},
timeZone: true,
},
},
@ -192,6 +199,7 @@ export async function getEventType(
},
},
});
if (!eventType) {
return null;
}