diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-05 08:02:10 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-05 08:02:10 +0800 |
commit | cf733630162e95ff5edea3b45fba5b16001f3c87 (patch) | |
tree | aeb95b0ba55e990b0c4a0dce322cc6ba5ef875eb | |
parent | a74597c7cd44d3138de39ec05079e9b9e005d03d (diff) | |
download | dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.tar dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.tar.gz dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.tar.bz2 dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.tar.lz dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.tar.xz dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.tar.zst dexon-0x-contracts-cf733630162e95ff5edea3b45fba5b16001f3c87.zip |
Address PR feedback
-rw-r--r-- | packages/react-shared/src/utils/colors.ts | 1 | ||||
-rw-r--r-- | packages/website/ts/components/forms/subscribe_form.tsx | 30 | ||||
-rw-r--r-- | packages/website/ts/components/ui/button.tsx | 10 | ||||
-rw-r--r-- | packages/website/ts/components/ui/input.tsx | 4 | ||||
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 14 | ||||
-rw-r--r-- | packages/website/ts/utils/fetch_utils.ts | 22 | ||||
-rw-r--r-- | packages/website/ts/utils/utils.ts | 3 |
8 files changed, 46 insertions, 40 deletions
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 92f45c2e7..7d047a50e 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -22,7 +22,6 @@ const baseColors = { heroGrey: '#404040', projectsGrey: '#343333', darkestGrey: '#272727', - darkButtonGrey: '#252525', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', linkBlue: '#1D5CDE', diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index b83a9c346..4bef3a7b6 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,7 +1,6 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import { logUtils } from '@0xproject/utils'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Input } from 'ts/components/ui/input'; @@ -16,6 +15,7 @@ export enum SubscribeFormStatus { Error, Success, Loading, + Other, } export interface SubscribeFormState { @@ -24,6 +24,9 @@ export interface SubscribeFormState { status: SubscribeFormStatus; } +const FORM_FONT_SIZE = '15px'; + +// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001 export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> { public state = { emailText: '', @@ -31,7 +34,6 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe status: SubscribeFormStatus.None, }; public render(): React.ReactNode { - const formFontSize = '15px'; return ( <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2"> <Container marginBottom="15px"> @@ -46,18 +48,18 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe placeholder="you@email.com" value={this.state.emailText} fontColor={colors.white} - fontSize={formFontSize} + fontSize={FORM_FONT_SIZE} backgroundColor={colors.projectsGrey} - width="275px" + width="300px" onChange={this._handleEmailInputChange.bind(this)} /> </Container> <Container marginLeft="15px" marginTop="15px"> <Button type="submit" - backgroundColor={colors.darkButtonGrey} + backgroundColor={colors.darkestGrey} fontColor={colors.white} - fontSize={formFontSize} + fontSize={FORM_FONT_SIZE} > Subscribe </Button> @@ -82,16 +84,19 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe break; case SubscribeFormStatus.None: break; + default: + throw new Error( + 'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.', + ); } return ( <Container isHidden={!message} marginTop="30px"> <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}> - {message || 'spacer text'} + {message || 'spacer text (never shown to user)'} </Text> </Container> ); } - private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void { this.setState({ emailText: event.target.value }); } @@ -107,15 +112,12 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe try { const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText); const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; - this._setStatus(status); + this.setState({ status, emailText: '' }); } catch (error) { - logUtils.log(error); this._setStatus(SubscribeFormStatus.Error); - } finally { - this.setState({ emailText: '' }); } } - private _setStatus(status: SubscribeFormStatus, then?: () => void): void { - this.setState({ status }, then); + private _setStatus(status: SubscribeFormStatus): void { + this.setState({ status }); } } diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index e6e31374f..4c7d59839 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -48,15 +48,15 @@ Button.defaultProps = { Button.displayName = 'Button'; -type CTAType = 'light' | 'dark'; +type CallToActionType = 'light' | 'dark'; -export interface CTAProps { - type?: CTAType; +export interface CallToActionProps { + type?: CallToActionType; fontSize?: string; width?: string; } -export const CTA: React.StatelessComponent<CTAProps> = ({ children, type, fontSize, width }) => { +export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => { const isLight = type === 'light'; const backgroundColor = isLight ? colors.white : colors.heroGrey; const fontColor = isLight ? colors.heroGrey : colors.white; @@ -74,6 +74,6 @@ export const CTA: React.StatelessComponent<CTAProps> = ({ children, type, fontSi ); }; -CTA.defaultProps = { +CallToAction.defaultProps = { type: 'dark', }; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index 75a453eae..e01a71a53 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -28,7 +28,7 @@ export const Input = styled(PlainInput)` border: none; background-color: ${props => props.backgroundColor}; &::placeholder { - color: ${props => props.placeholder}; + color: ${props => props.placeholderColor}; } `; @@ -36,7 +36,7 @@ Input.defaultProps = { width: 'auto', backgroundColor: colors.white, fontColor: colors.darkestGrey, - placeholderColor: colors.grey500, + placeholderColor: colors.darkGrey, fontSize: '12px', }; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index d3e205d12..259365618 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent<TranslatedTextProps> = ({ translate, children, deco, - ...textProps, + ...textProps }) => <Text {...textProps}>{translate.get(children, deco)}</Text>; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 1a1772a23..db3eb83b0 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { CTA } from 'ts/components/ui/button'; +import { CallToAction } from 'ts/components/ui/button'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -272,9 +272,9 @@ export class Landing extends React.Component<LandingProps, LandingState> { <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 389 }}> <div className="lg-pr2 md-pr2 col col-6 sm-center"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <CTA width="175px" type="light"> + <CallToAction width="175px" type="light"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} - </CTA> + </CallToAction> </Link> </div> <div className="col col-6 sm-center"> @@ -283,9 +283,9 @@ export class Landing extends React.Component<LandingProps, LandingState> { target="_blank" className="text-decoration-none" > - <CTA width="175px"> + <CallToAction width="175px"> {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)} - </CTA> + </CallToAction> </a> </div> </div> @@ -774,7 +774,9 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="sm-center sm-pt2 lg-table-cell md-table-cell"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <CTA fontSize="15px">{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}</CTA> + <CallToAction fontSize="15px"> + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} + </CallToAction> </Link> </div> </div> diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index e65ac64e1..513f7e479 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -4,23 +4,26 @@ import * as queryString from 'query-string'; import { errorReporter } from 'ts/utils/error_reporter'; +const logErrorIfPresent = (response: Response, requestedURL: string) => { + if (response.status !== 200) { + const errorText = `Error requesting url: ${requestedURL}, ${response.status}: ${response.statusText}`; + logUtils.log(errorText); + const error = Error(errorText); + // tslint:disable-next-line:no-floating-promises + errorReporter.reportAsync(error); + throw error; + } +}; + export const fetchUtils = { async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> { const query = queryStringFromQueryParams(queryParams); const url = `${baseUrl}${path}${query}`; const response = await fetch(url); - if (response.status !== 200) { - const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`; - logUtils.log(errorText); - const error = Error(errorText); - // tslint:disable-next-line:no-floating-promises - errorReporter.reportAsync(error); - throw error; - } + logErrorIfPresent(response, url); const result = await response.json(); return result; }, - async postAsync(baseUrl: string, path: string, body: object): Promise<Response> { const url = `${baseUrl}${path}`; const response = await fetch(url, { @@ -30,6 +33,7 @@ export const fetchUtils = { }, body: JSON.stringify(body), }); + logErrorIfPresent(response, url); return response; }, }; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 10381845b..b9d962b75 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -306,8 +306,7 @@ export const utils = { return parsedProviderName; }, getBackendBaseUrl(): string { - return 'http://localhost:3000'; - // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; + return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; }, isDevelopment(): boolean { return configs.ENVIRONMENT === Environments.DEVELOPMENT; |