From cb82079c511d9a0c58fdf93164738d2161479884 Mon Sep 17 00:00:00 2001
From: Mandeep Singh <mandeeparora132@gmail.com>
Date: Thu, 14 Nov 2024 16:04:52 +0530
Subject: [PATCH] Fix bug in Clerk webhook: ensure user creation in Convex DB
 for email signups without first name

---
 app/(root)/profile/page.tsx | 9 ++++-----
 components/RightSidebar.tsx | 6 +++++-
 convex/http.ts              | 4 +++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/(root)/profile/page.tsx b/app/(root)/profile/page.tsx
index 6e1b1b7..6af6c4c 100644
--- a/app/(root)/profile/page.tsx
+++ b/app/(root)/profile/page.tsx
@@ -8,14 +8,13 @@ import PodcastCard from "@/components/PodcastCard";
 import ProfileCard from "@/components/ProfileCard";
 import { api } from "@/convex/_generated/api";
 import { ProfilePodcastProps } from "@/types";
-import { useClerk } from "@clerk/nextjs";
 
 const MyProfilePage = () => {
 
-  const { user } = useClerk();
+  const user = useQuery(api.users.getUser);
 
   const podcastsData = useQuery(api.podcasts.getPodcastByAuthorId, {
-    authorId: user?.id!,
+    authorId: user?.clerkId!,
   }) as ProfilePodcastProps;
 
   if (!user || !podcastsData) return <LoaderSpinner />;
@@ -27,10 +26,10 @@ const MyProfilePage = () => {
       </h1>
       <div className="mt-6 flex flex-col gap-6 max-md:items-center md:flex-row">
         <ProfileCard
-          profileId={user.id}
+          profileId={user.clerkId}
           podcastData={podcastsData}
           imageUrl={user?.imageUrl!}
-          userFirstName={user.firstName!}
+          userFirstName={user.name}
         />
       </div>
       <section className="mt-9 flex flex-col gap-5">
diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
index 83c767f..206c0e8 100644
--- a/components/RightSidebar.tsx
+++ b/components/RightSidebar.tsx
@@ -27,7 +27,11 @@ const RightSidebar = () => {
         <Link href={`/profile/${user?.id}`} className="flex gap-3 pb-12">
           <UserButton />
           <div className="flex w-full items-center justify-between">
-            <h1 className="text-16 truncate font-semibold text-white-1">{user?.firstName} {user?.lastName}</h1>
+            <h1 className="text-16 truncate font-semibold text-white-1">
+              { user?.firstName && user?.lastName ?
+                user?.firstName + " " + user?.lastName
+              : user?.emailAddresses[0].emailAddress.split("@")[0]}
+            </h1>
             <Image
               src="/icons/right-arrow.svg"
               alt="arrow"
diff --git a/convex/http.ts b/convex/http.ts
index 0ff6f71..f137ae1 100644
--- a/convex/http.ts
+++ b/convex/http.ts
@@ -20,7 +20,9 @@ const handleClerkWebhook = httpAction(async (ctx, request) => {
         clerkId: event.data.id,
         email: event.data.email_addresses[0].email_address,
         imageUrl: event.data.image_url,
-        name: event.data.first_name!,
+        name: event.data.first_name
+          ? event.data.first_name + " " + (event.data.last_name ?? "")
+          : event.data.email_addresses[0].email_address.split("@")[0],
       });
       break;
     case "user.updated":