fix: use workspace name in team switcher (unkeyed#2719)

harshsbhat · Dec 7, 2024 · 5a307de · 5a307de
1 parent 37c0959
commit 5a307de
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/apps/dashboard/app/(app)/desktop-sidebar.tsx b/apps/dashboard/app/(app)/desktop-sidebar.tsx
@@ -54,7 +54,7 @@ export const DesktopSidebar: React.FC<Props> = ({ workspace, className }) => {
       )}
     >
       <div className="flex min-w-full mt-2 -mx-2">
-        <WorkspaceSwitcher />
+        <WorkspaceSwitcher workspace={workspace} />
       </div>
       {workspace.planDowngradeRequest ? (
         <div className="flex justify-center w-full mt-2">

diff --git a/apps/dashboard/app/(app)/mobile-sidebar.tsx b/apps/dashboard/app/(app)/mobile-sidebar.tsx
@@ -35,7 +35,7 @@ export const MobileSideBar = ({ className, workspace }: Props) => {
             <SheetTrigger>
               <Menu className="w-6 h-6 " />
             </SheetTrigger>
-            <WorkspaceSwitcher />
+            <WorkspaceSwitcher workspace={workspace} />
           </div>
           <UserButton />
         </div>

diff --git a/apps/dashboard/app/(app)/team-switcher.tsx b/apps/dashboard/app/(app)/team-switcher.tsx
@@ -22,7 +22,12 @@ import { useOrganization, useOrganizationList, useUser } from "@clerk/nextjs";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import Link from "next/link";
 
-export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
+type Props = {
+  workspace: {
+    name: string;
+  };
+};
+export const WorkspaceSwitcher: React.FC<Props> = (props): JSX.Element => {
   const { isLoaded, setActive, userMemberships } = useOrganizationList({
     userMemberships: {
       infinite: true,
@@ -63,17 +68,15 @@ export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
         <div className="flex items-center gap-2 overflow-hidden whitespace-nowrap">
           <Avatar className="w-5 h-5">
             {currentOrg?.imageUrl ? (
-              <AvatarImage src={currentOrg.imageUrl} alt={currentOrg.name ?? "Profile picture"} />
+              <AvatarImage src={currentOrg.imageUrl} alt={props.workspace.name} />
             ) : user?.imageUrl ? (
               <AvatarImage
                 src={user.imageUrl}
                 alt={user?.username ?? user?.fullName ?? "Profile picture"}
               />
             ) : null}
             <AvatarFallback className="flex items-center justify-center w-8 h-8 text-gray-700 bg-gray-100 border border-gray-500 rounded">
-              {(currentOrg?.name ?? user?.username ?? user?.fullName ?? "")
-                .slice(0, 2)
-                .toUpperCase() ?? "P"}
+              {props.workspace.name.slice(0, 2).toUpperCase()}
             </AvatarFallback>
           </Avatar>
           {!isLoaded ? (
@@ -82,13 +85,11 @@ export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
             <Tooltip>
               <TooltipTrigger asChild>
                 <span className="overflow-hidden text-sm font-medium text-ellipsis">
-                  {currentOrg?.name ?? "Personal Workspace"}
+                  {props.workspace.name}
                 </span>
               </TooltipTrigger>
               <TooltipContent>
-                <span className="text-sm font-medium">
-                  {currentOrg?.name ?? "Personal Workspace"}
-                </span>
+                <span className="text-sm font-medium">{props.workspace.name}</span>
               </TooltipContent>
             </Tooltip>
           )}