refactor: convert buttons in sidebar to anchors (#3517)

Author: omBratteng

packages/shared/src/components/sidebar/ClickableNavItem.tsx

@@ -1,7 +1,13 @@
-import React, { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import React, {
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useCallback,
+} from 'react';
 import classNames from 'classnames';
 import Link from '../utilities/Link';
 import { navBtnClass, SidebarMenuItem } from './common';
+import { combinedClicks } from '../../lib/click';
 
 interface ClickableNavItemProps
   extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
@@ -18,25 +24,24 @@ export function ClickableNavItem({
   children,
   ...props
 }: ClickableNavItemProps): ReactElement {
-  if (showLogin) {
-    return (
-      <button
-        {...props}
-        type="button"
-        className={classNames(navBtnClass, props.className)}
-        onClick={showLogin}
-      >
-        {children}
-      </button>
-    );
-  }
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+      if (showLogin) {
+        event.preventDefault();
+        showLogin();
+      } else {
+        item.action?.();
+      }
+    },
+    [showLogin, item],
+  );
 
   if (!isButton && (!item.action || item.path)) {
     return (
       <Link href={item.path} passHref prefetch={false}>
         <a
-          {...(item.action && { onClick: item.action })}
           {...props}
+          {...combinedClicks(onClick)}
           target={item?.target}
           className={classNames(navBtnClass, props.className)}
           rel="noopener noreferrer"
@@ -48,12 +53,7 @@ export function ClickableNavItem({
   }
 
   return (
-    <button
-      {...props}
-      type="button"
-      className={navBtnClass}
-      onClick={item.action}
-    >
+    <button {...props} type="button" className={navBtnClass} onClick={onClick}>
       {children}
     </button>
   );

packages/shared/src/components/sidebar/SquadSection.tsx

@@ -9,7 +9,7 @@ import { SquadImage } from '../squads/SquadImage';
 
 export function SquadSection(props: SectionCommonProps): ReactElement {
   const { squads } = useContext(AuthContext);
-  const { openNewSquad } = useSquadNavigation();
+  const { openNewSquad, newSquadUrl } = useSquadNavigation();
 
   const squadMenuItems: SidebarMenuItem[] = [
     {
@@ -40,6 +40,8 @@ export function SquadSection(props: SectionCommonProps): ReactElement {
     icon: () => <NewSquadIcon />,
     title: 'New Squad',
     action: () => openNewSquad({ origin: Origin.Sidebar }),
+    path: newSquadUrl,
+    requiresLogin: true,
   });
 
   return (

packages/shared/src/components/squads/SquadsDirectoryHeader.tsx

@@ -13,7 +13,7 @@ interface SquadsDirectoryHeaderProps {
 export const SquadsDirectoryHeader = ({
   className,
 }: SquadsDirectoryHeaderProps): ReactElement => {
-  const { openNewSquad } = useSquadNavigation();
+  const { openNewSquad, newSquadUrl } = useSquadNavigation();
 
   return (
     <div
@@ -41,8 +41,13 @@ export const SquadsDirectoryHeader = ({
           className="mb-6"
           variant={ButtonVariant.Primary}
           tag="a"
-          onClick={() => openNewSquad({ origin: Origin.SquadDirectory })}
+          onClick={(event) =>
+            openNewSquad({ event, origin: Origin.SquadDirectory })
+          }
           data-testid="squad-directory-join-waitlist"
+          href={`${newSquadUrl}?origin=${Origin.SquadDirectory}`}
+          title="Create a new squad"
+          aria-label="Create a new squad"
         >
           New Squad
         </Button>

packages/shared/src/hooks/useSquadNavigation.ts

@@ -5,26 +5,30 @@ import { AuthTriggers } from '../lib/auth';
 import AuthContext from '../contexts/AuthContext';
 import { webappUrl } from '../lib/constants';
 
-type OpenNewSquadProps = { origin: Origin };
+type OpenNewSquadProps = { event?: React.MouseEvent; origin: Origin };
 type EditSquadProps = { handle: string };
 interface UseSquadNavigation {
   openNewSquad: (props?: OpenNewSquadProps) => void;
   editSquad: (props: EditSquadProps) => void;
+  newSquadUrl: string;
 }
 
 export const useSquadNavigation = (): UseSquadNavigation => {
   const { user, showLogin } = useContext(AuthContext);
   const router = useRouter();
 
+  const newSquadUrl = `${webappUrl}squads/new`;
+
   const openNewSquad = useCallback(
     (props: OpenNewSquadProps) => {
       if (!user) {
+        props?.event?.preventDefault();
         showLogin({ trigger: AuthTriggers.CreateSquad });
         return;
       }
-      router.push(`${webappUrl}squads/new?origin=${props.origin}`);
+      router.push(`${newSquadUrl}?origin=${props.origin}`);
     },
-    [router, user, showLogin],
+    [user, router, newSquadUrl, showLogin],
   );
 
   const editSquad = useCallback(
@@ -48,5 +52,5 @@ export const useSquadNavigation = (): UseSquadNavigation => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.pathname]);
 
-  return { openNewSquad, editSquad };
+  return { openNewSquad, editSquad, newSquadUrl };
 };