diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index 7543c2ba1f..01c54b43fe 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -1,10 +1,9 @@ -// Get router variables -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { EventType } from "@prisma/client"; import * as Popover from "@radix-ui/react-popover"; import { TFunction } from "next-i18next"; import { useRouter } from "next/router"; -import { useReducer, useEffect, useMemo, useState, useRef } from "react"; +import { useReducer, useEffect, useMemo, useState } from "react"; import { Toaster } from "react-hot-toast"; import { FormattedNumber, IntlProvider } from "react-intl"; import { z } from "zod"; @@ -48,6 +47,8 @@ import type { AvailabilityPageProps } from "../../../pages/[user]/[type]"; import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]"; import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]"; +// Get router variables + const GoBackToPreviousPage = ({ t }: { t: TFunction }) => { const router = useRouter(); const path = router.asPath.split("/"); @@ -129,11 +130,8 @@ const SlotPicker = ({ const { date, setQuery: setDate } = useRouterQuery("date"); const { month, setQuery: setMonth } = useRouterQuery("month"); const router = useRouter(); - const slotPickerRef = useRef(null); - useEffect(() => { - slotPickerRef.current && autoAnimate(slotPickerRef.current); - }, [slotPickerRef]); + const [slotPickerRef] = useAutoAnimate(); useEffect(() => { if (!router.isReady) return; diff --git a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx index 09f515d94a..578a9eac65 100644 --- a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx +++ b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx @@ -1,8 +1,8 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { EventTypeCustomInput } from "@prisma/client/"; import Link from "next/link"; import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import { Controller, useFormContext } from "react-hook-form"; import short from "short-uuid"; import { v5 as uuidv5 } from "uuid"; @@ -51,12 +51,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); + const [animationRef] = useAutoAnimate(); const removeCustom = (index: number) => { formMethods.getValues("customInputs").splice(index, 1); diff --git a/apps/web/components/v2/eventtype/EventLimitsTab.tsx b/apps/web/components/v2/eventtype/EventLimitsTab.tsx index 670d8d71cb..f2fa69bf3f 100644 --- a/apps/web/components/v2/eventtype/EventLimitsTab.tsx +++ b/apps/web/components/v2/eventtype/EventLimitsTab.tsx @@ -1,7 +1,7 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import * as RadioGroup from "@radix-ui/react-radio-group"; import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]"; -import { useEffect, useRef, useState } from "react"; +import { useState } from "react"; import { useFormContext, Controller, useWatch } from "react-hook-form"; import { classNames } from "@calcom/lib"; @@ -311,12 +311,9 @@ type BookingLimitsKey = keyof BookingLimit; const BookingLimits = () => { const { watch, setValue, control } = useFormContext(); const watchBookingLimits = watch("bookingLimits"); - const animateRef = useRef(null); const { t } = useLocale(); - useEffect(() => { - animateRef.current && autoAnimate(animateRef.current); - }, [animateRef]); + const [animateRef] = useAutoAnimate(); const BOOKING_LIMIT_OPTIONS: { value: keyof BookingLimit; diff --git a/apps/web/components/v2/eventtype/EventSetupTab.tsx b/apps/web/components/v2/eventtype/EventSetupTab.tsx index 9daf9fd58a..c97f1eda88 100644 --- a/apps/web/components/v2/eventtype/EventSetupTab.tsx +++ b/apps/web/components/v2/eventtype/EventSetupTab.tsx @@ -1,8 +1,8 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { zodResolver } from "@hookform/resolvers/zod"; import { isValidPhoneNumber } from "libphonenumber-js"; import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]"; -import { useEffect, useRef, useState } from "react"; +import { useState } from "react"; import { Controller, useForm, useFormContext } from "react-hook-form"; import { z } from "zod"; @@ -85,11 +85,8 @@ export const EventSetupTab = ( const Locations = () => { const { t } = useLocale(); - const animationRef = useRef(null); - useEffect(() => { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); + const [animationRef] = useAutoAnimate(); const validLocations = formMethods.getValues("locations").filter((location) => { const eventLocation = getEventLocationType(location.type); diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx index dad8dca0ff..f7595ab4ff 100644 --- a/apps/web/pages/availability/index.tsx +++ b/apps/web/pages/availability/index.tsx @@ -1,5 +1,4 @@ -import autoAnimate from "@formkit/auto-animate"; -import { useRef, useEffect } from "react"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -16,7 +15,6 @@ import SkeletonLoader from "@components/v2/availability/SkeletonLoader"; export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) { const { t } = useLocale(); const utils = trpc.useContext(); - const animationParentRef = useRef(null); const meQuery = trpc.useQuery(["viewer.me"]); @@ -50,9 +48,8 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab }); // Adds smooth delete button - item fades and old item slides into place - useEffect(() => { - animationParentRef.current && autoAnimate(animationParentRef.current); - }, [animationParentRef]); + + const [animationParentRef] = useAutoAnimate(); return ( <> diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx index 7479891a08..d618059202 100644 --- a/apps/web/pages/bookings/[status].tsx +++ b/apps/web/pages/bookings/[status].tsx @@ -1,7 +1,7 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { GetStaticPaths, GetStaticProps } from "next"; import { useRouter } from "next/router"; -import { Fragment, useEffect, useRef } from "react"; +import { Fragment } from "react"; import { z } from "zod"; import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components"; @@ -46,7 +46,7 @@ export default function Bookings() { }); // Animate page (tab) tranistions to look smoothing - const animationParentRef = useRef(null); + const buttonInView = useInViewObserver(() => { if (!query.isFetching && query.hasNextPage && query.status === "success") { query.fetchNextPage(); @@ -73,9 +73,7 @@ export default function Bookings() { return true; }; - useEffect(() => { - animationParentRef.current && autoAnimate(animationParentRef.current); - }, [animationParentRef]); + const [animationParentRef] = useAutoAnimate(); return ( diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx index c8eadd7481..5447ff6fe0 100644 --- a/apps/web/pages/event-types/[type]/index.tsx +++ b/apps/web/pages/event-types/[type]/index.tsx @@ -1,9 +1,9 @@ /* eslint-disable @typescript-eslint/no-empty-function */ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client"; import { GetServerSidePropsContext } from "next"; import { useRouter } from "next/router"; -import { useEffect, useRef, useState } from "react"; +import { useState } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -106,13 +106,11 @@ const EventTypePage = (props: inferSSRProps) => { // TODO: It isn't a good idea to maintain state using setEventType. If we want to connect the SSR'd data to tRPC, we should useQuery(["viewer.eventTypes.get"]) with initialData // Due to this change, when Form is saved, there is no way to propagate that info to eventType (e.g. disabling stripe app doesn't allow recurring tab to be enabled without refresh). const [eventType, setEventType] = useState(dbEventType); - const animationParentRef = useRef(null); + const router = useRouter(); const { tabName } = querySchema.parse(router.query); - useEffect(() => { - animationParentRef.current && autoAnimate(animationParentRef.current); - }, [animationParentRef]); + const [animationParentRef] = useAutoAnimate(); const updateMutation = trpc.useMutation("viewer.eventTypes.update", { onSuccess: async ({ eventType: newEventType }) => { diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx index c458727290..c1a1f1753a 100644 --- a/packages/app-store/_components/AppCard.tsx +++ b/packages/app-store/_components/AppCard.tsx @@ -1,6 +1,5 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import Link from "next/link"; -import { useEffect, useRef } from "react"; import { inferQueryOutput } from "@calcom/trpc/react"; import { Switch } from "@calcom/ui/v2"; @@ -24,11 +23,7 @@ export default function AppCard({ children?: React.ReactNode; setAppData: SetAppDataGeneric; }) { - const animationRef = useRef(null); - - useEffect(() => { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); + const [animationRef] = useAutoAnimate(); return (
diff --git a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx index fc9088383a..29842e6dd8 100644 --- a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx +++ b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx @@ -1,6 +1,6 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { App_RoutingForms_Form } from "@prisma/client"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import { Controller, useFieldArray } from "react-hook-form"; import { UseFormReturn } from "react-hook-form"; import { v4 as uuidv4 } from "uuid"; @@ -197,11 +197,7 @@ const FormEdit = ({ name: fieldsNamespace, }); - const animationRef = useRef(null); - - useEffect(() => { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); + const [animationRef] = useAutoAnimate(); const addField = () => { appendHookFormField({ diff --git a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx index 426558aeea..e3c3bc0ef6 100644 --- a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx +++ b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx @@ -1,6 +1,6 @@ -import autoAnimate from "@formkit/auto-animate"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { App_RoutingForms_Form } from "@prisma/client"; -import React, { useState, useCallback, useRef, useEffect } from "react"; +import React, { useState, useCallback } from "react"; import { Query, Config, Builder, Utils as QbUtils } from "react-awesome-query-builder"; // types import { JsonTree, ImmutableTree, BuilderProps } from "react-awesome-query-builder"; @@ -326,11 +326,8 @@ const Routes = ({ return transformRoutes().map((route) => deserializeRoute(route, config)); }); - const animationRef = useRef(null); - useEffect(() => { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); + const [animationRef] = useAutoAnimate(); const mainRoutes = routes.filter((route) => !route.isFallback); let fallbackRoute = routes.find((route) => route.isFallback); diff --git a/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx b/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx index c84cf42b95..bef93839a3 100644 --- a/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx +++ b/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx @@ -1,5 +1,4 @@ -import autoAnimate from "@formkit/auto-animate"; -import React, { useEffect, useRef } from "react"; +import { useAutoAnimate } from "@formkit/auto-animate/react"; import { Props } from "react-select"; import { classNames } from "@calcom/lib"; @@ -24,11 +23,8 @@ export const CheckedTeamSelect = ({ onChange: (value: readonly CheckedSelectOption[]) => void; }) => { const { t } = useLocale(); - const animationRef = useRef(null); - useEffect(() => { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); + const [animationRef] = useAutoAnimate(); return ( <> diff --git a/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx b/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx index 287fba40b7..de3d66e4e7 100644 --- a/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx +++ b/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx @@ -1,5 +1,3 @@ -import autoAnimate from "@formkit/auto-animate"; -import React, { useEffect, useRef } from "react"; import { components, GroupBase, Props, ValueContainerProps } from "react-select"; import { Icon } from "@calcom/ui/Icon"; @@ -37,11 +35,6 @@ const LimitedChipsContainer = { // const { t } = useLocale(); - const animationRef = useRef(null); - - useEffect(() => { - animationRef.current && autoAnimate(animationRef.current); - }, [animationRef]); return (