Use same Link UI component for react-scroll links

2 files changed, 47 insertions, 16 deletions

diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index 3cd14923c..1ed829b01 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -98,7 +98,10 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 marginLeft: 20,
             },
         };
-        const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
+        const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks();
+        console.log('sectionNameToLinks', sectionNameToLinks);
+        const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat);
+        console.log('subsectionNameToLinks', subsectionNameToLinks);
         return (
             <div>
                 {_.isUndefined(this.props.docAgnosticFormat) ? (
@@ -128,8 +131,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                         selectedVersion={this.props.selectedVersion}
                                         versions={this.props.availableVersions}
                                         sidebarHeader={this.props.sidebarHeader}
-                                        topLevelMenu={this.props.docsInfo.menu}
-                                        menuSubsectionsBySection={menuSubsectionsBySection}
+                                        sectionNameToLinks={sectionNameToLinks}
+                                        subsectionNameToLinks={subsectionNameToLinks}
                                         onVersionSelected={this.props.onVersionSelected}
                                     />
                                 </div>
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts
index 6355a2f88..1c11e07de 100644
--- a/packages/react-docs/src/docs_info.ts
+++ b/packages/react-docs/src/docs_info.ts
@@ -1,5 +1,5 @@
-import { MenuSubsectionsBySection } from '@0xproject/react-shared';
-import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types';
+import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared';
+import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types';
 import * as _ from 'lodash';
 
 import {
@@ -32,10 +32,10 @@ export class DocsInfo {
         this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;
         this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
     }
-    public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
-        const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
+    public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap<ALink[]> {
+        const subsectionNameToLinks: ObjectMap<ALink[]> = {};
         if (_.isUndefined(docAgnosticFormat)) {
-            return menuSubsectionsBySection;
+            return subsectionNameToLinks;
         }
 
         const docSections = _.keys(this.sections);
@@ -56,7 +56,14 @@ export class DocsInfo {
             if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) {
                 const sortedTypesNames = _.sortBy(docSection.types, 'name');
                 const typeNames = _.map(sortedTypesNames, t => t.name);
-                menuSubsectionsBySection[sectionName] = typeNames;
+                const typeLinks = _.map(typeNames, typeName => {
+                    return {
+                        to: `${sectionName}-${typeName}`,
+                        title: typeName,
+                        type: LinkType.ReactScroll,
+                    };
+                });
+                subsectionNameToLinks[sectionName] = typeLinks;
             } else if (isExportedFunctionSection) {
                 // Noop so that we don't have the method listed underneath itself.
             } else {
@@ -71,15 +78,20 @@ export class DocsInfo {
                 const methodNames = _.map(methodsSortedByName, m => m.name);
                 const sortedFunctionNames = _.sortBy(docSection.functions, 'name');
                 const functionNames = _.map(sortedFunctionNames, m => m.name);
-                menuSubsectionsBySection[sectionName] = [
-                    ...eventNames,
-                    ...propertyNames,
-                    ...functionNames,
-                    ...methodNames,
-                ];
+                const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames];
+
+                const links = _.map(names, name => {
+                    return {
+                        to: `${sectionName}-${name}`,
+                        title: name,
+                        type: LinkType.ReactScroll,
+                    };
+                });
+
+                subsectionNameToLinks[sectionName] = links;
             }
         });
-        return menuSubsectionsBySection;
+        return subsectionNameToLinks;
     }
     public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } {
         if (_.isUndefined(this.sections.types)) {
@@ -90,4 +102,20 @@ export class DocsInfo {
         const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any;
         return typeDefinitionByName;
     }
+    public getSectionNameToLinks(): ObjectMap<ALink[]> {
+        const sectionNameToLinks: ObjectMap<ALink[]> = {};
+        _.each(this.menu, (linkTitles, sectionName) => {
+            sectionNameToLinks[sectionName] = [];
+            _.each(linkTitles, linkTitle => {
+                const to = sharedUtils.getIdFromName(linkTitle);
+                const links = sectionNameToLinks[sectionName];
+                links.push({
+                    title: linkTitle,
+                    to,
+                    type: LinkType.ReactScroll,
+                });
+            });
+        });
+        return sectionNameToLinks;
+    }
 }