Remove type prop and instead infer it from the value of to

packages/react-shared/src/components/link.tsx

@@ -2,13 +2,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ReactRounterLink } from 'react-router-dom';
 import { Link as ScrollLink } from 'react-scroll';
+import * as validUrl from 'valid-url';
 
 import { LinkType } from '../types';
 import { constants } from '../utils/constants';
 
 interface LinkProps {
     to: string;
-    type?: LinkType;
     shouldOpenInNewTab?: boolean;
     className?: string;
     onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -28,7 +28,6 @@ export interface LinkState {}
  */
 export class Link extends React.Component<LinkProps, LinkState> {
     public static defaultProps: Partial<LinkProps> = {
-        type: LinkType.ReactRoute,
         shouldOpenInNewTab: false,
         className: '',
         onMouseOver: _.noop.bind(_),
@@ -43,7 +42,18 @@ export class Link extends React.Component<LinkProps, LinkState> {
         this._outerReactScrollSpan = null;
     }
     public render(): React.ReactNode {
-        if (this.props.type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) {
+        let type: LinkType;
+        const isReactRoute = _.startsWith(this.props.to, '/');
+        const isExternal = validUrl.isWebUri(this.props.to) || _.startsWith(this.props.to, 'mailto:');
+        if (isReactRoute) {
+            type = LinkType.ReactRoute;
+        } else if (isExternal) {
+            type = LinkType.External;
+        } else {
+            type = LinkType.ReactScroll;
+        }
+
+        if (type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) {
             throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`);
         }
 
@@ -53,9 +63,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
             color: this.props.fontColor,
         };
 
-        console.log('styleWithDefault', styleWithDefault);
-
-        switch (this.props.type) {
+        switch (type) {
             case LinkType.External:
                 return (
                     <a
@@ -108,7 +116,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
                     </span>
                 );
             default:
-                throw new Error(`Unrecognized LinkType: ${this.props.type}`);
+                throw new Error(`Unrecognized LinkType: ${type}`);
         }
     }
     // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events.

packages/react-shared/src/components/markdown_section.tsx

@@ -8,6 +8,7 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { AnchorTitle } from './anchor_title';
+import { Link } from './link';
 import { MarkdownCodeBlock } from './markdown_code_block';
 import { MarkdownLinkBlock } from './markdown_link_block';
 
@@ -63,13 +64,11 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                         </div>
                         <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
                             {!_.isUndefined(githubLink) && (
-                                <a
-                                    href={githubLink}
-                                    target="_blank"
-                                    style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }}
-                                >
-                                    Edit on Github
-                                </a>
+                                <div style={{ lineHeight: 2.1 }}>
+                                    <Link to={githubLink} shouldOpenInNewTab={true} fontColor={colors.linkBlue}>
+                                        Edit on Github
+                                    </Link>
+                                </div>
                             )}
                         </div>
                     </div>

packages/react-shared/src/components/nested_sidebar_menu.tsx

@@ -94,7 +94,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                 : link.title;
             return (
                 <div key={`menuItem-${finalMenuItemName}`}>
-                    <Link to={link.to} type={link.type} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+                    <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
                         <MenuItem
                             style={menuItemStyles}
                             innerDivStyle={menuItemInnerDivStyles}
@@ -131,7 +131,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                     const name = `${menuItemName}-${link.title}`;
                     return (
                         <li key={`menuSubsectionItem-${name}`}>
-                            <Link to={link.to} type={link.type} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+                            <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
                                 <MenuItem
                                     style={{ minHeight: 35 }}
                                     innerDivStyle={{

packages/react-shared/src/index.ts

@@ -6,7 +6,7 @@ export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
 export { Link } from './components/link';
 
-export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, LinkType, ALink } from './types';
+export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
 
 export { utils } from './utils/utils';
 export { constants } from './utils/constants';

packages/react-shared/src/types.ts

@@ -30,5 +30,4 @@ export interface ALink {
     title: string;
     to: string;
     shouldOpenInNewTab?: boolean;
-    type?: LinkType;
 }