chore: refactor links

src/common-elements/linkify.tsx

@@ -1,5 +1,10 @@
+import * as React from 'react';
+
+import { StoreConsumer } from '../components/StoreBuilder';
 import styled, { css } from '../styled-components';
 
+import { HistoryService } from '../services';
+
 // tslint:disable-next-line
 export const linkifyMixin = className => css`
   ${className} {
@@ -27,6 +32,42 @@ export const linkifyMixin = className => css`
   }
 `;
 
-export const ShareLink = styled.a`
+const isModifiedEvent = event =>
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
+export class Link extends React.Component<{ to: string; className?: string; children?: any }> {
+  navigate = (history: HistoryService, event) => {
+    if (
+      !event.defaultPrevented && // onClick prevented default
+      event.button === 0 && // ignore everything but left clicks
+      !isModifiedEvent(event) // ignore clicks with modifier keys
+    ) {
+      event.preventDefault();
+      history.replace(this.props.to);
+    }
+  };
+
+  render() {
+    return (
+      <StoreConsumer>
+        {store => (
+          <a
+            className={this.props.className}
+            href={store!.menu.history.linkForId(this.props.to)}
+            onClick={this.navigate.bind(this, store!.menu.history)}
+          >
+            {this.props.children}
+          </a>
+        )}
+      </StoreConsumer>
+    );
+  }
+}
+
+const StyledShareLink = styled(Link)`
   ${linkifyMixin('&')};
 `;
+
+export function ShareLink(props: { to: string }) {
+  return <StyledShareLink to={props.to} />;
+}

src/components/ContentItems/ContentItems.tsx

@@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
         <Row>
           <MiddlePanel>
             <Header>
-              <ShareLink href={'#' + this.props.item.id} />
+              <ShareLink to={this.props.item.id} />
               {name}
             </Header>
           </MiddlePanel>

src/components/Operation/Operation.tsx

@@ -45,7 +45,7 @@ export class Operation extends React.Component<OperationProps> {
           <OperationRow>
             <MiddlePanel>
               <H2>
-                <ShareLink href={'#' + operation.id} />
+                <ShareLink to={operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import styled from '../../styled-components';
 
-import { UnderlinedHeader } from '../../common-elements/headers';
+import { Link, UnderlinedHeader } from '../../common-elements/';
 import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
 import { linksCss } from '../Markdown/styled.elements';
 
@@ -70,7 +70,7 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
         {security.schemes.map(scheme => {
           return (
             <SecurityRequirementAndWrap key={scheme.id}>
-              <a href={'#' + scheme.sectionId}>{scheme.id}</a>
+              <Link to={scheme.sectionId}>{scheme.id}</Link>
               {scheme.scopes.length > 0 && ' ('}
               {scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
               {scheme.scopes.length > 0 && ') '}

src/components/SecuritySchemes/SecuritySchemes.tsx

@@ -71,7 +71,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
         <Row>
           <MiddlePanel>
             <H2>
-              <ShareLink href={'#' + scheme.sectionId} />
+              <ShareLink to={scheme.sectionId} />
               {scheme.id}
             </H2>
             <Markdown source={scheme.description || ''} />