Keep topBar and footer language to the one picked by the user

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);
     }
 }

packages/website/ts/components/portal.tsx

@@ -27,6 +27,7 @@ import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAdd
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const THROTTLE_TIMEOUT = 100;
@@ -52,6 +53,7 @@ export interface PortalAllProps {
     location: Location;
     flashMessage?: string | React.ReactNode;
     lastForceTokenStateRefetch: number;
+    translate: Translate;
 }
 
 interface PortalAllState {
@@ -259,7 +261,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                         />
                     )}
                 </div>
-                <Footer />;
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }

packages/website/ts/containers/about.tsx

@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { About as AboutComponent, AboutProps } from 'ts/pages/about/about';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: AboutProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const About: React.ComponentClass<AboutProps> = connect(mapStateToProps, mapDispatchToProps)(AboutComponent);

packages/website/ts/containers/connect_documentation.tsx

@@ -9,6 +9,7 @@ import { State } from 'ts/redux/reducer';
 import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
 /* tslint:disable:no-var-requires */
@@ -83,6 +84,7 @@ interface ConnectedState {
     docsVersion: string;
     availableDocVersions: string[];
     docsInfo: DocsInfo;
+    translate: Translate;
 }
 
 interface ConnectedDispatch {
@@ -92,6 +94,7 @@ interface ConnectedDispatch {
 const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({
     docsVersion: state.docsVersion,
     availableDocVersions: state.availableDocVersions,
+    translate: state.translate,
     docsInfo,
 });
 

packages/website/ts/containers/faq.tsx

@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { FAQ as FAQComponent, FAQProps } from 'ts/pages/faq/faq';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: FAQProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const FAQ: React.ComponentClass<FAQProps> = connect(mapStateToProps, mapDispatchToProps)(FAQComponent);

packages/website/ts/containers/not_found.tsx

@@ -0,0 +1,28 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { NotFound as NotFoundComponent, NotFoundProps } from 'ts/pages/not_found';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: NotFoundProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const NotFound: React.ComponentClass<NotFoundProps> = connect(mapStateToProps, mapDispatchToProps)(
+    NotFoundComponent,
+);

packages/website/ts/containers/portal.tsx

@@ -8,6 +8,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
 import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 
 interface ConnectedState {
     blockchainErr: BlockchainErrs;
@@ -26,6 +27,7 @@ interface ConnectedState {
     userAddress: string;
     userSuppliedOrderCache: Order;
     flashMessage?: string | React.ReactNode;
+    translate: Translate;
 }
 
 interface ConnectedDispatch {
@@ -73,6 +75,7 @@ const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): Conne
         userEtherBalance: state.userEtherBalance,
         userSuppliedOrderCache: state.userSuppliedOrderCache,
         flashMessage: state.flashMessage,
+        translate: state.translate,
     };
 };
 

packages/website/ts/containers/smart_contracts_documentation.tsx

@@ -8,6 +8,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
 import { DocsInfoConfig, SmartContractDocSections as Sections, WebsitePaths } from 'ts/types';
 import { doxityUtils } from 'ts/utils/doxity_utils';
+import { Translate } from 'ts/utils/translate';
 
 /* tslint:disable:no-var-requires */
 const IntroMarkdown = require('md/docs/smart_contracts/introduction');
@@ -40,6 +41,7 @@ const docsInfo = new DocsInfo(docsInfoConfig);
 interface ConnectedState {
     docsVersion: string;
     availableDocVersions: string[];
+    translate: Translate;
 }
 
 interface ConnectedDispatch {
@@ -50,6 +52,7 @@ interface ConnectedDispatch {
 const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({
     docsVersion: state.docsVersion,
     availableDocVersions: state.availableDocVersions,
+    translate: state.translate,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({

packages/website/ts/containers/wiki.tsx

@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: WikiProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const Wiki: React.ComponentClass<WikiProps> = connect(mapStateToProps, mapDispatchToProps)(WikiComponent);

packages/website/ts/containers/zero_ex_js_documentation.tsx

@@ -9,6 +9,7 @@ import { State } from 'ts/redux/reducer';
 import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
 /* tslint:disable:no-var-requires */
@@ -154,6 +155,7 @@ interface ConnectedState {
     docsVersion: string;
     availableDocVersions: string[];
     docsInfo: DocsInfo;
+    translate: Translate;
 }
 
 interface ConnectedDispatch {
@@ -164,6 +166,7 @@ const mapStateToProps = (state: State, ownProps: DocumentationAllProps): Connect
     docsVersion: state.docsVersion,
     availableDocVersions: state.availableDocVersions,
     docsInfo,
+    translate: state.translate,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({

packages/website/ts/index.tsx

@@ -7,14 +7,14 @@ import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
 import { createStore, Store as ReduxStore } from 'redux';
+import { About } from 'ts/containers/about';
+import { FAQ } from 'ts/containers/faq';
 import { Landing } from 'ts/containers/landing';
+import { NotFound } from 'ts/containers/not_found';
+import { Wiki } from 'ts/containers/wiki';
 import { createLazyComponent } from 'ts/lazy_component';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
-import { About } from 'ts/pages/about/about';
-import { FAQ } from 'ts/pages/faq/faq';
-import { NotFound } from 'ts/pages/not_found';
-import { Wiki } from 'ts/pages/wiki/wiki';
 import { reducer, State } from 'ts/redux/reducer';
 import { WebsitePaths } from 'ts/types';
 import { muiTheme } from 'ts/utils/mui_theme';

packages/website/ts/pages/about/about.tsx

@@ -4,9 +4,11 @@ import * as DocumentTitle from 'react-document-title';
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Profile } from 'ts/pages/about/profile';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProfileInfo, Styles } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const teamRow1: ProfileInfo[] = [
@@ -143,6 +145,8 @@ const advisors: ProfileInfo[] = [
 export interface AboutProps {
     source: string;
     location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
 }
 
 interface AboutState {}
@@ -174,6 +178,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                     blockchainIsLoaded={false}
                     location={this.props.location}
                     style={{ backgroundColor: colors.lightestGrey }}
+                    translate={this.props.translate}
                 />
                 <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}>
                     <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}>
@@ -230,7 +235,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         </div>
                     </div>
                 </div>
-                <Footer />
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }

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

@@ -35,6 +35,7 @@ import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';
+import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const TOP_BAR_HEIGHT = 60;
@@ -54,6 +55,7 @@ export interface DocumentationAllProps {
     docsVersion: string;
     availableDocVersions: string[];
     docsInfo: DocsInfo;
+    translate: Translate;
 }
 
 interface DocumentationState {
@@ -114,6 +116,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
                     menu={this.props.docsInfo.getMenu(this.props.docsVersion)}
                     menuSubsectionsBySection={menuSubsectionsBySection}
                     docsInfo={this.props.docsInfo}
+                    translate={this.props.translate}
                 />
                 {_.isUndefined(this.state.docAgnosticFormat) ? (
                     <div className="col col-12" style={styles.mainContainers}>

packages/website/ts/pages/faq/faq.tsx

@@ -4,14 +4,18 @@ import * as DocumentTitle from 'react-document-title';
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Question } from 'ts/pages/faq/question';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 
 export interface FAQProps {
     source: string;
     location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
 }
 
 interface FAQState {}
@@ -407,14 +411,14 @@ export class FAQ extends React.Component<FAQProps, FAQState> {
         return (
             <div>
                 <DocumentTitle title="0x FAQ" />
-                <TopBar blockchainIsLoaded={false} location={this.props.location} />
+                <TopBar blockchainIsLoaded={false} location={this.props.location} translate={this.props.translate} />
                 <div id="faq" className="mx-auto max-width-4 pt4" style={{ color: colors.grey800 }}>
                     <h1 className="center" style={{ ...styles.thin }}>
                         0x FAQ
                     </h1>
                     <div className="sm-px2 md-px2 lg-px0 pb4">{this._renderSections()}</div>
                 </div>
-                <Footer />
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }

packages/website/ts/pages/landing/landing.tsx

@@ -212,7 +212,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                 {this._renderBuildingBlocksSection()}
                 {this._renderUseCases()}
                 {this._renderCallToAction()}
-                <Footer translate={this.props.translate} onLanguageSelected={this._onLanguageSelected.bind(this)} />
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }

packages/website/ts/pages/not_found.tsx

@@ -2,10 +2,14 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import { Styles } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
 
 export interface NotFoundProps {
     location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
 }
 
 interface NotFoundState {}
@@ -20,7 +24,7 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
     public render() {
         return (
             <div>
-                <TopBar blockchainIsLoaded={false} location={this.props.location} />
+                <TopBar blockchainIsLoaded={false} location={this.props.location} translate={this.props.translate} />
                 <div className="mx-auto max-width-4 py4">
                     <div className="center py4">
                         <div className="py4">
@@ -35,7 +39,7 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
                         </div>
                     </div>
                 </div>
-                <Footer />
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }

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

@@ -8,10 +8,12 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { MarkdownSection } from 'ts/pages/shared/markdown_section';
 import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
 import { SectionHeader } from 'ts/pages/shared/section_header';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const TOP_BAR_HEIGHT = 60;
@@ -20,6 +22,8 @@ const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
 export interface WikiProps {
     source: string;
     location: Location;
+    dispatcher: Dispatcher;
+    translate: Translate;
 }
 
 interface WikiState {
@@ -79,6 +83,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                     blockchainIsLoaded={false}
                     location={this.props.location}
                     menuSubsectionsBySection={menuSubsectionsBySection}
+                    translate={this.props.translate}
                 />
                 {_.isUndefined(this.state.articlesBySection) ? (
                     <div className="col col-12" style={mainContainersStyle}>

packages/website/ts/redux/reducer.ts

@@ -95,7 +95,10 @@ export function reducer(state: State = INITIAL_STATE, action: Action) {
     switch (action.type) {
         // Portal
         case ActionTypes.ResetState:
-            return INITIAL_STATE;
+            return {
+                ...INITIAL_STATE,
+                translate: state.translate,
+            };
 
         case ActionTypes.UpdateOrderSalt: {
             return {