code separation and fix typings

packages/atoms/availabilitylist/AvailabilityList.tsx

@@ -6,7 +6,7 @@ import { Clock } from "@calcom/ui/components/icon";
 import { EmptyScreen } from "./EmptyScreen";
 import { Availability } from "./ScheduleListItem";
 
-type Schedule = {
+export type Schedule = {
   isDefault: boolean;
   id: number;
   name: string;
@@ -14,13 +14,13 @@ type Schedule = {
     id: number;
     startTime: Date;
     endTime: Date;
-    userId: number | null;
-    eventTypeId: number | null;
-    date: Date | null;
+    userId?: number;
+    eventTypeId?: number;
+    date?: Date;
     days: number[];
-    scheduleId: number | null;
+    scheduleId?: number;
   }[];
-  timezone: string | null;
+  timezone?: string;
 };
 
 export function AvailabilityList({
@@ -39,9 +39,8 @@ export function AvailabilityList({
   duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void;
   deleteMutation: ({ scheduleId }: { scheduleId: number }) => void;
 }) {
+  if (schedules.length === 0) {
     return (
-    <>
-      {schedules.length === 0 ? (
       <div className="flex justify-center">
         <EmptyScreen
           Icon={Clock}
@@ -51,7 +50,10 @@ export function AvailabilityList({
           buttonRaw={<NewScheduleButton createMutation={onCreateMutation} />}
         />
       </div>
-      ) : (
+    );
+  }
+
+  return (
     <div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
       <ul className="divide-subtle divide-y" data-testid="schedules">
         {schedules.map((schedule) => (
@@ -66,7 +68,5 @@ export function AvailabilityList({
         ))}
       </ul>
     </div>
-      )}
-    </>
   );
 }