Add 'My Company' tab for company members in bottom nav

Author: anees-asghar

src/app/(authenticated)/my-company/page.tsx

@@ -0,0 +1,27 @@
+import authOptions from "@/app/api/auth/[...nextauth]/authOptions";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
+import UserSignOut from "@/components/UserSignOut";
+import { UserService } from "@/services/UserService";
+import { isCompany } from "@/utils/utils";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+
+export default async function MyCompany() {
+  const session = (await getServerSession(authOptions))!;
+  const user = await UserService.getMe(session!.cannonToken);
+  if (!user) return <UserSignOut />;
+
+  if (!isCompany(user.role)) {
+    return (
+      <BlankPageWithMessage message="You do not have access to this page." />
+    );
+  }
+
+  if (!user.company || user.company.length <= 0) {
+    return (
+      <BlankPageWithMessage message="You are not associated to any company." />
+    );
+  }
+
+  redirect(`companies/${user.company[0].company}`);
+}

src/app/(authenticated)/qr/page.tsx

@@ -10,6 +10,7 @@ import { CompanyService } from "@/services/CompanyService";
 import { convertToAppRole, isCompany } from "@/utils/utils";
 import Link from "next/link";
 import { ScanQrCode } from "lucide-react";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 
 export default async function QR() {
   const session = await getServerSession(authOptions);
@@ -20,12 +21,13 @@ export default async function QR() {
   const userQRCode: string | null = await UserService.getQRCode(
     session!.cannonToken
   );
-  if (!userQRCode) return <div>Unable to get QR-Code</div>;
+  if (!userQRCode)
+    return <BlankPageWithMessage message="Unable to get QR code." />;
 
   let company: Company | null = null;
   if (isCompany(user.role)) {
     // assumes that cannon api only provides the company associated with the current edition
-    if (user.company?.length) {
+    if (user.company && user.company.length > 0) {
       company = await CompanyService.getCompany(user.company[0].company);
     } else {
       await demoteMe(session!.cannonToken);
@@ -93,4 +95,5 @@ const demoteMe = async (cannonToken: string) => {
     revalidateTag("modified-me");
     redirect("/");
   }
+  return null;
 };

src/components/BottomNavbar/NavbarItem.tsx

@@ -6,43 +6,59 @@ import { usePathname } from "next/navigation";
 
 export type NavbarItemKey = keyof typeof navbarItems;
 
-interface NavbarIconProps {
+interface NavbarItemProps {
   name: NavbarItemKey;
+  user: User;
 }
 
 const navbarItems = {
   home: {
     title: "Home",
     icon: Home,
     route: "/home",
+    isSelected: (currPath: string, _: User) => currPath === "/home",
   },
   schedule: {
     title: "Schedule",
     icon: Calendar,
     route: "/schedule",
+    isSelected: (currPath: string, _: User) => currPath === "/schedule",
   },
   profile: {
     title: "Profile",
     icon: User,
     route: "/profile",
+    isSelected: (currPath: string, _: User) => currPath === "/profile",
   },
   connections: {
     title: "Connections",
     icon: Users,
     route: "/profile/connections",
+    isSelected: (currPath: string, _: User) =>
+      currPath === "/profile/connections",
   },
   companies: {
     title: "Companies",
     icon: Building,
     route: "/companies",
+    isSelected: (currPath: string, _: User) => currPath === "/companies",
+  },
+  myCompany: {
+    title: "My Company",
+    icon: Building,
+    route: "/my-company",
+    isSelected: (currPath: string, user: User) => {
+      if (!user.company || user.company.length <= 0) return false;
+      return currPath === `/companies/${user.company[0].company}`;
+    },
   },
 };
 
-export default function NavbarItem({ name }: NavbarIconProps) {
-  const { title, icon: Icon, route } = navbarItems[name];
+export default function NavbarItem({ name, user }: NavbarItemProps) {
+  const { title, icon: Icon, route, isSelected } = navbarItems[name];
 
   const currPath = usePathname();
-  const selected = route === currPath;
+  const selected = isSelected(currPath, user);
 
   return (
     <Link

src/components/BottomNavbar/index.tsx

@@ -10,7 +10,7 @@ import QRCodeButton from "./QRCodeButton";
 
 const navbarItemKeysByRole: Record<UserRole, NavbarItemKey[]> = {
   Attendee: ["home", "schedule", "profile"],
-  Company: ["home", "connections", "profile"],
+  Company: ["home", "connections", "myCompany", "profile"],
   Member: ["home", "schedule", "companies", "profile"],
   Admin: ["home", "schedule", "companies", "profile"],
 };
@@ -25,7 +25,7 @@ export default async function BottomNavbar() {
     <div className="sticky z-10 bottom-0 left-0 right-0 bg-sinfo-primary pb-safe">
       <div className="relative container mx-auto flex h-navbar flex-row">
         {navbarItemKeysByRole[convertToAppRole(user.role)].map((k) => (
-          <NavbarItem key={k} name={k} />
+          <NavbarItem key={k} name={k} user={user} />
         ))}
         <QRCodeButton />
       </div>