diff --git a/apps/web/ui/analytics/clicks.tsx b/apps/web/ui/analytics/clicks.tsx index 82d2360c86..0152de00b1 100644 --- a/apps/web/ui/analytics/clicks.tsx +++ b/apps/web/ui/analytics/clicks.tsx @@ -6,12 +6,12 @@ import { COUNTRIES, capitalize, linkConstructor, truncate } from "@dub/utils"; import { X } from "lucide-react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; -import { useContext } from "react"; +import { use } from "react"; import { AnalyticsContext } from "."; import ClicksChart from "./clicks-chart"; export default function Clicks() { - const { totalClicks } = useContext(AnalyticsContext); + const { totalClicks } = use(AnalyticsContext); const searchParams = useSearchParams(); const domain = searchParams.get("domain"); const key = searchParams.get("key"); diff --git a/apps/web/ui/analytics/date-range-picker.tsx b/apps/web/ui/analytics/date-range-picker.tsx index 3cabefe907..a899983d29 100644 --- a/apps/web/ui/analytics/date-range-picker.tsx +++ b/apps/web/ui/analytics/date-range-picker.tsx @@ -11,13 +11,13 @@ import { import { APP_DOMAIN, cn } from "@dub/utils"; import { Calendar, ChevronDown, Lock } from "lucide-react"; import Link from "next/link"; -import { useContext, useMemo, useState } from "react"; +import { use, useMemo, useState } from "react"; import { AnalyticsContext } from "."; export default function DateRangePicker() { const { queryParams } = useRouterStuff(); - const { basePath, interval, admin } = useContext(AnalyticsContext); + const { basePath, interval, admin } = use(AnalyticsContext); const [openDatePopover, setOpenDatePopover] = useState(false); diff --git a/apps/web/ui/analytics/devices.tsx b/apps/web/ui/analytics/devices.tsx index 374894edb6..4654eb09ea 100644 --- a/apps/web/ui/analytics/devices.tsx +++ b/apps/web/ui/analytics/devices.tsx @@ -2,7 +2,7 @@ import { DeviceTabs } from "@/lib/analytics"; import { LoadingSpinner, Modal, TabSelect, useRouterStuff } from "@dub/ui"; import { fetcher } from "@dub/utils"; import { Maximize } from "lucide-react"; -import { useContext, useState } from "react"; +import { use, useState } from "react"; import useSWR from "swr"; import { AnalyticsContext } from "."; import BarList from "./bar-list"; @@ -11,7 +11,7 @@ import DeviceIcon from "./device-icon"; export default function Devices() { const [tab, setTab] = useState("device"); - const { baseApiPath, queryString } = useContext(AnalyticsContext); + const { baseApiPath, queryString } = use(AnalyticsContext); const { data } = useSWR< ({ diff --git a/apps/web/ui/analytics/domain-selector.tsx b/apps/web/ui/analytics/domain-selector.tsx index ea839493e5..6b3f20092b 100644 --- a/apps/web/ui/analytics/domain-selector.tsx +++ b/apps/web/ui/analytics/domain-selector.tsx @@ -3,7 +3,7 @@ import { InputSelect, useRouterStuff } from "@dub/ui"; import { DUB_LOGO, GOOGLE_FAVICON_URL, getApexDomain } from "@dub/utils"; import { Globe } from "lucide-react"; import { useSearchParams } from "next/navigation"; -import { useContext, useMemo } from "react"; +import { use, useMemo } from "react"; import { ModalContext } from "../modals/provider"; export default function DomainSelector() { @@ -15,7 +15,7 @@ export default function DomainSelector() { const domain = searchParams.get("domain"); return domains.find(({ slug }) => slug === domain); }, [searchParams, domains]); - const { setShowAddEditDomainModal } = useContext(ModalContext); + const { setShowAddEditDomainModal } = use(ModalContext); return domains ? ( ("country"); - const { baseApiPath, queryString } = useContext(AnalyticsContext); + const { baseApiPath, queryString } = use(AnalyticsContext); const { data } = useSWR<{ country: string; city: string; clicks: number }[]>( `${baseApiPath}/${tab}?${queryString}`, diff --git a/apps/web/ui/analytics/referer.tsx b/apps/web/ui/analytics/referer.tsx index 53a4ef7ad9..d6539bdac3 100644 --- a/apps/web/ui/analytics/referer.tsx +++ b/apps/web/ui/analytics/referer.tsx @@ -1,13 +1,13 @@ import { BlurImage, LoadingSpinner, Modal, useRouterStuff } from "@dub/ui"; import { GOOGLE_FAVICON_URL, fetcher } from "@dub/utils"; import { Link2, Maximize } from "lucide-react"; -import { useContext, useState } from "react"; +import { use, useState } from "react"; import useSWR from "swr"; import { AnalyticsContext } from "."; import BarList from "./bar-list"; export default function Referer() { - const { baseApiPath, queryString } = useContext(AnalyticsContext); + const { baseApiPath, queryString } = use(AnalyticsContext); const { data } = useSWR<{ referer: string; clicks: number }[]>( `${baseApiPath}/referer?${queryString}`, diff --git a/apps/web/ui/analytics/share-popover.tsx b/apps/web/ui/analytics/share-popover.tsx index 0491314814..4e996ce119 100644 --- a/apps/web/ui/analytics/share-popover.tsx +++ b/apps/web/ui/analytics/share-popover.tsx @@ -8,14 +8,14 @@ import { } from "@dub/ui"; import { linkConstructor } from "@dub/utils"; import { Share2 } from "lucide-react"; -import { useContext, useState } from "react"; +import { use, useState } from "react"; import { toast } from "sonner"; import { AnalyticsContext } from "."; export default function SharePopover() { const [openSharePopover, setopenSharePopoverPopover] = useState(false); - const { baseApiPath, queryString, domain, key } = useContext( + const { baseApiPath, queryString, domain, key } = use( AnalyticsContext, ) as { baseApiPath: string; diff --git a/apps/web/ui/analytics/tag-selector.tsx b/apps/web/ui/analytics/tag-selector.tsx index b38b7e74fc..79e778896e 100644 --- a/apps/web/ui/analytics/tag-selector.tsx +++ b/apps/web/ui/analytics/tag-selector.tsx @@ -2,7 +2,7 @@ import useTags from "@/lib/swr/use-tags"; import { InputSelect, useRouterStuff } from "@dub/ui"; import { Tag } from "lucide-react"; import { useSearchParams } from "next/navigation"; -import { useContext } from "react"; +import { use } from "react"; import { ModalContext } from "../modals/provider"; export default function TagSelector() { @@ -11,7 +11,7 @@ export default function TagSelector() { const { tags } = useTags(); const searchParams = useSearchParams(); const selectedTagId = searchParams?.get("tagId"); - const { setShowAddEditTagModal } = useContext(ModalContext); + const { setShowAddEditTagModal } = use(ModalContext); return ( ("link"); const { basePath, baseApiPath, queryString, domain, key } = - useContext(AnalyticsContext); + use(AnalyticsContext); useEffect(() => { if (domain && key) { diff --git a/apps/web/ui/layout/nav-tabs.tsx b/apps/web/ui/layout/nav-tabs.tsx index 5972a1a2f2..2c5971ba22 100644 --- a/apps/web/ui/layout/nav-tabs.tsx +++ b/apps/web/ui/layout/nav-tabs.tsx @@ -9,7 +9,7 @@ import { Badge } from "@dub/ui"; import { motion } from "framer-motion"; import Link from "next/link"; import { useParams, usePathname, useSearchParams } from "next/navigation"; -import { useContext, useMemo } from "react"; +import { use, useMemo } from "react"; export default function NavTabs() { const pathname = usePathname(); @@ -60,7 +60,7 @@ export default function NavTabs() { ); } const OnboardingChecklist = () => { - const { setShowCompleteSetupModal } = useContext(ModalContext); + const { setShowCompleteSetupModal } = use(ModalContext); const { verified } = useDomains(); const { data: links } = useLinksCount(); const { users } = useUsers(); diff --git a/apps/web/ui/layout/user-survey/survey-form.tsx b/apps/web/ui/layout/user-survey/survey-form.tsx index e7b74d4f23..25121b34ad 100644 --- a/apps/web/ui/layout/user-survey/survey-form.tsx +++ b/apps/web/ui/layout/user-survey/survey-form.tsx @@ -13,7 +13,7 @@ import { } from "@dub/ui"; import { cn } from "@dub/utils"; import { ChevronRight, Globe } from "lucide-react"; -import { useContext, useState } from "react"; +import { use, useState } from "react"; import { UserSurveyContext } from "."; const options = [ @@ -59,7 +59,7 @@ export default function SurveyForm({ const [source, setSource] = useState(undefined); const [otherSource, setOtherSource] = useState(undefined); - const { status } = useContext(UserSurveyContext); + const { status } = use(UserSurveyContext); return (
diff --git a/apps/web/ui/modals/add-edit-link-modal/tags-section.tsx b/apps/web/ui/modals/add-edit-link-modal/tags-section.tsx index 03275ab3ec..7d4c2c3746 100644 --- a/apps/web/ui/modals/add-edit-link-modal/tags-section.tsx +++ b/apps/web/ui/modals/add-edit-link-modal/tags-section.tsx @@ -128,7 +128,7 @@ export default function TagsSection({ const CommandInput = () => { const isEmpty = useCommandState((state) => state.filtered.count === 0); return ( - + />) ); }; diff --git a/apps/web/ui/workspaces/create-workspace-button.tsx b/apps/web/ui/workspaces/create-workspace-button.tsx index 3bfedc5b3e..b238543e8d 100644 --- a/apps/web/ui/workspaces/create-workspace-button.tsx +++ b/apps/web/ui/workspaces/create-workspace-button.tsx @@ -5,10 +5,10 @@ import { ModalContext } from "@/ui/modals/provider"; import { Button } from "@dub/ui"; import { TooltipContent } from "@dub/ui/src/tooltip"; import { FREE_WORKSPACES_LIMIT } from "@dub/utils"; -import { useContext } from "react"; +import { use } from "react"; export default function CreateWorkspaceButton() { - const { setShowAddWorkspaceModal } = useContext(ModalContext); + const { setShowAddWorkspaceModal } = use(ModalContext); const { freeWorkspaces, exceedingFreeWorkspaces } = useWorkspaces(); return ( diff --git a/apps/web/ui/workspaces/no-workspaces-placeholder.tsx b/apps/web/ui/workspaces/no-workspaces-placeholder.tsx index c7a414ea5c..57d15ae4e2 100644 --- a/apps/web/ui/workspaces/no-workspaces-placeholder.tsx +++ b/apps/web/ui/workspaces/no-workspaces-placeholder.tsx @@ -1,10 +1,10 @@ "use client"; import { ModalContext } from "@/ui/modals/provider"; -import { useContext } from "react"; +import { use } from "react"; export default function NoWorkspacesPlaceholder() { - const { setShowAddWorkspaceModal } = useContext(ModalContext); + const { setShowAddWorkspaceModal } = use(ModalContext); return (
diff --git a/packages/ui/src/input-select.tsx b/packages/ui/src/input-select.tsx index 7263274ea1..97450d0c77 100644 --- a/packages/ui/src/input-select.tsx +++ b/packages/ui/src/input-select.tsx @@ -71,7 +71,7 @@ export function InputSelect({ const isEmpty = useCommandState((state: any) => state.filtered.count === 0); return ( - + />) ); });