Fixes broken profile page (#1111)

Author: NiallJoeMaher

app/(app)/[username]/_usernameClient.tsx

@@ -8,7 +8,7 @@ import { LinkIcon } from "@heroicons/react/20/solid";
 import { api } from "@/server/trpc/react";
 import { useRouter, useSearchParams } from "next/navigation";
 import type { Session } from "next-auth";
-import { Tabs } from "@/components/Tabs";
+import { Heading } from "@/components/ui-components/heading";
 import { toast } from "sonner";
 
 type Props = {
@@ -71,20 +71,8 @@ const Profile = ({ profile, isOwner, session }: Props) => {
     }
   };
 
-  const selectedTab =
-    tabFromParams && ["groups", "articles"].includes(tabFromParams)
-      ? tabFromParams
-      : "articles";
-
-  const [ARTICLES] = ["articles"];
-  const tabs = [
-    {
-      name: `Articles (${posts.length})`,
-      value: ARTICLES,
-      href: `?tab=${ARTICLES}`,
-      current: selectedTab === ARTICLES,
-    },
-  ];
+  const ARTICLES = "articles";
+  const selectedTab = tabFromParams === ARTICLES ? ARTICLES : ARTICLES;
 
   return (
     <>
@@ -121,11 +109,11 @@ const Profile = ({ profile, isOwner, session }: Props) => {
         </main>
         {accountLocked ? (
           <div className="mt-8 flex items-center justify-between border-b pb-4 text-3xl font-extrabold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
-            <h1>Account locked 🔒</h1>
+            <Heading level={1}>Account locked 🔒</Heading>
           </div>
         ) : (
-          <div className="mx-auto mt-4 dark:bg-neutral-900 sm:max-w-2xl lg:max-w-5xl">
-            <Tabs tabs={tabs} />
+          <div className="mx-auto mt-4 sm:max-w-2xl lg:max-w-5xl">
+            <Heading level={1}>{`Articles (${posts.length})`}</Heading>
           </div>
         )}
         {(() => {
@@ -179,10 +167,6 @@ const Profile = ({ profile, isOwner, session }: Props) => {
                   )}
                 </div>
               );
-            case GROUPS:
-              return (
-                <p className="py-4 font-medium">Groups are coming soon!</p>
-              );
             default:
               return null;
           }

app/(app)/[username]/page.tsx

@@ -80,11 +80,6 @@ export default async function Page({
           ),
         orderBy: (posts, { desc }) => [desc(posts.published)],
       },
-      BannedUsers: {
-        columns: {
-          id: true,
-        },
-      },
     },
     where: (users, { eq }) => eq(users.username, username),
   });
@@ -93,22 +88,16 @@ export default async function Page({
     notFound();
   }
 
-  const accountLocked = !!profile.BannedUsers;
+  const bannedUser = await db.query.banned_users.findFirst({
+    where: (bannedUsers, { eq }) => eq(bannedUsers.userId, profile.id),
+  });
+
+  const accountLocked = !!bannedUser;
   const session = await getServerAuthSession();
   const isOwner = session?.user?.id === profile.id;
 
-  type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> &
-    Partial<Type>;
-
-  type Profile = typeof profile;
-  const cleanedProfile: MakeOptional<Profile, "BannedUsers"> = {
-    ...profile,
-  };
-
-  delete cleanedProfile.BannedUsers;
-
   const shapedProfile = {
-    ...cleanedProfile,
+    ...profile,
     posts: accountLocked
       ? []
       : profile.posts.map((post) => ({

components/Tabs/index.tsx

@@ -29,7 +29,7 @@ export function Tabs(props: Props) {
         <select
           id="tabs"
           name="tabs"
-          className="block w-full rounded-md border-neutral-300 bg-white focus:border-neutral-500 focus:ring-neutral-500 dark:bg-neutral-900"
+          className="block w-full rounded-md border-neutral-300 bg-white focus:border-neutral-500 focus:ring-neutral-500 dark:bg-neutral-950"
           defaultValue={tabs.find((tab) => tab.current)?.name || tabs[0].name}
           onChange={(e) => {
             router.push(e.target.value);