From 58dd5308ac2fe778547fdc67b4423f653f23e5d2 Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Wed, 28 Sep 2022 19:05:28 +0100 Subject: [PATCH] Improved load state (#4696) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Improved load state * Don't use editable heading if it is readonly * Fix ts errors Co-authored-by: Peer Richelsen Co-authored-by: Omar López Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- apps/web/components/ui/EditableHeading.tsx | 62 +++++++++---------- .../v2/availability/SkeletonLoader.tsx | 9 ++- .../v2/eventtype/AvailabilityTab.tsx | 4 +- apps/web/pages/availability/[schedule].tsx | 2 + apps/web/pages/event-types/[type].tsx | 6 ++ apps/web/pages/v2/availability/[schedule].tsx | 40 ++++++++---- 6 files changed, 74 insertions(+), 49 deletions(-) diff --git a/apps/web/components/ui/EditableHeading.tsx b/apps/web/components/ui/EditableHeading.tsx index b357b1920f..f55dd6f4e5 100644 --- a/apps/web/components/ui/EditableHeading.tsx +++ b/apps/web/components/ui/EditableHeading.tsx @@ -1,50 +1,48 @@ -import { useState } from "react"; +import classNames from "classnames"; +import React, { useState } from "react"; +import { ControllerRenderProps } from "react-hook-form"; import { Icon } from "@calcom/ui/Icon"; -const EditableHeading = ({ - title, +const EditableHeading = function EditableHeading({ + value, onChange, - placeholder = "", - readOnly = false, + isReady, + ...passThroughProps }: { - title: string; - onChange?: (value: string) => void; - placeholder?: string; - readOnly?: boolean; -}) => { + isReady?: boolean; +} & Omit & + ControllerRenderProps) { const [isEditing, setIsEditing] = useState(false); - const enableEditing = () => !readOnly && setIsEditing(true); + const enableEditing = () => setIsEditing(true); return (
- {!isEditing ? ( - <> -

- {title} -

- {!readOnly ? ( - - ) : null} - - ) : ( -
+
+
- )} + +
); }; diff --git a/apps/web/components/v2/availability/SkeletonLoader.tsx b/apps/web/components/v2/availability/SkeletonLoader.tsx index 56222412f6..7b984652df 100644 --- a/apps/web/components/v2/availability/SkeletonLoader.tsx +++ b/apps/web/components/v2/availability/SkeletonLoader.tsx @@ -1,3 +1,4 @@ +import classNames from "classnames"; import React from "react"; import { SkeletonText } from "@calcom/ui/v2"; @@ -32,9 +33,13 @@ function SkeletonItem() { ); } -export const AvailabilitySelectSkeletonLoader = () => { +export const SelectSkeletonLoader = ({ className }: { className?: string }) => { return ( -
  • +
  • diff --git a/apps/web/components/v2/eventtype/AvailabilityTab.tsx b/apps/web/components/v2/eventtype/AvailabilityTab.tsx index 338610b009..5ae9e0cbf3 100644 --- a/apps/web/components/v2/eventtype/AvailabilityTab.tsx +++ b/apps/web/components/v2/eventtype/AvailabilityTab.tsx @@ -11,7 +11,7 @@ import Button from "@calcom/ui/v2/core/Button"; import Select from "@calcom/ui/v2/core/form/Select"; import { SkeletonText } from "@calcom/ui/v2/core/skeleton"; -import { AvailabilitySelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader"; +import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader"; type AvailabilityOption = { label: string; @@ -30,7 +30,7 @@ const AvailabilitySelect = ({ }) => { const { data, isLoading } = trpc.useQuery(["viewer.availability.list"]); if (isLoading) { - return ; + return ; } const schedules = data?.schedules || []; diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx index 548072c2f7..bee568f5c8 100644 --- a/apps/web/pages/availability/[schedule].tsx +++ b/apps/web/pages/availability/[schedule].tsx @@ -2,6 +2,8 @@ * @deprecated modifications to this file should be v2 only * Use `/apps/web/pages/v2/availability/[schedule].tsx` instead */ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck import { GetStaticPaths, GetStaticProps } from "next"; import { useRouter } from "next/router"; import { useState } from "react"; diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx index 716940aee9..ce559a52a5 100644 --- a/apps/web/pages/event-types/[type].tsx +++ b/apps/web/pages/event-types/[type].tsx @@ -1,3 +1,9 @@ +/** + * @deprecated modifications to this file should be v2 only + * Use `apps/web/pages/v2/event-types/[type].tsx` instead + */ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck import { zodResolver } from "@hookform/resolvers/zod"; import { EventTypeCustomInput, MembershipRole, PeriodType, Prisma, SchedulingType } from "@prisma/client"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; diff --git a/apps/web/pages/v2/availability/[schedule].tsx b/apps/web/pages/v2/availability/[schedule].tsx index fe9dd188f3..d434bd82d5 100644 --- a/apps/web/pages/v2/availability/[schedule].tsx +++ b/apps/web/pages/v2/availability/[schedule].tsx @@ -19,11 +19,12 @@ import Switch from "@calcom/ui/v2/core/Switch"; import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider"; import { Form, Label } from "@calcom/ui/v2/core/form/fields"; import showToast from "@calcom/ui/v2/core/notifications"; -import { SkeletonText } from "@calcom/ui/v2/core/skeleton"; +import { Skeleton, SkeletonText } from "@calcom/ui/v2/core/skeleton"; import { HttpError } from "@lib/core/http/error"; import EditableHeading from "@components/ui/EditableHeading"; +import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader"; const querySchema = z.object({ schedule: stringOrNumber, @@ -45,7 +46,7 @@ export default function Availability({ schedule }: { schedule: number }) { const { data, isLoading } = trpc.useQuery(["viewer.availability.schedule", { scheduleId: schedule }]); const form = useForm(); - const { control, reset, setValue } = form; + const { control, reset } = form; useEffect(() => { if (!isLoading && data) { @@ -83,20 +84,33 @@ export default function Availability({ schedule }: { schedule: number }) { backPath="/availability" title={t("availability_title", { availabilityTitle: data?.schedule.name })} heading={ - setValue("name", name)} /> + } + /> + } + subtitle={ + data ? ( + data.schedule.availability.map((availability) => ( + + {availabilityAsString(availability, { locale: i18n.language })} +
    +     + )) + ) : ( + + ) } - subtitle={data?.schedule.availability.map((availability) => ( - - {availabilityAsString(availability, { locale: i18n.language })} -
    -     - ))} CTA={
    - + onChange(timezone.value)} /> ) : ( - + ) } />