Refactor titleToIcon mapping to idToIcon and move to docPage

packages/website/ts/components/sidebar_header.tsx

@@ -4,20 +4,9 @@ import * as React from 'react';
 
 const SHOW_DURATION_MS = 4000;
 
-const titleToIcon: { [title: string]: string } = {
-    '0x.js': 'zeroExJs.png',
-    Web3Wrapper: 'zeroExJs.png',
-    Deployer: 'zeroExJs.png',
-    'Sol-cov': 'zeroExJs.png',
-    'JSON Schemas': 'zeroExJs.png',
-    Subproviders: 'zeroExJs.png',
-    '0x Connect': 'connect.png',
-    '0x Smart Contracts': 'contracts.png',
-    Wiki: 'wiki.png',
-};
-
 interface SidebarHeaderProps {
     title: string;
+    iconUrl: string;
 }
 
 interface SidebarHeaderState {}
@@ -37,7 +26,7 @@ export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHe
                 </div>
                 <div className="flex">
                     <div>
-                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
+                        <img src={`/images/doc_icons/${this.props.iconUrl}`} width="22" />
                     </div>
                     <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
                         {this.props.title}

packages/website/ts/components/top_bar/top_bar.tsx

@@ -39,6 +39,7 @@ interface TopBarProps {
     style?: React.CSSProperties;
     isNightVersion?: boolean;
     onVersionSelected?: (semver: string) => void;
+    sidebarHeader?: React.ReactNode;
 }
 
 interface TopBarState {
@@ -393,7 +394,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menu}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
-                    sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
+                    sidebarHeader={this.props.sidebarHeader}
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
                     selectedVersion={this.props.docsVersion}
@@ -413,7 +414,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menuSubsectionsBySection}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
-                    sidebarHeader={<SidebarHeader title="Wiki" />}
+                    sidebarHeader={this.props.sidebarHeader}
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
                 />

packages/website/ts/pages/documentation/doc_page.tsx

@@ -15,9 +15,20 @@ import { docUtils } from 'ts/utils/doc_utils';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
+const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
 const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4';
 
-const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
+const idToIcon: { [id: string]: string } = {
+    [DocPackages.ZeroExJs]: 'zeroExJs.png',
+    [DocPackages.Web3Wrapper]: 'zeroExJs.png',
+    [DocPackages.Deployer]: 'zeroExJs.png',
+    [DocPackages.SolCov]: 'zeroExJs.png',
+    [DocPackages.JSONSchemas]: 'zeroExJs.png',
+    [DocPackages.Subproviders]: 'zeroExJs.png',
+    [DocPackages.Connect]: 'connect.png',
+    [DocPackages.SmartContracts]: 'contracts.png',
+};
+
 const docIdToS3FolderName: { [id: string]: string } = {
     [DocPackages.ZeroExJs]: '0xjs',
     [DocPackages.SmartContracts]: 'smart-contracts',
@@ -79,6 +90,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
             ? {}
             : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
         const sourceUrl = this._getSourceUrl();
+        const iconUrl = idToIcon[this.props.docsInfo.id];
         return (
             <div>
                 <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} />
@@ -92,13 +104,14 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     docsInfo={this.props.docsInfo}
                     translate={this.props.translate}
                     onVersionSelected={this._onVersionSelected.bind(this)}
+                    sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />}
                 />
                 <Documentation
                     selectedVersion={this.props.docsVersion}
                     availableVersions={this.props.availableDocVersions}
                     docsInfo={this.props.docsInfo}
                     docAgnosticFormat={this.state.docAgnosticFormat}
-                    sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
+                    sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />}
                     sourceUrl={sourceUrl}
                     topBarHeight={60}
                     onVersionSelected={this._onVersionSelected.bind(this)}

packages/website/ts/pages/wiki/wiki.tsx

@@ -88,6 +88,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             ...styles.mainContainers,
             overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
         };
+        const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="wiki.png" />;
         return (
             <div>
                 <DocumentTitle title="0x Protocol Wiki" />
@@ -96,6 +97,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                     location={this.props.location}
                     menuSubsectionsBySection={menuSubsectionsBySection}
                     translate={this.props.translate}
+                    sidebarHeader={sidebarHeader}
                 />
                 {_.isUndefined(this.state.articlesBySection) ? (
                     <div className="col col-12" style={mainContainersStyle}>
@@ -134,7 +136,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                     <NestedSidebarMenu
                                         topLevelMenu={menuSubsectionsBySection}
                                         menuSubsectionsBySection={menuSubsectionsBySection}
-                                        sidebarHeader={<SidebarHeader title="Wiki" />}
+                                        sidebarHeader={sidebarHeader}
                                     />
                                 </div>
                             </div>