From c01a4fa345a9be8a03aa9bb78046d5faaf795baa Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Sun, 15 Jan 2023 17:23:46 +0700
Subject: [PATCH] use `NextLink` for `UserMenu` option and cleanup

---
 website/src/components/Header/UserMenu.tsx | 176 +++++++++++----------
 1 file changed, 90 insertions(+), 86 deletions(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 8835c7c2..fb4dd369 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -11,101 +11,105 @@ import {
   Text,
   useColorModeValue,
 } from "@chakra-ui/react";
+import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
-import React from "react";
+import React, { ElementType, useCallback } from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
+interface MenuOption {
+  name: string;
+  href: string;
+  desc: string;
+  icon: ElementType;
+  isExternal: boolean;
+}
+
 export function UserMenu() {
   const borderColor = useColorModeValue("gray.300", "gray.600");
+  const handleSignOut = useCallback(() => {
+    signOut({ callbackUrl: "/" });
+  }, []);
+  const { data: session, status } = useSession();
 
-  const { data: session } = useSession();
-
-  if (!session) {
-    return <></>;
+  if (!session || status !== "authenticated") {
+    return null;
   }
-  if (session && session.user) {
-    const accountOptions = [
-      {
-        name: "Dashboard",
-        href: "/dashboard",
-        desc: "Dashboard",
-        icon: FiLayout,
-      },
-      {
-        name: "Account Settings",
-        href: "/account",
-        desc: "Account Settings",
-        icon: FiSettings,
-      },
-    ];
-    const helpOptions = [
-      {
-        name: "Report a Bug",
-        href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
-        desc: "Report a Bug",
-        icon: FiAlertTriangle,
-      },
-    ];
+  const options: MenuOption[] = [
+    {
+      name: "Dashboard",
+      href: "/dashboard",
+      desc: "Dashboard",
+      icon: FiLayout,
+      isExternal: false,
+    },
+    {
+      name: "Account Settings",
+      href: "/account",
+      desc: "Account Settings",
+      icon: FiSettings,
+      isExternal: false,
+    },
+    {
+      name: "Report a Bug",
+      href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
+      desc: "Report a Bug",
+      icon: FiAlertTriangle,
+      isExternal: true,
+    },
+  ];
 
-    if (session.user.role === "admin") {
-      accountOptions.unshift({
-        name: "Admin Dashboard",
-        href: "/admin",
-        desc: "Admin Dashboard",
-        icon: FiShield,
-      });
-    }
-
-    return (
-      <>
-        <Menu>
-          <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
-            <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
-              <Avatar size="sm" bgImage={session.user.image}></Avatar>
-              <Text data-cy="username" className="hidden lg:flex">
-                {session.user.name || session.user.email}
-              </Text>
-            </Box>
-          </MenuButton>
-          <MenuList p="2" borderRadius="xl" shadow="none">
-            <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
-              <Text>{session.user.name}</Text>
-              <Text color="blue.500" fontWeight="bold" fontSize="xl">
-                3,200
-              </Text>
-            </Box>
-            <MenuDivider />
-            <MenuGroup>
-              {accountOptions.map((item) => (
-                <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
-                  <MenuItem gap="3" borderRadius="md" p="4">
-                    <item.icon className="text-blue-500" aria-hidden="true" />
-                    <Text>{item.name}</Text>
-                  </MenuItem>
-                </Link>
-              ))}
-            </MenuGroup>
-            <MenuDivider />
-            <MenuGroup>
-              {helpOptions.map((item) => (
-                <Link key={item.name} href={item.href} isExternal _hover={{ textDecoration: "none" }}>
-                  <MenuItem gap="3" borderRadius="md" p="4">
-                    <item.icon className="text-blue-500" aria-hidden="true" />
-                    <Text>{item.name}</Text>
-                  </MenuItem>
-                </Link>
-              ))}
-            </MenuGroup>
-            <MenuDivider />
-            <MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
-              <FiLogOut className="text-blue-500" aria-hidden="true" />
-              <Text>Sign Out</Text>
-            </MenuItem>
-          </MenuList>
-        </Menu>
-      </>
-    );
+  if (session.user.role === "admin") {
+    options.unshift({
+      name: "Admin Dashboard",
+      href: "/admin",
+      desc: "Admin Dashboard",
+      icon: FiShield,
+      isExternal: false,
+    });
   }
+
+  return (
+    <Menu>
+      <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
+        <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
+          <Avatar size="sm" bgImage={session.user.image}></Avatar>
+          <Text data-cy="username" className="hidden lg:flex">
+            {session.user.name || session.user.email}
+          </Text>
+        </Box>
+      </MenuButton>
+      <MenuList p="2" borderRadius="xl" shadow="none">
+        <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
+          <Text>{session.user.name}</Text>
+          <Text color="blue.500" fontWeight="bold" fontSize="xl">
+            3,200
+          </Text>
+        </Box>
+        <MenuDivider />
+        <MenuGroup>
+          {options.map((item) => (
+            <Link
+              key={item.name}
+              as={item.isExternal ? "a" : NextLink}
+              isExternal={item.isExternal}
+              href={item.href}
+              _hover={{ textDecoration: "none" }}
+            >
+              <MenuItem gap="3" borderRadius="md" p="4">
+                <item.icon className="text-blue-500" aria-hidden="true" />
+                <Text>{item.name}</Text>
+              </MenuItem>
+            </Link>
+          ))}
+        </MenuGroup>
+        <MenuDivider />
+        <MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
+          <FiLogOut className="text-blue-500" aria-hidden="true" />
+          <Text>Sign Out</Text>
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
 }
 
 export default UserMenu;