Use same Link UI component for react-scroll links

1 files changed, 19 insertions, 10 deletions

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({