code separation and fix typings

availability-list
Ryukemeister 2023-10-27 22:49:01 +05:30
parent 2e8398a255
commit 0d4f36c00f
1 changed files with 33 additions and 33 deletions

View File

@ -6,7 +6,7 @@ import { Clock } from "@calcom/ui/components/icon";
import { EmptyScreen } from "./EmptyScreen"; import { EmptyScreen } from "./EmptyScreen";
import { Availability } from "./ScheduleListItem"; import { Availability } from "./ScheduleListItem";
type Schedule = { export type Schedule = {
isDefault: boolean; isDefault: boolean;
id: number; id: number;
name: string; name: string;
@ -14,13 +14,13 @@ type Schedule = {
id: number; id: number;
startTime: Date; startTime: Date;
endTime: Date; endTime: Date;
userId: number | null; userId?: number;
eventTypeId: number | null; eventTypeId?: number;
date: Date | null; date?: Date;
days: number[]; days: number[];
scheduleId: number | null; scheduleId?: number;
}[]; }[];
timezone: string | null; timezone?: string;
}; };
export function AvailabilityList({ export function AvailabilityList({
@ -39,34 +39,34 @@ export function AvailabilityList({
duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void; duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void;
deleteMutation: ({ scheduleId }: { scheduleId: number }) => void; deleteMutation: ({ scheduleId }: { scheduleId: number }) => void;
}) { }) {
if (schedules.length === 0) {
return (
<div className="flex justify-center">
<EmptyScreen
Icon={Clock}
headline="Create an availability schedule"
subtitle="Creating availability schedules allows you to manage availability across event types. They can be applied to one or more event types."
className="w-full"
buttonRaw={<NewScheduleButton createMutation={onCreateMutation} />}
/>
</div>
);
}
return ( return (
<> <div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
{schedules.length === 0 ? ( <ul className="divide-subtle divide-y" data-testid="schedules">
<div className="flex justify-center"> {schedules.map((schedule) => (
<EmptyScreen <Availability
Icon={Clock} key={schedule.id}
headline="Create an availability schedule" schedule={schedule}
subtitle="Creating availability schedules allows you to manage availability across event types. They can be applied to one or more event types." isDeletable={schedules.length !== 1}
className="w-full" updateDefault={updateMutation}
buttonRaw={<NewScheduleButton createMutation={onCreateMutation} />} deleteFunction={deleteMutation}
duplicateFunction={duplicateMutation}
/> />
</div> ))}
) : ( </ul>
<div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border"> </div>
<ul className="divide-subtle divide-y" data-testid="schedules">
{schedules.map((schedule) => (
<Availability
key={schedule.id}
schedule={schedule}
isDeletable={schedules.length !== 1}
updateDefault={updateMutation}
deleteFunction={deleteMutation}
duplicateFunction={duplicateMutation}
/>
))}
</ul>
</div>
)}
</>
); );
} }