Fixing organization switcher tabs and hiding tabs if not the correct …

…role (#766) * fix: repeating "personal workspace" * fix: hiding tabs if user is not admin
Zipper-Inc · Feb 7, 2024 · 9a840c2 · 9a840c2
1 parent 41be375
commit 9a840c2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/apps/zipper.dev/src/components/auth/organizationSwitcher.tsx b/apps/zipper.dev/src/components/auth/organizationSwitcher.tsx
@@ -21,34 +21,32 @@ import { useRouter } from 'next/router';
 import { useOrganizationList } from '~/hooks/use-organization-list';
 import { useUser } from '~/hooks/use-user';
 import { useOrganization } from '~/hooks/use-organization';
-import { trpc } from '~/utils/trpc';
-import { useSession } from 'next-auth/react';
 
 export const OrganizationSwitcher: React.FC<ButtonProps> = (props) => {
   // get the authed user's organizations from Clerk
   const { setActive, organizationList, isLoaded, currentOrganizationId } =
     useOrganizationList();
   const { organization, role } = useOrganization();
 
-  const session = useSession();
-
-  const acceptInvitation = trpc.organization.acceptInvitation.useMutation();
-
   const { user } = useUser();
 
   const [hoverOrg, setHoverOrg] = useState<string | undefined | null>(
     undefined,
   );
 
-  const allWorkspaces = [
-    {
-      organization: {
-        id: null,
-        name: 'Personal Workspace',
-        slug: user?.username,
-      },
-      pending: false,
+  const personalWorkspace = {
+    organization: {
+      id: null,
+      name: 'Personal Workspace',
+      slug: user?.username,
     },
+    pending: false,
+  };
+
+  const allWorkspaces = [
+    ...(organizationList?.some((o) => o.organization.id === null)
+      ? []
+      : [personalWorkspace]),
     ...(organizationList || []),
   ];
 

diff --git a/apps/zipper.dev/src/components/dashboard/index.tsx b/apps/zipper.dev/src/components/dashboard/index.tsx
@@ -197,7 +197,7 @@ const emptyApps: App[] = [];
 
 export function Dashboard() {
   const [tabIndex, setTabIndex] = useState(0);
-  const { organization } = useOrganization();
+  const { organization, role } = useOrganization();
   const [appSearchTerm, setAppSearchTerm] = useState('');
 
   const appQuery = trpc.app.byAuthedUser.useQuery({
@@ -275,9 +275,15 @@ export function Dashboard() {
             overflowX="auto"
           >
             <HStack spacing={2} w="full">
-              {tabs.map((tab) => {
-                return <TabButton key={tab} title={tab} />;
-              })}
+              {tabs
+                .filter(
+                  (tab) =>
+                    !(tab === 'People' && role !== 'admin') &&
+                    !(organization && tab === 'Settings' && role !== 'admin'),
+                )
+                .map((tab) => (
+                  <TabButton key={tab} title={tab} />
+                ))}
             </HStack>
           </TabList>
           <TabPanels>