Use same Link UI component for react-scroll links

5 files changed, 35 insertions, 21 deletions

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index ba1b423b9..efdf631b2 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,10 +1,9 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors, Link, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Link } from 'ts/components/ui/link';
 import { Profile } from 'ts/pages/about/profile';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProfileInfo, WebsitePaths } from 'ts/types';
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 6f029b6a2..9092a5cde 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -79,9 +79,9 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         this._isUnmounted = true;
     }
     public render(): React.ReactNode {
-        const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
+        const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat)
             ? {}
-            : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
+            : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat);
         const sourceUrl = this._getSourceUrl();
         const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON;
         const iconUrl = `/images/doc_icons/${iconFileName}`;
@@ -93,8 +93,8 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     location={this.props.location}
                     docsVersion={this.props.docsVersion}
                     availableDocVersions={this.props.availableDocVersions}
-                    menu={this.props.docsInfo.menu}
-                    menuSubsectionsBySection={menuSubsectionsBySection}
+                    sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()}
+                    subsectionNameToLinks={subsectionNameToLinks}
                     docsInfo={this.props.docsInfo}
                     translate={this.props.translate}
                     onVersionSelected={this._onVersionSelected.bind(this)}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index 52a486c2d..72e507a7b 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -1,4 +1,12 @@
-import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared';
+import {
+    ALink,
+    colors,
+    constants as sharedConstants,
+    Link,
+    LinkType,
+    MarkdownLinkBlock,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
@@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { TutorialButton } from 'ts/components/documentation/tutorial_button';
 import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
+import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b4462407f..c819cd8a1 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
@@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { CallToAction } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
-import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
 import { TypedText } from 'ts/components/ui/typed_text';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 55f532b11..3d8b8ef52 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,12 +1,15 @@
 import {
+    ALink,
     colors,
     constants as sharedConstants,
     HeaderSizes,
+    LinkType,
     MarkdownSection,
     NestedSidebarMenu,
     Styles,
     utils as sharedUtils,
 } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -78,9 +81,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
     }
     public render(): React.ReactNode {
-        const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
+        const sectionNameToLinks = _.isUndefined(this.state.articlesBySection)
             ? {}
-            : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+            : this._getSectionNameToLinks(this.state.articlesBySection);
+        console.log('sectionNameToLinks', sectionNameToLinks);
         const mainContainersStyle: React.CSSProperties = {
             ...styles.mainContainers,
             overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
@@ -92,7 +96,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
-                    menuSubsectionsBySection={menuSubsectionsBySection}
+                    sectionNameToLinks={sectionNameToLinks}
                     translate={this.props.translate}
                     sidebarHeader={sidebarHeader}
                 />
@@ -131,8 +135,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                     onMouseLeave={this._onSidebarHoverOff.bind(this)}
                                 >
                                     <NestedSidebarMenu
-                                        topLevelMenu={menuSubsectionsBySection}
-                                        menuSubsectionsBySection={menuSubsectionsBySection}
+                                        sectionNameToLinks={sectionNameToLinks}
                                         sidebarHeader={sidebarHeader}
                                     />
                                 </div>
@@ -223,15 +226,21 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             }
         }
     }
-    private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } {
+    private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap<ALink[]> {
         const sectionNames = _.keys(articlesBySection);
-        const menuSubsectionsBySection: { [section: string]: string[] } = {};
+        const sectionNameToLinks: ObjectMap<ALink[]> = {};
         for (const sectionName of sectionNames) {
             const articles = articlesBySection[sectionName];
-            const articleNames = _.map(articles, article => article.title);
-            menuSubsectionsBySection[sectionName] = articleNames;
+            const articleLinks = _.map(articles, article => {
+                return {
+                    to: sharedUtils.getIdFromName(article.title),
+                    title: article.title,
+                    type: LinkType.ReactScroll,
+                };
+            });
+            sectionNameToLinks[sectionName] = articleLinks;
         }
-        return menuSubsectionsBySection;
+        return sectionNameToLinks;
     }
     private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
         this.setState({