From c4f65681a160c4e62d947ba22b81246ac0b2c6a4 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 20 Feb 2018 14:11:19 -0800
Subject: Add translation infra and replace english text with calls to
 translate

---
 packages/website/ts/components/footer.tsx | 180 +++++++++++++++---------------
 1 file changed, 90 insertions(+), 90 deletions(-)

(limited to 'packages/website/ts/components/footer.tsx')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index a0f1a0c96..a5bddc874 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,9 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { WebsitePaths } from 'ts/types';
+import { Deco, Key, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 
 interface MenuItemsBySection {
     [sectionName: string]: FooterMenuItem[];
@@ -15,86 +16,8 @@ interface FooterMenuItem {
     isExternal?: boolean;
 }
 
-enum Sections {
-    Documentation = 'Documentation',
-    Community = 'Community',
-    Organization = 'Organization',
-}
-
 const ICON_DIMENSION = 16;
-const menuItemsBySection: MenuItemsBySection = {
-    Documentation: [
-        {
-            title: '0x.js',
-            path: WebsitePaths.ZeroExJs,
-        },
-        {
-            title: '0x Smart Contracts',
-            path: WebsitePaths.SmartContracts,
-        },
-        {
-            title: '0x Connect',
-            path: WebsitePaths.Connect,
-        },
-        {
-            title: 'Whitepaper',
-            path: WebsitePaths.Whitepaper,
-            isExternal: true,
-        },
-        {
-            title: 'Wiki',
-            path: WebsitePaths.Wiki,
-        },
-        {
-            title: 'FAQ',
-            path: WebsitePaths.FAQ,
-        },
-    ],
-    Community: [
-        {
-            title: 'Rocket.chat',
-            isExternal: true,
-            path: constants.URL_ZEROEX_CHAT,
-        },
-        {
-            title: 'Blog',
-            isExternal: true,
-            path: constants.URL_BLOG,
-        },
-        {
-            title: 'Twitter',
-            isExternal: true,
-            path: constants.URL_TWITTER,
-        },
-        {
-            title: 'Reddit',
-            isExternal: true,
-            path: constants.URL_REDDIT,
-        },
-        {
-            title: 'Forum',
-            isExternal: true,
-            path: constants.URL_DISCOURSE_FORUM,
-        },
-    ],
-    Organization: [
-        {
-            title: 'About',
-            isExternal: false,
-            path: WebsitePaths.About,
-        },
-        {
-            title: 'Careers',
-            isExternal: true,
-            path: constants.URL_ANGELLIST,
-        },
-        {
-            title: 'Contact',
-            isExternal: true,
-            path: 'mailto:team@0xproject.com',
-        },
-    ],
-};
+
 const linkStyle = {
     color: colors.white,
     cursor: 'pointer',
@@ -108,12 +31,90 @@ const titleToIcon: { [title: string]: string } = {
     Forum: 'discourse.png',
 };
 
-export interface FooterProps {}
+export interface FooterProps {
+    translate?: Translate;
+}
 
 interface FooterState {}
 
 export class Footer extends React.Component<FooterProps, FooterState> {
+    public static defaultProps: Partial<FooterProps> = {
+        translate: new Translate(),
+    };
     public render() {
+        const menuItemsBySection: MenuItemsBySection = {
+            [Key.Documentation]: [
+                {
+                    title: '0x.js',
+                    path: WebsitePaths.ZeroExJs,
+                },
+                {
+                    title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
+                    path: WebsitePaths.SmartContracts,
+                },
+                {
+                    title: this.props.translate.get(Key.Connect, Deco.Cap),
+                    path: WebsitePaths.Connect,
+                },
+                {
+                    title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
+                    path: WebsitePaths.Whitepaper,
+                    isExternal: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Wiki, Deco.Cap),
+                    path: WebsitePaths.Wiki,
+                },
+                {
+                    title: this.props.translate.get(Key.FAQ, Deco.Cap),
+                    path: WebsitePaths.FAQ,
+                },
+            ],
+            [Key.Community]: [
+                {
+                    title: this.props.translate.get(Key.RocketChat, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_ZEROEX_CHAT,
+                },
+                {
+                    title: this.props.translate.get(Key.Blog, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_BLOG,
+                },
+                {
+                    title: 'Twitter',
+                    isExternal: true,
+                    path: constants.URL_TWITTER,
+                },
+                {
+                    title: 'Reddit',
+                    isExternal: true,
+                    path: constants.URL_REDDIT,
+                },
+                {
+                    title: this.props.translate.get(Key.Forum, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_DISCOURSE_FORUM,
+                },
+            ],
+            [Key.Organization]: [
+                {
+                    title: this.props.translate.get(Key.About, Deco.Cap),
+                    isExternal: false,
+                    path: WebsitePaths.About,
+                },
+                {
+                    title: this.props.translate.get(Key.Careers, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_ANGELLIST,
+                },
+                {
+                    title: this.props.translate.get(Key.Contact, Deco.Cap),
+                    isExternal: true,
+                    path: 'mailto:team@0xproject.com',
+                },
+            ],
+        };
         return (
             <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
@@ -137,20 +138,20 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                     <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
                         <div className="col lg-col-4 md-col-4 col-12">
                             <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Sections.Documentation)}
-                                {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))}
+                                {this._renderHeader(Key.Documentation)}
+                                {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                         <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
                             <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Sections.Community)}
-                                {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))}
+                                {this._renderHeader(Key.Community)}
+                                {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                         <div className="col lg-col-4 md-col-4 col-12">
                             <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Sections.Organization)}
-                                {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
+                                {this._renderHeader(Key.Organization)}
+                                {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                     </div>
@@ -195,9 +196,8 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
-    private _renderHeader(title: string) {
+    private _renderHeader(key: Key) {
         const headerStyle = {
-            textTransform: 'uppercase',
             color: colors.grey400,
             letterSpacing: 2,
             fontFamily: 'Roboto Mono',
@@ -205,7 +205,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         };
         return (
             <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
-                {title}
+                {this.props.translate.get(key, Deco.Upper)}
             </div>
         );
     }
-- 
cgit v1.2.3


From 13fed15e0c4a643bb5a80737901c3d85be39e6ee Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 20 Feb 2018 19:53:07 -0800
Subject: Improve homepage and add translations in chinese, russian, korean and
 spanish

---
 packages/website/ts/components/footer.tsx | 56 ++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts/components/footer.tsx')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index a5bddc874..d7ebc4ede 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,7 +1,9 @@
 import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -23,24 +25,33 @@ const linkStyle = {
     cursor: 'pointer',
 };
 
-const titleToIcon: { [title: string]: string } = {
-    'Rocket.chat': 'rocketchat.png',
-    Blog: 'medium.png',
-    Twitter: 'twitter.png',
-    Reddit: 'reddit.png',
-    Forum: 'discourse.png',
+const languageToMenuTitle = {
+    [Language.English]: 'English',
+    [Language.Russian]: 'Русский',
+    [Language.Spanish]: 'Español',
+    [Language.Korean]: '한국어',
+    [Language.Chinese]: '中文',
 };
 
 export interface FooterProps {
     translate?: Translate;
+    onLanguageSelected?: (language: Language) => void;
 }
 
-interface FooterState {}
+interface FooterState {
+    selectedLanguage: Language;
+}
 
 export class Footer extends React.Component<FooterProps, FooterState> {
     public static defaultProps: Partial<FooterProps> = {
         translate: new Translate(),
     };
+    constructor(props: FooterProps) {
+        super();
+        this.state = {
+            selectedLanguage: props.translate.getLanguage(),
+        };
+    }
     public render() {
         const menuItemsBySection: MenuItemsBySection = {
             [Key.Documentation]: [
@@ -66,7 +77,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                     path: WebsitePaths.Wiki,
                 },
                 {
-                    title: this.props.translate.get(Key.FAQ, Deco.Cap),
+                    title: this.props.translate.get(Key.Faq, Deco.Cap),
                     path: WebsitePaths.FAQ,
                 },
             ],
@@ -115,6 +126,9 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                 },
             ],
         };
+        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+        });
         return (
             <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
@@ -133,6 +147,15 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                             >
                                 © ZeroEx, Intl.
                             </div>
+                            <div className="pt4 center">
+                                <DropDownMenu
+                                    labelStyle={{ color: colors.white }}
+                                    value={this.state.selectedLanguage}
+                                    onChange={this._updateLanguage.bind(this)}
+                                >
+                                    {languageMenuItems}
+                                </DropDownMenu>
+                            </div>
                         </div>
                     </div>
                     <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
@@ -167,6 +190,13 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         );
     }
     private _renderMenuItem(item: FooterMenuItem) {
+        const titleToIcon: { [title: string]: string } = {
+            'Rocket.chat': 'rocketchat.png',
+            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
+            Twitter: 'twitter.png',
+            Reddit: 'reddit.png',
+            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
+        };
         const iconIfExists = titleToIcon[item.title];
         return (
             <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
@@ -209,4 +239,12 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
+    private _updateLanguage(e: any, index: number, value: Language) {
+        this.setState({
+            selectedLanguage: value,
+        });
+        if (!_.isUndefined(this.props.onLanguageSelected)) {
+            this.props.onLanguageSelected(value);
+        }
+    }
 }
-- 
cgit v1.2.3


From a50618fcb0de2c9df7510d043a1d851a2f9456a5 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 21 Feb 2018 10:31:15 -0800
Subject: Fix rocket.chat key

---
 packages/website/ts/components/footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/footer.tsx')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index d7ebc4ede..896b36931 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -191,7 +191,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
     }
     private _renderMenuItem(item: FooterMenuItem) {
         const titleToIcon: { [title: string]: string } = {
-            'Rocket.chat': 'rocketchat.png',
+            [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
             [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
             Twitter: 'twitter.png',
             Reddit: 'reddit.png',
-- 
cgit v1.2.3


From e2d17d122e25feeabb1d5499065274ec6e30bd4f Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 21 Feb 2018 11:46:16 -0800
Subject: Keep topBar and footer language to the one picked by the user

---
 packages/website/ts/components/footer.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/components/footer.tsx')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 896b36931..2d03ca576 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -3,6 +3,7 @@ import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
@@ -35,7 +36,7 @@ const languageToMenuTitle = {
 
 export interface FooterProps {
     translate?: Translate;
-    onLanguageSelected?: (language: Language) => void;
+    dispatcher: Dispatcher;
 }
 
 interface FooterState {
@@ -243,8 +244,6 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         this.setState({
             selectedLanguage: value,
         });
-        if (!_.isUndefined(this.props.onLanguageSelected)) {
-            this.props.onLanguageSelected(value);
-        }
+        this.props.dispatcher.updateSelectedLanguage(value);
     }
 }
-- 
cgit v1.2.3


From 7d8cad8e3a3600aeb1217697546635b04ba83ed0 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 21 Feb 2018 11:51:41 -0800
Subject: Make translate required by footer

---
 packages/website/ts/components/footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/footer.tsx')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 2d03ca576..1b6fabf2b 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -35,7 +35,7 @@ const languageToMenuTitle = {
 };
 
 export interface FooterProps {
-    translate?: Translate;
+    translate: Translate;
     dispatcher: Dispatcher;
 }
 
-- 
cgit v1.2.3


From ef6f52e722ffb07ecf6d0da79f9194c4cf0d14d1 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 21 Feb 2018 11:54:03 -0800
Subject: Remove extenuous defaultProps

---
 packages/website/ts/components/footer.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'packages/website/ts/components/footer.tsx')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 1b6fabf2b..de20d074d 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -44,9 +44,6 @@ interface FooterState {
 }
 
 export class Footer extends React.Component<FooterProps, FooterState> {
-    public static defaultProps: Partial<FooterProps> = {
-        translate: new Translate(),
-    };
     constructor(props: FooterProps) {
         super();
         this.state = {
-- 
cgit v1.2.3

