Use new Link UI component everywhere, and add complementary ALink type

3 files changed, 36 insertions, 25 deletions

diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index 0cb4b387c..c51095709 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,24 +1,24 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
 
-interface MenuItemProps {
+interface CustomMenuItemProps {
     to: string;
     style?: React.CSSProperties;
     onClick?: () => void;
     className?: string;
 }
 
-interface MenuItemState {
+interface CustomMenuItemState {
     isHovering: boolean;
 }
 
-export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
-    public static defaultProps: Partial<MenuItemProps> = {
+export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
+    public static defaultProps: Partial<CustomMenuItemProps> = {
         onClick: _.noop.bind(_),
         className: '',
     };
-    public constructor(props: MenuItemProps) {
+    public constructor(props: CustomMenuItemProps) {
         super(props);
         this.state = {
             isHovering: false,
@@ -30,7 +30,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
             opacity: this.state.isHovering ? 0.5 : 1,
         };
         return (
-            <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
+            <Link to={this.props.to} style={this.props.style}>
                 <div
                     onClick={this.props.onClick.bind(this)}
                     className={`mx-auto ${this.props.className}`}
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
index f7bca370b..ae62aad0c 100644
--- a/packages/website/ts/components/ui/link.tsx
+++ b/packages/website/ts/components/ui/link.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Link as ReactRounterLink } from 'react-router-dom';
+import { LinkType } from 'ts/types';
 
 export interface LinkProps {
     to: string;
-    isExternal?: boolean;
+    type?: LinkType;
     shouldOpenInNewTab?: boolean;
     style?: React.CSSProperties;
     className?: string;
@@ -17,29 +18,39 @@ export interface LinkProps {
 export const Link: React.StatelessComponent<LinkProps> = ({
     style,
     className,
-    isExternal,
+    type,
     to,
     shouldOpenInNewTab,
     children,
 }) => {
-    if (isExternal) {
-        return (
-            <a target={shouldOpenInNewTab && '_blank'} className={className} style={style} href={to}>
-                {children}
-            </a>
-        );
-    } else {
-        return (
-            <ReactRounterLink to={to} className={className} style={style}>
-                {children}
-            </ReactRounterLink>
-        );
+    const styleWithDefault = {
+        textDecoration: 'none',
+        ...style,
+    };
+
+    switch (type) {
+        case LinkType.External:
+            return (
+                <a target={shouldOpenInNewTab && '_blank'} className={className} style={styleWithDefault} href={to}>
+                    {children}
+                </a>
+            );
+        case LinkType.ReactRoute:
+            return (
+                <ReactRounterLink to={to} className={className} style={styleWithDefault}>
+                    {children}
+                </ReactRounterLink>
+            );
+        case LinkType.ReactScroll:
+            return <div>TODO</div>;
+        default:
+            throw new Error(`Unrecognized LinkType: ${type}`);
     }
 };
 
 Link.defaultProps = {
-    isExternal: false,
-    shouldOpenInNewTab: false,
+    type: LinkType.ReactRoute,
+    shouldOpenInNewTab: true,
     style: {},
     className: '',
 };
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 8a9349c6d..767da3675 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
 
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
@@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
     GoToAccountManagementSimpleMenuItemProps
 > = ({ onClick }) => {
     return (
-        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+        <Link to={`${WebsitePaths.Portal}/account`}>
             <SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
         </Link>
     );