From 43a22f553143e949df79a856eb13ea3210affe01 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Fri, 17 Aug 2018 14:54:28 +0300
Subject: [PATCH] chore: refactor links

---
 .../{linkify.ts => linkify.tsx}               | 43 ++++++++++++++++++-
 src/components/ContentItems/ContentItems.tsx  |  2 +-
 src/components/Operation/Operation.tsx        |  2 +-
 .../SecurityRequirement.tsx                   |  4 +-
 .../SecuritySchemes/SecuritySchemes.tsx       |  2 +-
 5 files changed, 47 insertions(+), 6 deletions(-)
 rename src/common-elements/{linkify.ts => linkify.tsx} (60%)

diff --git a/src/common-elements/linkify.ts b/src/common-elements/linkify.tsx
similarity index 60%
rename from src/common-elements/linkify.ts
rename to src/common-elements/linkify.tsx
index 4e49900c..24dec735 100644
--- a/src/common-elements/linkify.ts
+++ b/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} />;
+}
diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx
index aa8c4376..8bfde5d9 100644
--- a/src/components/ContentItems/ContentItems.tsx
+++ b/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>
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index 2fa7f748..19ff6841 100644
--- a/src/components/Operation/Operation.tsx
+++ b/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} />}
diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index cba33f36..86ccb6bd 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/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 && ') '}
diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
index 6af18621..08ca01fd 100644
--- a/src/components/SecuritySchemes/SecuritySchemes.tsx
+++ b/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 || ''} />