From ba7c8d924429a96f6d2b3280faa6b508b582f557 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:19:52 -0800 Subject: feat: make project build by adding back old footer component --- packages/website/ts/components/layout.tsx | 2 +- packages/website/ts/components/old_footer.tsx | 228 +++++++++++++++++++++ packages/website/ts/pages/about/about.tsx | 2 +- packages/website/ts/pages/faq/faq.tsx | 2 +- .../website/ts/pages/instant/config_generator.tsx | 8 +- packages/website/ts/pages/instant/configurator.tsx | 2 +- packages/website/ts/pages/jobs/jobs.tsx | 2 +- packages/website/ts/pages/landing/landing.tsx | 2 +- .../website/ts/pages/launch_kit/launch_kit.tsx | 2 +- packages/website/ts/pages/not_found.tsx | 2 +- 10 files changed, 240 insertions(+), 12 deletions(-) create mode 100644 packages/website/ts/components/old_footer.tsx diff --git a/packages/website/ts/components/layout.tsx b/packages/website/ts/components/layout.tsx index 770ee159c..9563f80f8 100644 --- a/packages/website/ts/components/layout.tsx +++ b/packages/website/ts/components/layout.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/@next/constants/utilities'; +import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/constants/utilities'; interface WrapWidths { default: string; diff --git a/packages/website/ts/components/old_footer.tsx b/packages/website/ts/components/old_footer.tsx new file mode 100644 index 000000000..6366bf4ea --- /dev/null +++ b/packages/website/ts/components/old_footer.tsx @@ -0,0 +1,228 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import DropDownMenu from 'material-ui/DropDownMenu'; +import MenuItem from 'material-ui/MenuItem'; +import * as React from 'react'; + +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Deco, Key, Language, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const ICON_DIMENSION = 16; + +const languageToMenuTitle = { + [Language.English]: 'English', + [Language.Russian]: 'Русский', + [Language.Spanish]: 'Español', + [Language.Korean]: '한국어', + [Language.Chinese]: '中文', +}; + +export interface FooterProps { + translate: Translate; + dispatcher: Dispatcher; + backgroundColor?: string; +} + +interface FooterState { + selectedLanguage: Language; +} + +export class Footer extends React.Component { + public static defaultProps = { + backgroundColor: colors.darkerGrey, + }; + constructor(props: FooterProps) { + super(props); + this.state = { + selectedLanguage: props.translate.getLanguage(), + }; + } + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap = { + [Key.Documentation]: [ + { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, + { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, + { + title: this.props.translate.get(Key.SmartContracts, Deco.Cap), + to: WebsitePaths.SmartContracts, + }, + { + title: this.props.translate.get(Key.Connect, Deco.Cap), + to: WebsitePaths.Connect, + }, + { + title: this.props.translate.get(Key.Whitepaper, Deco.Cap), + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, + }, + { + title: this.props.translate.get(Key.Wiki, Deco.Cap), + to: WebsitePaths.Wiki, + }, + ], + [Key.Community]: [ + { + title: this.props.translate.get(Key.Discord, Deco.Cap), + to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, + }, + { + title: this.props.translate.get(Key.Blog, Deco.Cap), + to: constants.URL_BLOG, + shouldOpenInNewTab: true, + }, + { + title: 'Twitter', + to: constants.URL_TWITTER, + shouldOpenInNewTab: true, + }, + { + title: 'Reddit', + to: constants.URL_REDDIT, + shouldOpenInNewTab: true, + }, + { + title: this.props.translate.get(Key.Forum, Deco.Cap), + to: constants.URL_DISCOURSE_FORUM, + shouldOpenInNewTab: true, + }, + ], + [Key.Organization]: [ + { + title: this.props.translate.get(Key.About, Deco.Cap), + to: WebsitePaths.About, + }, + { + title: this.props.translate.get(Key.Careers, Deco.Cap), + to: WebsitePaths.Careers, + }, + { + title: this.props.translate.get(Key.Contact, Deco.Cap), + to: 'mailto:team@0x.org', + shouldOpenInNewTab: true, + }, + ], + }; + const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => { + return ; + }); + return ( +
+
+
+
+
+ +
+
+ © ZeroEx, Intl. +
+
+ + {languageMenuItems} + +
+
+
+
+
+
+ {this._renderHeader(Key.Documentation)} + {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))} +
+
+
+
+ {this._renderHeader(Key.Community)} + {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))} +
+
+
+
+ {this._renderHeader(Key.Organization)} + {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))} +
+
+
+
+
+ ); + } + private _renderIcon(fileName: string): React.ReactNode { + return ( +
+ +
+ ); + } + private _renderMenuItem(link: ALink): React.ReactNode { + const titleToIcon: { [title: string]: string } = { + [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.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[link.title]; + return ( +
+ +
+ {!_.isUndefined(iconIfExists) ? ( +
+
{this._renderIcon(iconIfExists)}
+
{link.title}
+
+ ) : ( + link.title + )} +
+ +
+ ); + } + private _renderHeader(key: Key): React.ReactNode { + const headerStyle = { + color: colors.grey400, + letterSpacing: 2, + fontFamily: 'Roboto Mono', + fontSize: 13, + }; + return ( +
+ {this.props.translate.get(key, Deco.Upper)} +
+ ); + } + private _updateLanguage(_event: any, _index: number, value: Language): void { + this.setState({ + selectedLanguage: value, + }); + this.props.dispatcher.updateSelectedLanguage(value); + } +} diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 81a3f59e1..39bbc584f 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -2,7 +2,7 @@ import { colors, Link, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/footer'; +import { Footer } from 'ts/components/old_footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index c4965e61c..8cde7224e 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -2,7 +2,7 @@ import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/footer'; +import { Footer } from 'ts/components/old_footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Question } from 'ts/pages/faq/question'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 024d37b51..e43d47119 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -6,13 +6,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input'; -import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; import { CheckMark } from 'ts/components/ui/check_mark'; import { Container } from 'ts/components/ui/container'; import { MultiSelect } from 'ts/components/ui/multi_select'; import { Spinner } from 'ts/components/ui/spinner'; import { Text } from 'ts/components/ui/text'; +import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input'; +import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -21,8 +21,8 @@ import { constants } from 'ts/utils/constants'; import { Heading } from 'ts/components/text'; import { Select, SelectItemConfig } from 'ts/pages/instant/select'; -import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map'; -import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; +import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map'; +import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../instant/src/types'; export interface ConfigGeneratorProps { value: ZeroExInstantBaseConfig; diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index c5f7b06a5..a63e1752e 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -10,7 +10,7 @@ import { Column, FlexWrap } from 'ts/components/newLayout'; import { Heading } from 'ts/components/text'; import { WebsitePaths } from 'ts/types'; -import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; +import { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; export interface ConfiguratorState { instantConfig: ZeroExInstantBaseConfig; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 728e17f9e..872dc6103 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -3,8 +3,8 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/footer'; import { MetaTags } from 'ts/components/meta_tags'; +import { Footer } from 'ts/components/old_footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Container } from 'ts/components/ui/container'; import { Benefits } from 'ts/pages/jobs/benefits'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index b75b55edb..aac659fd5 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -2,8 +2,8 @@ import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; +import { Footer } from 'ts/components/old_footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx index 4ea56dbd4..37794e887 100644 --- a/packages/website/ts/pages/launch_kit/launch_kit.tsx +++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx @@ -2,7 +2,7 @@ import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/footer'; +import { Footer } from 'ts/components/old_footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx index a7992a8fa..6abd8fc80 100644 --- a/packages/website/ts/pages/not_found.tsx +++ b/packages/website/ts/pages/not_found.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Footer } from 'ts/components/footer'; +import { Footer } from 'ts/components/old_footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { FullscreenMessage } from 'ts/pages/fullscreen_message'; import { Dispatcher } from 'ts/redux/dispatcher'; -- cgit v1.2.3