Add common component for AnchorLink and ButtonLink (#1701)

packages/desktop-client/src/components/Titlebar.tsx

@@ -27,8 +27,8 @@ import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
 import { MonthCountSelector } from './budget/MonthCountSelector';
 import Button, { ButtonWithLoading } from './common/Button';
-import ButtonLink from './common/ButtonLink';
 import ExternalLink from './common/ExternalLink';
+import Link from './common/Link';
 import Paragraph from './common/Paragraph';
 import Text from './common/Text';
 import View from './common/View';
@@ -69,7 +69,8 @@ function UncategorizedButton() {
   let count = useSheetValue(queries.uncategorizedCount());
   return (
     count !== 0 && (
-      <ButtonLink
+      <Link
+        variant="button"
         type="bare"
         to="/accounts/uncategorized"
         style={{
@@ -77,7 +78,7 @@ function UncategorizedButton() {
         }}
       >
         {count} uncategorized {count === 1 ? 'transaction' : 'transactions'}
-      </ButtonLink>
+      </Link>
     )
   );
 }

packages/desktop-client/src/components/common/Link.tsx

+import React, { type ReactNode, type ComponentProps } from 'react';
+import { NavLink, useMatch, useNavigate } from 'react-router-dom';
+
+import { css } from 'glamor';
+
+import { type CSSProperties, styles } from '../../style';
+
+import Button from './Button';
+
+type ButtonLinkProps = ComponentProps<typeof Button> & {
+  to: string;
+  activeStyle?: CSSProperties;
+};
+
+type AnchorLinkProps = {
+  to: string;
+  style?: CSSProperties;
+  activeStyle?: CSSProperties;
+  children?: ReactNode;
+};
+
+const ButtonLink = ({
+  to,
+  style,
+  activeStyle,
+  onClick,
+  ...props
+}: ButtonLinkProps) => {
+  const navigate = useNavigate();
+  const match = useMatch({ path: to });
+
+  const handleClick = e => {
+    onClick?.(e);
+    navigate(to);
+  };
+
+  return (
+    <Button
+      style={{
+        ...style,
+        ...(match ? activeStyle : {}),
+      }}
+      activeStyle={activeStyle}
+      {...props}
+      onClick={handleClick}
+    />
+  );
+};
+
+const AnchorLink = ({ to, style, activeStyle, children }: AnchorLinkProps) => {
+  const match = useMatch({ path: to });
+
+  return (
+    <NavLink
+      to={to}
+      className={`${css([
+        styles.smallText,
+        style,
+        match ? activeStyle : null,
+      ])}`}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+type LinkProps =
+  | ({
+      variant: 'button';
+    } & ButtonLinkProps)
+  | ({ variant?: 'anchor' } & AnchorLinkProps);
+
+export default function Link({ variant = 'anchor', ...props }: LinkProps) {
+  switch (variant) {
+    case 'anchor':
+      return <AnchorLink {...props} />;
+
+    case 'button':
+      return <ButtonLink {...props} />;
+
+    default:
+      throw new Error(`Unrecognised link type: ${variant}`);
+  }
+}

packages/desktop-client/src/components/manager/ServerURL.tsx

 import React from 'react';
 
-import AnchorLink from '../common/AnchorLink';
+import Link from '../common/Link';
 import Text from '../common/Text';
 import View from '../common/View';
 import { useServerURL } from '../ServerContext';
@@ -30,9 +30,9 @@ export default function ServerURL() {
           <strong>No server configured</strong>
         )}
       </Text>
-      <AnchorLink to="/config-server" style={{ marginLeft: 15 }}>
+      <Link to="/config-server" style={{ marginLeft: 15 }}>
         Change
-      </AnchorLink>
+      </Link>
     </View>
   );
 }

upcoming-release-notes/1701.md

+---
+category: Maintenance
+authors: [th3c0d3br34ker]
+---
+
+Add a common component for AnchorLink and ButtonLink