fix: ensure the user data is setup correct on the main page

web/src/components/Main.tsx

@@ -1,7 +1,10 @@
-"use client";
-
 import { Section } from "@/components/Section";
+import { db } from "@/db/db";
+import { usersTable } from "@/db/schema";
+import { setInitialUserData } from "@/lib/setInitialUserData";
 import { cn } from "@/lib/utils";
+import { auth } from "@clerk/nextjs/server";
+import { eq } from "drizzle-orm";
 import meta from "next-gen/config";
 
 function isDevelopment() {
@@ -38,7 +41,21 @@ function FeatureCard(props: {
   );
 }
 
-export default function Main() {
+export default async function Main() {
+  const { userId } = await auth();
+
+  if (!userId) {
+    return <div>No auth</div>;
+  }
+
+  const user = await db.query.usersTable.findFirst({
+    where: eq(usersTable.id, userId),
+  });
+
+  if (!user) {
+    await setInitialUserData(userId);
+  }
+
   return (
     <div className="flex flex-col w-full">
       <div className="flex flex-col items-center gap-10">

web/src/lib/setInitialUserData.tsx

@@ -6,7 +6,8 @@ export async function setInitialUserData(userId: string) {
   const user = await clerkClient.users.getUser(userId);
 
   // incase we dont have username such as google login, fallback to first name + last name
-  const usernameFallback = user.username ?? (user.firstName ?? "") + (user.lastName ?? "");
+  const usernameFallback =
+    user.username ?? (user.firstName ?? "") + (user.lastName ?? "");
 
   // For the display name, if it for some reason is empty, fallback to username
   let nameFallback = (user.firstName ?? "") + (user.lastName ?? "");