[migration] Upgrade to React 19

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");

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);
 

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<DeviceTabs>("device");
 
-  const { baseApiPath, queryString } = useContext(AnalyticsContext);
+  const { baseApiPath, queryString } = use(AnalyticsContext);
 
   const { data } = useSWR<
     ({

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 ? (
     <InputSelect

apps/web/ui/analytics/export-button.tsx

@@ -1,13 +1,13 @@
 import { LoadingSpinner, Tooltip, TooltipContent } from "@dub/ui";
 import { Download } from "lucide-react";
-import { useContext, useState } from "react";
+import { use, useState } from "react";
 import { toast } from "sonner";
 import { AnalyticsContext } from ".";
 
 export default function ExportButton() {
   const [loading, setLoading] = useState(false);
-  const { totalClicks } = useContext(AnalyticsContext);
-  const { baseApiPath, queryString } = useContext(AnalyticsContext);
+  const { totalClicks } = use(AnalyticsContext);
+  const { baseApiPath, queryString } = use(AnalyticsContext);
 
   async function exportData() {
     setLoading(true);

apps/web/ui/analytics/locations.tsx

@@ -2,15 +2,15 @@ import { LocationTabs } from "@/lib/analytics";
 import { LoadingSpinner, Modal, TabSelect, useRouterStuff } from "@dub/ui";
 import { COUNTRIES, 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";
 
 export default function Locations() {
   const [tab, setTab] = useState<LocationTabs>("country");
 
-  const { baseApiPath, queryString } = useContext(AnalyticsContext);
+  const { baseApiPath, queryString } = use(AnalyticsContext);
 
   const { data } = useSWR<{ country: string; city: string; clicks: number }[]>(
     `${baseApiPath}/${tab}?${queryString}`,

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}`,

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;

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 (
     <InputSelect

apps/web/ui/analytics/toggle.tsx

@@ -6,15 +6,15 @@ import {
   getApexDomain,
   linkConstructor,
 } from "@dub/utils";
-import { useContext } from "react";
+import { use } from "react";
 import { AnalyticsContext } from ".";
 import DateRangePicker from "./date-range-picker";
 import ExportButton from "./export-button";
 import FilterBar from "./filter-bar";
 import SharePopover from "./share-popover";
 
 export default function Toggle() {
-  const { basePath, domain, key, url, admin } = useContext(AnalyticsContext);
+  const { basePath, domain, key, url, admin } = use(AnalyticsContext);
 
   const scrolled = useScroll(80);
 

apps/web/ui/analytics/top-links.tsx

@@ -4,7 +4,7 @@ import { fetcher, linkConstructor, truncate } from "@dub/utils";
 import { Maximize, X } from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { useContext, useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 import useSWR from "swr";
 import { AnalyticsContext } from ".";
 import BarList from "./bar-list";
@@ -13,7 +13,7 @@ export default function TopLinks() {
   const [tab, setTab] = useState<TopLinksTabs>("link");
 
   const { basePath, baseApiPath, queryString, domain, key } =
-    useContext(AnalyticsContext);
+    use(AnalyticsContext);
 
   useEffect(() => {
     if (domain && key) {

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();

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<string | undefined>(undefined);
   const [otherSource, setOtherSource] = useState<string | undefined>(undefined);
 
-  const { status } = useContext(UserSurveyContext);
+  const { status } = use(UserSurveyContext);
 
   return (
     <div className="flex flex-col space-y-4">

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 (
-      <Command.Input
+      (<Command.Input
         placeholder="Select tags..."
         // hack to focus on the input when the dropdown opens
         autoFocus={openCommandList}
@@ -162,7 +162,7 @@ export default function TagsSection({
           }
         }}
         className="block grow rounded-md border-none px-0 py-1 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-sm"
-      />
+      />)
     );
   };
 

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 (

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 (
     <div className="col-span-3 flex flex-col items-center justify-center rounded-md border border-gray-200 bg-white py-12">

packages/ui/src/input-select.tsx

@@ -71,7 +71,7 @@ export function InputSelect({
     const isEmpty = useCommandState((state: any) => state.filtered.count === 0);
 
     return (
-      <Command.Input
+      (<Command.Input
         placeholder={inputAttrs?.placeholder || "Search..."}
         // hacky focus on the input when the dropdown opens
         autoFocus={openCommandList}
@@ -92,7 +92,7 @@ export function InputSelect({
         }}
         disabled={disabled}
         className="block w-full truncate rounded-md border-none px-0 text-base text-gray-900 placeholder-gray-400 outline-none outline-0 transition-all duration-300 focus:ring-0 md:text-sm"
-      />
+      />)
     );
   });