Next.js Discord

Discord Forum

use() chain

Unanswered
Catla posted this in #help-forum
Open in Discord
CatlaOP
import { Suspense, use } from 'react';
import Link from 'next/link';
import { currentUser, User } from '@clerk/nextjs/server';
import { Building2, Globe, ImagePlus } from 'lucide-react';
import { prisma } from '@/lib/db';

export default function Dashboard() {
  const userPromise = currentUser();

  return (
    <div className="mx-auto max-w-7xl">
      <div className="mb-8">
        <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
          <Suspense>
            <BusinessName userPromise={userPromise} />
          </Suspense>
        </div>
      </div>

<div className="mb-8">
        <h2 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-white">
          Welcome,{' '}
          <Suspense>
            <FirstName userPromise={userPromise} />!
          </Suspense>
        </h2>
        <p className="mb-6 text-gray-600 dark:text-gray-300">
          Manage your professional business website content from this dashboard. Easily update your
          portfolio, showcase your services, and maintain your online presence to attract more
          clients.
        </p>
      </div>

2 Replies

CatlaOP
function FirstName({ userPromise }: { userPromise: Promise<User | null> }) {
  const user = use(userPromise);
  return user?.firstName || 'Unknown';
}

function BusinessName({ userPromise }: { userPromise: Promise<User | null> }) {
  const user = use(userPromise);
  const businessId = user?.publicMetadata.businessId as string;
  const business = use(prisma.business.findUnique({
    where: { id: businessId },
  }));
  return (
    <div className="flex items-center gap-2 rounded-full bg-blue-100 px-4 py-1 text-sm text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
      <Building2 className="size-4" />
      {business?.name || 'Your Business'}
    </div>
  );
}

function BusinessWebsite({ userPromise }: { userPromise: Promise<User | null> }) {
  const user = use(userPromise);
  const businessId = user?.publicMetadata.businessId as string;
  const business = use(prisma.business.findUnique({
    where: { id: businessId },
  }));
  return (
    <Link
      href={business?.website_url || '#'}
      target="_blank"
      rel="noopener noreferrer"
      className="font-medium text-blue-600 hover:underline dark:text-blue-400"
    >
      View My Website →
    </Link>
  );
}
As you can see, I am using use() hook for my functions to grab the currentUser data from the dashboard component.

Problem is, I can't use the use() hook on business DB call because it requires the business ID found inside user.

It would be easy of me to combine

How should I approach?