Merge pull request #288 from 0xProject/fix/docLinks

Fix doc anchor link collisions

11 files changed, 70 insertions, 22 deletions

diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.tsx
index 3b181a814..5e0a59e2d 100644
--- a/packages/website/ts/containers/connect_documentation.tsx
+++ b/packages/website/ts/containers/connect_documentation.tsx
@@ -10,6 +10,7 @@ import {
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {State} from 'ts/redux/reducer';
 import {DocsInfoConfig, WebsitePaths} from 'ts/types';
+import {constants} from 'ts/utils/constants';
 import {typeDocUtils} from 'ts/utils/typedoc_utils';
 
 /* tslint:disable:no-var-requires */
@@ -22,7 +23,7 @@ const connectDocSections = {
     installation: 'installation',
     httpClient: 'httpClient',
     webSocketOrderbookChannel: 'webSocketOrderbookChannel',
-    types: 'types',
+    types: constants.TYPES_SECTION_NAME,
 };
 
 const docsInfoConfig: DocsInfoConfig = {
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.tsx
index 2f2c49167..8e40a3fbc 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.tsx
+++ b/packages/website/ts/containers/zero_ex_js_documentation.tsx
@@ -10,6 +10,7 @@ import {
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {State} from 'ts/redux/reducer';
 import {DocsInfoConfig, WebsitePaths} from 'ts/types';
+import {constants} from 'ts/utils/constants';
 import {typeDocUtils} from 'ts/utils/typedoc_utils';
 
 /* tslint:disable:no-var-requires */
@@ -34,7 +35,7 @@ const zeroExJsDocSections = {
     etherToken: 'etherToken',
     proxy: 'proxy',
     orderWatcher: 'orderWatcher',
-    types: 'types',
+    types: constants.TYPES_SECTION_NAME,
 };
 
 const docsInfoConfig: DocsInfoConfig = {
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index c0be882f8..1731c19fe 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -195,6 +195,7 @@ export class Documentation extends
         const typeDefs = _.map(sortedTypes, customType => {
             return (
                 <TypeDefinition
+                    sectionName={sectionName}
                     key={`type-${customType.name}`}
                     customType={customType}
                     docsInfo={this.props.docsInfo}
@@ -203,7 +204,7 @@ export class Documentation extends
         });
 
         const sortedProperties = _.sortBy(docSection.properties, 'name');
-        const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this));
+        const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName));
 
         const sortedMethods = _.sortBy(docSection.methods, 'name');
         const methodDefs = _.map(sortedMethods, method => {
@@ -217,6 +218,7 @@ export class Documentation extends
                 <EventDefinition
                     key={`event-${event.name}-${i}`}
                     event={event}
+                    sectionName={sectionName}
                     docsInfo={this.props.docsInfo}
                 />
             );
@@ -311,14 +313,19 @@ export class Documentation extends
             </div>
         );
     }
-    private _renderProperty(property: Property): React.ReactNode {
+    private _renderProperty(sectionName: string, property: Property): React.ReactNode {
         return (
             <div
                 key={`property-${property.name}-${property.type.name}`}
                 className="pb3"
             >
                 <code className="hljs">
-                    {property.name}: <Type type={property.type} docsInfo={this.props.docsInfo} />
+                    {property.name}:
+                    <Type
+                        type={property.type}
+                        sectionName={sectionName}
+                        docsInfo={this.props.docsInfo}
+                    />
                 </code>
                 {property.source &&
                     <SourceLink
@@ -342,6 +349,7 @@ export class Documentation extends
         return (
             <MethodBlock
                key={`method-${method.name}-${sectionName}`}
+               sectionName={sectionName}
                method={method}
                typeDefinitionByName={typeDefinitionByName}
                libraryVersion={this.props.docsVersion}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 3d1cc703a..2fef019d2 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -8,6 +8,7 @@ import {colors} from 'ts/utils/colors';
 
 interface EventDefinitionProps {
     event: Event;
+    sectionName: string;
     docsInfo: DocsInfo;
 }
 
@@ -26,7 +27,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
         const event = this.props.event;
         return (
             <div
-                id={event.name}
+                id={`${this.props.sectionName}-${event.name}`}
                 className="pb2"
                 style={{overflow: 'hidden', width: '100%'}}
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
@@ -54,6 +55,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
             const type = (
                 <Type
                     type={eventArg.type}
+                    sectionName={this.props.sectionName}
                     docsInfo={this.props.docsInfo}
                 />
             );
diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx
index e671db2b8..1a6b562fe 100644
--- a/packages/website/ts/pages/documentation/interface.tsx
+++ b/packages/website/ts/pages/documentation/interface.tsx
@@ -7,6 +7,7 @@ import {CustomType, TypeDocTypes} from 'ts/types';
 
 interface InterfaceProps {
     type: CustomType;
+    sectionName: string;
     docsInfo: DocsInfo;
 }
 
@@ -17,9 +18,14 @@ export function Interface(props: InterfaceProps) {
             <span key={`property-${property.name}-${property.type}-${type.name}`}>
                 {property.name}:{' '}
                 {property.type.typeDocType !== TypeDocTypes.Reflection ?
-                    <Type type={property.type} docsInfo={props.docsInfo} /> :
+                    <Type
+                        type={property.type}
+                        sectionName={props.sectionName}
+                        docsInfo={props.docsInfo}
+                    /> :
                     <MethodSignature
                         method={property.type.method}
+                        sectionName={props.sectionName}
                         shouldHideMethodName={true}
                         shouldUseArrowSyntax={true}
                         docsInfo={props.docsInfo}
@@ -33,7 +39,7 @@ export function Interface(props: InterfaceProps) {
         const is = type.indexSignature;
         const param = (
             <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
-                {is.keyName}: <Type type={is.keyType} docsInfo={props.docsInfo} />
+                {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
             </span>
         );
         properties.push((
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 0eeb30a69..147bc34d6 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -18,6 +18,7 @@ import {typeDocUtils} from 'ts/utils/typedoc_utils';
 
 interface MethodBlockProps {
     method: SolidityMethod|TypescriptMethod;
+    sectionName: string;
     libraryVersion: string;
     typeDefinitionByName: TypeDefinitionByName;
     docsInfo: DocsInfo;
@@ -54,7 +55,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
 
         return (
             <div
-                id={method.name}
+                id={`${this.props.sectionName}-${method.name}`}
                 style={{overflow: 'hidden', width: '100%'}}
                 className="pb4"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
@@ -74,7 +75,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                         <AnchorTitle
                             headerSize={HeaderSizes.H3}
                             title={method.name}
-                            id={method.name}
+                            id={`${this.props.sectionName}-${method.name}`}
                             shouldShowAnchor={this.state.shouldShowAnchor}
                         />
                     </div>
@@ -82,6 +83,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                 <code className="hljs">
                     <MethodSignature
                         method={method}
+                        sectionName={this.props.sectionName}
                         typeDefinitionByName={this.props.typeDefinitionByName}
                         docsInfo={this.props.docsInfo}
                     />
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx
index df3b61814..366d4c13e 100644
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ b/packages/website/ts/pages/documentation/method_signature.tsx
@@ -3,9 +3,11 @@ import * as React from 'react';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {Type} from 'ts/pages/documentation/type';
 import {Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod} from 'ts/types';
+import {constants} from 'ts/utils/constants';
 
 interface MethodSignatureProps {
     method: TypescriptMethod|SolidityMethod;
+    sectionName: string;
     shouldHideMethodName?: boolean;
     shouldUseArrowSyntax?: boolean;
     typeDefinitionByName?: TypeDefinitionByName;
@@ -18,14 +20,19 @@ const defaultProps = {
 };
 
 export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => {
-    const parameters = renderParameters(props.method, props.docsInfo, props.typeDefinitionByName);
+    const sectionName = constants.TYPES_SECTION_NAME;
+    const parameters = renderParameters(
+        props.method, props.docsInfo, sectionName, props.typeDefinitionByName,
+    );
     const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => {
         return [prev, ', ', curr];
     });
     const methodName = props.shouldHideMethodName ? '' : props.method.name;
     const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ?
                                   undefined :
-                                  renderTypeParameter(props.method, props.docsInfo, props.typeDefinitionByName);
+                                  renderTypeParameter(
+                                      props.method, props.docsInfo, sectionName, props.typeDefinitionByName,
+                                  );
     return (
         <span>
             {props.method.callPath}{methodName}{typeParameterIfExists}({paramString})
@@ -34,6 +41,7 @@ export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSi
             {props.method.returnType &&
                 <Type
                     type={props.method.returnType}
+                    sectionName={sectionName}
                     typeDefinitionByName={props.typeDefinitionByName}
                     docsInfo={props.docsInfo}
                 />
@@ -45,7 +53,8 @@ export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSi
 MethodSignature.defaultProps = defaultProps;
 
 function renderParameters(
-    method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo, typeDefinitionByName?: TypeDefinitionByName,
+    method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo,
+    sectionName: string, typeDefinitionByName?: TypeDefinitionByName,
 ) {
     const parameters = method.parameters;
     const params = _.map(parameters, (p: Parameter) => {
@@ -53,6 +62,7 @@ function renderParameters(
         const type = (
             <Type
                 type={p.type}
+                sectionName={sectionName}
                 typeDefinitionByName={typeDefinitionByName}
                 docsInfo={docsInfo}
             />
@@ -67,7 +77,8 @@ function renderParameters(
 }
 
 function renderTypeParameter(
-    method: TypescriptMethod, docsInfo: DocsInfo, typeDefinitionByName?: TypeDefinitionByName,
+    method: TypescriptMethod, docsInfo: DocsInfo,
+    sectionName: string, typeDefinitionByName?: TypeDefinitionByName,
 ) {
     const typeParameter = method.typeParameter;
     const typeParam = (
@@ -75,6 +86,7 @@ function renderTypeParameter(
             {`<${typeParameter.name} extends `}
                 <Type
                     type={typeParameter.type}
+                    sectionName={sectionName}
                     typeDefinitionByName={typeDefinitionByName}
                     docsInfo={docsInfo}
                 />
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 0516a5c68..6182b147a 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -37,6 +37,7 @@ const typeToSection: {[typeName: string]: string} = {
 interface TypeProps {
     type: TypeDef;
     docsInfo: DocsInfo;
+    sectionName: string;
     typeDefinitionByName?: TypeDefinitionByName;
 }
 
@@ -66,6 +67,7 @@ export function Type(props: TypeProps): any {
                             <Type
                                 key={key}
                                 type={arg.elementType}
+                                sectionName={props.sectionName}
                                 typeDefinitionByName={props.typeDefinitionByName}
                                 docsInfo={props.docsInfo}
                             />[]
@@ -76,6 +78,7 @@ export function Type(props: TypeProps): any {
                         <Type
                             key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`}
                             type={arg}
+                            sectionName={props.sectionName}
                             typeDefinitionByName={props.typeDefinitionByName}
                             docsInfo={props.docsInfo}
                         />
@@ -100,6 +103,7 @@ export function Type(props: TypeProps): any {
                     <Type
                         key={`type-${t.name}-${t.value}-${t.typeDocType}`}
                         type={t}
+                        sectionName={props.sectionName}
                         typeDefinitionByName={props.typeDefinitionByName}
                         docsInfo={props.docsInfo}
                     />
@@ -144,7 +148,9 @@ export function Type(props: TypeProps): any {
                 (props.docsInfo.isPublicType(typeName as string) ||
                 !_.isUndefined(sectionNameIfExists))) {
         const id = Math.random().toString();
-        const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ? typeName : sectionNameIfExists;
+        const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ?
+                                       `${props.sectionName}-${typeName}` :
+                                       sectionNameIfExists;
         let typeDefinition;
         if (props.typeDefinitionByName) {
             typeDefinition = props.typeDefinitionByName[typeName as string];
@@ -177,6 +183,7 @@ export function Type(props: TypeProps): any {
                         className="typeTooltip"
                     >
                         <TypeDefinition
+                            sectionName={props.sectionName}
                             customType={typeDefinition}
                             shouldAddId={false}
                             docsInfo={props.docsInfo}
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 036552693..25499a6d0 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -13,6 +13,7 @@ import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 interface TypeDefinitionProps {
+    sectionName: string;
     customType: CustomType;
     shouldAddId?: boolean;
     docsInfo: DocsInfo;
@@ -46,6 +47,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                 codeSnippet = (
                     <Interface
                         type={customType}
+                        sectionName={this.props.sectionName}
                         docsInfo={this.props.docsInfo}
                     />
                 );
@@ -85,9 +87,14 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                             type
                         </span> {customType.name} ={' '}
                         {customType.type.typeDocType !== TypeDocTypes.Reflection ?
-                            <Type type={customType.type} docsInfo={this.props.docsInfo} /> :
+                            <Type
+                                type={customType.type}
+                                sectionName={this.props.sectionName}
+                                docsInfo={this.props.docsInfo}
+                            /> :
                             <MethodSignature
                                 method={customType.type.method}
+                                sectionName={this.props.sectionName}
                                 shouldHideMethodName={true}
                                 shouldUseArrowSyntax={true}
                                 docsInfo={this.props.docsInfo}
@@ -101,7 +108,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                 throw utils.spawnSwitchErr('type.kindString', customType.kindString);
         }
 
-        const typeDefinitionAnchorId = customType.name;
+        const typeDefinitionAnchorId = `${this.props.sectionName}-${customType.name}`;
         return (
             <div
                 id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 60686c0aa..6dc194010 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -130,7 +130,8 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
         return (
             <ul style={{margin: 0, listStyleType: 'none', paddingLeft: 0}} key={menuItemName}>
             {_.map(entityNames, entityName => {
-                const id = utils.getIdFromName(entityName);
+                const name = `${menuItemName}-${entityName}`;
+                const id = utils.getIdFromName(name);
                 return (
                     <li key={`menuItem-${entityName}`}>
                         <ScrollLink
@@ -138,10 +139,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                             offset={0}
                             duration={constants.DOCS_SCROLL_DURATION_MS}
                             containerId={constants.DOCS_CONTAINER_ID}
-                            onTouchTap={this._onMenuItemClick.bind(this, entityName)}
+                            onTouchTap={this._onMenuItemClick.bind(this, name)}
                         >
                             <MenuItem
-                                onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
+                                onTouchTap={this._onMenuItemClick.bind(this, name)}
                                 style={{minHeight: 35}}
                                 innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}}
                             >
@@ -154,8 +155,8 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             </ul>
         );
     }
-    private _onMenuItemClick(menuItemName: string): void {
-        const id = utils.getIdFromName(menuItemName);
+    private _onMenuItemClick(name: string): void {
+        const id = utils.getIdFromName(name);
         utils.setUrlHash(id);
         this.props.onMenuItemClick();
     }
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 761d00ef7..facaf5dd6 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -46,6 +46,7 @@ export const constants = {
     UNAVAILABLE_STATUS: 503,
     TAKER_FEE: new BigNumber(0),
     TESTNET_NAME: 'Kovan',
+    TYPES_SECTION_NAME: 'types',
     PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
     PROJECT_URL_RADAR_RELAY: 'https://radarrelay.com',
     PROJECT_URL_PARADEX: 'https://paradex.io',